/* ============================================================
   Smart Write — design tokens
   Light is the default theme; html/body.theme-dark overrides.
   ============================================================ */

   :root {


    /* Colours */
    --col-red-100:      #fda4af;
    --col-red-200:      #e89a9a;
    --col-orange-100:   #fdba74;
    --col-yellow-100:   #fcd34d;
    --col-yellow-200:   #eac283;
    --col-yellow-300:   #e8e3d4;
    --col-green-100:    #bef264;
    --col-green-200:    #80dea8;
    --col-green-300:    #40814b;
    --col-green-400:    #e5fbee;
    --col-green-500:    #aed6b5;
    --col-green-600:    #1f6b5e;
    --col-green-700:    #39bf72;
    --col-blue-100:     #86efac;
    --col-blue-200:     #6b93c4;
    --col-blue-300:     #677a92;
    --col-cyan-100:     #5eead4;
    --col-sky-100:      #7dd3fc;
    --col-indigo-100:   #93c5fd;
    --col-purple-100:   #a5b4fc;
    --col-pink-100:     #c4b5fd;
    --col-pink-200:     #f9a8d4;
    --col-pink-300:     #dba2c4;
    --col-rose-100:     #d8b4fe;
    --col-fuchsia-100:  #f9a8d4;
    --col-gray-100:     #6b6e75;
    --col-gray-200:     #9a9da4;
    --col-gray-300:     #d7d4cd;
    --col-gray-400:     #e7e8ea;
    --col-gray-500:     #f4f3f0;
    --col-gray-600:     #fbfaf8;
    --col-gray-700:     #ffffff;
    --col-cream-100:    #e7dbcb;
    --col-cream-200:    #fcfaf7;
    --col-ink-100:      #22262d;
    --col-ink-200:      #16181c;
    --col-ink-300:      #373a40;

    /* Dimensions */

    --header-height:              58px;
    --sidebar-open-default-width: 260px;
    --sidebar-closed-width:       72px;
    --panel-width:                308px;
    --panel-handle-width:         22px;
    --panel-handle-height:        55px;
    --panel-handle-top-offset:    80px;
    --panel-offscreen-distance:   calc(100vw + 24px);

    /* bookmarks */
    /* Canonical page size; --reader-display-scale set by reader-display-scale.js */
    --reader-page-width:          576px;
    --reader-page-height:         864px;
    --reader-display-scale:       1;
    --bookmark-width:             55px;
    --bookmark-inset:             65px;
    --bookmark-offset-y:          0px;
    --bookmark-color:             var(--col-green-600);
    --messaging-unread-dot:       var(--col-green-200);
    --messaging-source-contact:   var(--col-orange-100);
    --messaging-source-user:      var(--col-blue-200);
    --messaging-source-system:    var(--col-red-100);
    --messaging-kind-chat:        var(--col-green-700);
    --messaging-kind-message:     var(--col-indigo-100);
    --messaging-kind-contact:     var(--col-orange-100);

    --bookmark-toc-width:         12px;
 

    /* UI Sizes */
    --ui-sz-max-width-sm:         680px;
    --ui-sz-max-width-md:         900px;
    --ui-sz-max-width-lg:         1200px;
    --ui-sz-max-width-xl:         100vw;
  
    /* Type */
    --font-ui:                    "Hanken Grotesk", system-ui, -apple-system, sans-serif;
    --font-editor:                "Source Sans 3", system-ui, sans-serif; /* user-swappable */
    --editor-font-size:           18px;
    /* Chapter / structural h2 scale relative to body (25px @ 18px default). */
    --editor-heading-scale:       1.3888888889;
    --editor-leading:             1.8;
    --threads-line-spacing:       3px;
  
    /* Shape */
    --radius:                     10px;
    --radius-sm:                  7px;
    --radius-xs:                  5px;
    --radius-lg:                  50px;
  
    /* Motion — single source of truth for every panel transition (see test_files/test-panels.html) */
    --panel-ease:                 ease;
    --panel-duration:             260ms;           /* base: how long a panel takes to move/resize */
  
    /* Entity tag intensity (alpha stops fed to color-mix) */
    --tag-base:                   14%;   /* dim, at rest                         */
    --tag-lit:                    30%;   /* brightened: hover-any OR keep-on     */

    /* Default colour-mixer palette (comma-separated hex list) */
    --colour-palette: #fda4af, #fdba74, #fcd34d, #bef264, #86efac, #5eead4, #7dd3fc, #93c5fd, #a5b4fc, #c4b5fd, #d8b4fe, #f9a8d4;

    /* Note colours — full set matches legacy note swatches */
    --note-colour-palette:
      #fda4af, #fdba74, #fcd34d, #bef264, #86efac, #5eead4,
      #7dd3fc, #93c5fd, #a5b4fc, #c4b5fd, #d8b4fe, #f9a8d4;
    /* Note colours — compact picker (~8) */
    --note-colour-palette-sm:
      #fda4af, #fdba74, #fcd34d, #86efac, #5eead4, #7dd3fc, #c4b5fd, #f9a8d4;

    /* Default Tag Colours */
    /* Plot */
    --plot-col-act-default: var(--col-orange-100);

    /* Editor */
    --editor-line-gap: 5px;
    --plot-row-gap:    5px;

    /* FONT SIZES */
    --font-size-xs: 8px;
    --font-size-sm: 10px;
    --font-size-md: 14px;
    --font-size-lg: 20px;
    --font-size-xl: 25px;


    /* Icon sizes */
    --icon-size-xs: 10px;
    --icon-size-sm: 15px;
    --icon-size-md: 20px;
    --icon-size-lg: 28px;
    --icon-size-xl: 35px;

    /* Header action icon buttons (theme / tweaks / messages) */
    --header-icon-size: var(--icon-size-md);
    --header-icon-btn-size: 32px;

    /* Pencil loader */
    --loader-stroke-width: 4px;
    --loader-speed: 1.9s;
    --loader-fill-colour: var(--raised-bg);

    --bg-light-gradient: linear-gradient(to bottom, var(--col-cream-200), var(--app-bg-base));
    --bg-dark-gradient: linear-gradient(to bottom, var(--col-ink-200), var(--app-bg-base));

    /* Plot block defaults (heading / body / cell / group) */
    --col-heading-default: #cae4ec;
    --col-block-default: #f4f3f0;
    --col-cell-default: #f6f1e5;
    --col-group-default: #e8ebe3;
    --col-headinng-default: var(--col-heading-default);


  }
  
  /* ---------- LIGHT (default) ---------- */
  :root,
  html.theme-light,
  body.theme-light {
    --app-bg-base:   #f4f3f0;
    --app-bg:        var(--bg-light-gradient);
    --header-bg:     #ffffff;
    --panel-bg:      #fbfaf8;
    --editor-bg:     #ffffff;
    --rail-bg:       #f1efea;
    --raised-bg:     #ffffff;
    --input-bg:      #ffffff;
    --col-popout-bg: var(--col-yellow-300);
  
    --text:          #22242a;
    --text-dim:      #6c6f78;
    --text-faint:    #9b9da6;
  
    --hairline:        #e7e5e0;
    --hairline-strong: #d7d4cd;
  
    --accent:        #5d6b86;
    --accent-soft:   rgba(93, 107, 134, 0.12);
    --sel-bg:        rgba(93, 107, 134, 0.15);
    --heading:       #50607c;
  
    --danger:        #b4514f;
  
    --ec-character:  #5b6b86;
    --ec-place:      #5f7a5c;
    --ec-chapter:    #8a7350;
    --ec-custom:     #7a6486;
    --ec-thread:     #4a7aaf;   /* blue-toned thread lane colour */

    /* version status tag (§9) */
    --vs-dim: 12%;
    --vs-lit: 26%;
    --vs-outline: #6c7079;
    --vs-drafting: #d88a1c;
    --vs-revising: #42648c;
    --vs-editing: #6f5480;
    --vs-proofreading: #8f5d6b;
    --vs-final: #4f7a4a;
    --vs-published: #3f8a72;
  
    --tag-base: 10%;
    --tag-lit:  24%;

    /* Pencil loader */
    --loader-line-colour: var(--col-blue-300);

    color-scheme: light;
  }

  /* ---------- DARK ---------- */
  html.theme-dark,
  body.theme-dark {
    --app-bg-base:   #0f1114;
    --app-bg:        var(--bg-dark-gradient);
    --header-bg:     #16181c;
    --panel-bg:      #15171b;
    --editor-bg:     #17191e;
    --rail-bg:       #101216;
    --raised-bg:     #1b1e24;
    --input-bg:      #1c1f25;
    --col-popout-bg: var(--col-ink-300);
  
    --text:          #e7e8ea;
    --text-dim:      #9a9da4;
    --text-faint:    #6b6e75;
  
    --hairline:        #262a30;
    --hairline-strong: #353a42;
  
    --accent:        #93a4c6;
    --accent-soft:   rgba(147, 164, 198, 0.14);
    --sel-bg:        rgba(147, 164, 198, 0.18);
    --heading:       #aab9d6;
  
    --danger:        #e89a9a;
  
    /* entity hues */
    --ec-character:  #8ea2c4;
    --ec-place:      #93b08c;
    --ec-chapter:    #c4a878;
    --ec-custom:     #b298c2;
    --ec-thread:     #6b93c4;   /* blue-toned thread lane colour */

    /* version status tag (§9) */
    --vs-dim: 16%;
    --vs-lit: 34%;
    --vs-outline: #9a9da4;
    --vs-drafting: #b97a22;
    --vs-revising: #78a6c4;
    --vs-editing: #b298c2;
    --vs-proofreading: #c490a0;
    --vs-final: #8fb87f;
    --vs-published: #6fae9a;

    /* Pencil loader */
    --loader-line-colour: var(--col-blue-200);
  
    color-scheme: dark;
  }