/* ==========================================================================
   Karleigh.docx — Design tokens
   Palette sampled directly from the inspiration folder
   ("textures and colors" + "inspo"): aged paper cream, warm taupe,
   deep emerald, glass cyan, brick red, charcoal, highlighter yellow.
   ========================================================================== */

:root {
  /* ---- Paper & ink ------------------------------------------------------ */
  /* Word prints on white. Every sheet is the same white — no ageing,
     no alternation. The three names are kept so older rules still resolve. */
  --paper:          #ffffff;
  --paper-fresh:    #ffffff;
  --paper-aged:     #ffffff;
  --paper-edge:     #d6d6d6;  /* neutral hairline for rules and borders    */
  --paper-shadow:   rgba(0, 0, 0, 0.28);

  /* Word's own heading blue, for the built-in Heading 1/2 styles */
  --word-heading:   #2f5496;   /* Word 2007+ blue (default)            */
  --word-heading-2: #4472a8;
  /* Word 97-2003 set headings in black Arial. View ▸ Heading Style flips
     to this, so you can see both without editing anything. */
  --word-heading-97:   #000000;
  --word-heading-97-2: #333333;

  --ink:            #1a1a1a;  /* Word's automatic black                   */
  --ink-soft:       #4b463d;
  --ink-faint:      #857d6e;
  --ink-ghost:      #b4ab99;  /* metadata, page numbers                   */

  /* ---- Jewel tones (from the emerald board + Frutiger Aero refs) -------- */
  --emerald-deep:   #274c3c;
  --emerald:        #3d6b55;
  --emerald-soft:   #527563;
  --teal:           #1f6b70;
  --glass-blue:     #40b0c4;
  --glass-pale:     #a8d8e2;
  --cobalt:         #2a4bd7;

  /* ---- Pops (used sparingly, like spot colour on a press sheet) --------- */
  --brick:          #b7594e;
  --orange:         #e0762a;
  --lime:           #8fbf3f;
  --gold:           #d8a318;
  --highlighter:    #fbf14a;  /* the yellow marker                        */
  --highlighter-2:  #9ff5c8;  /* the green marker                         */

  /* ---- Windows / Word chrome (period-correct greys) --------------------- */
  --chrome:         #d7d3c8;  /* the classic button face                  */
  --chrome-lit:     #ffffff;  /* top-left bevel                           */
  --chrome-dim:     #a9a396;  /* bottom-right bevel                       */
  --chrome-dark:    #6f6a5e;  /* outer bevel                              */
  --chrome-face:    #ece9de;  /* toolbar face, slightly lighter           */
  --canvas:         #7f7f7f;  /* Word's application background grey       */
  --canvas-deep:    #6b6b6b;

  --title-a:        #0a246a;  /* Word title bar, left                     */
  --title-b:        #2b5fbb;
  --title-c:        #4a8ae0;  /* …and its XP-blue right edge              */
  --select:         #2f5ea8;  /* Word selection blue                      */
  --select-soft:    rgba(47, 94, 168, 0.24);

  /* ---- Editing marks ---------------------------------------------------- */
  --spell-red:      #e0342c;  /* the squiggle                             */
  --grammar-green:  #2e9c4a;
  --track-ins:      #7b3fa0;  /* tracked insertion (purple, as Word does) */
  --track-del:      #b7594e;
  --comment:        #cf7b1c;  /* comment anchor + balloon rule            */
  --comment-fill:   #fdf6e3;

  /* ---- Sticky notes ------------------------------------------------------ */
  --sticky-pink:    #f4cdd4;
  --sticky-yellow:  #fbf0a8;
  --sticky-mint:    #cfe9d4;
  --sticky-blue:    #cfe0f2;

  /* ---- Type ------------------------------------------------------------- */
  /* Period-correct system faces load instantly and are the *right* faces:
     Word set everything in Times, Courier and Tahoma. Two web faces carry
     the editorial/zine display voice. */
  /* Every face here shipped in the Word font menu. No web fonts at all —
     which is both more honest to the concept and instant to load. */
  --font-doc:   "Times New Roman", Times, "Liberation Serif", serif;      /* Normal   */
  --font-mono:  "Courier New", Courier, "Nimbus Mono PS", monospace;      /* typed    */
  --font-ui:    Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif;       /* chrome   */
  --font-head:  Arial, Helvetica, "Liberation Sans", sans-serif;          /* Heading 1*/
  --font-book:  "Book Antiqua", Palatino, "Palatino Linotype",
                "Georgia", serif;                                         /* pull quotes */
  --font-goth:  "Century Gothic", "Futura", "Trebuchet MS", sans-serif;   /* labels   */
  --font-slab:  Rockwell, "Bookman Old Style", Georgia, serif;            /* figures  */
  --font-script:"Brush Script MT", "Monotype Corsiva", "Lucida Handwriting",
                "Bradley Hand", cursive;                                  /* marginalia */
  --font-zine:  Impact, "Haettenschweiler", "Arial Black", sans-serif;    /* WordArt  */
  --font-hand:  "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;  /* sticky notes */
  --font-edit:  "Book Antiqua", Palatino, Georgia, serif;   /* kept: older rules resolve */

  /* Editorial scale — a magazine's, not a website's */
  --t-meta:     10px;   /* file metadata, rulers, status bar               */
  --t-ui:       11px;   /* menus, toolbars, tabs                          */
  --t-caption:  12.5px;
  --t-body:     17px;   /* the document body                              */
  --t-lead:     20px;
  --t-h3:       26px;
  --t-h2:       40px;
  --t-h1:       64px;
  --t-display:  clamp(40px, 7.1vw, 90px);  /* must fit the 6.5in text column */

  --lh-body:    1.62;
  --lh-tight:   1.12;

  /* ---- Page geometry ---------------------------------------------------- */
  --page-w:       816px;
  /* the grey either side of the sheet — never zero, at any width */
  --gutter:       clamp(16px, 2.6vw, 40px);   /* 8.5in at 96dpi — a real US Letter sheet     */
  --page-pad-x:   96px;    /* 1in margins                                 */
  --page-pad-y:   84px;
  --chrome-h:     0px;     /* set by JS to the real chrome height         */
  --pane-w:       232px;   /* the Word navigation pane                    */

  /* ---- Cursors -----------------------------------------------------------
     The pixel pointers from the elements folder, redrawn as vectors so they
     stay crisp on retina. Hotspots are set at the point of each shape. */
  --cur-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cpath d='M3 2v15l4-4 2.6 5.6 2.6-1.2L9.6 12H15z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2;
  --cur-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='24'%3E%3Cg stroke='%23fff' stroke-width='3.4' fill='none'%3E%3Cpath d='M3.5 3h6M6.5 3v18M3.5 21h6'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='1.4' fill='none'%3E%3Cpath d='M3.5 3h6M6.5 3v18M3.5 21h6'/%3E%3C/g%3E%3C/svg%3E") 6 12;
  --cur-hand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='23'%3E%3Cpath d='M8 12V4.5a1.6 1.6 0 0 1 3.2 0V10m0-1.2a1.5 1.5 0 0 1 3 0V11m0-1.3a1.5 1.5 0 0 1 3 0v6.4c0 3-2.1 5.2-5.2 5.2H9.4c-2 0-3-.9-4-2.5l-2.6-4.3a1.5 1.5 0 0 1 2.4-1.8L8 15.2' fill='%23fff' stroke='%23000' stroke-width='1.25' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") 8 3;
  --cur-busy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M7 2h10v4l-5 5 5 5v4H7v-4l5-5-5-5z' fill='%23fff' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3Cpath d='M9 4h6v1.6l-3 3-3-3z' fill='%234a8ae0'/%3E%3Cpath d='M12 14.5l3 3.5H9z' fill='%234a8ae0'/%3E%3C/svg%3E") 12 12;

  /* ---- Motion ------------------------------------------------------------ */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-win:   cubic-bezier(0.16, 0.84, 0.44, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   520ms;
}

/* --------------------------------------------------------------------------
   Reading light — "the document at 2am".
   The paper dims to newsprint rather than flipping to pure black, and the
   application chrome dims with it. Both must move together or the menu bar
   ends up as light text on a light toolbar.
   -------------------------------------------------------------------------- */
:root {
  --field: #ffffff;   /* white input surfaces: combo boxes, the ruler track */
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] { --night: 1; }
}
:root[data-theme="night"], :root[data-theme="dark"] { --night: 1; }

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    /* paper & ink */
    --paper:        #24221d;
    --paper-fresh:  #24221d;
    --paper-aged:   #24221d;
    --paper-edge:   #3d3931;
    --ink:          #ece6d8;
    --ink-soft:     #c4bdac;
    --ink-faint:    #948d7e;
    --ink-ghost:    #6e6759;
    --canvas:       #131210;
    --canvas-deep:  #0b0a09;
    --paper-shadow: rgba(0, 0, 0, 0.6);

    /* application chrome */
    --chrome:       #3b3831;
    --chrome-face:  #46423a;
    --chrome-lit:   #5d584d;
    --chrome-dim:   #2c2925;
    --chrome-dark:  #171614;
    --field:        #1b1a17;

    /* marks & surfaces */
    --comment-fill: #322d22;
    --select:       #3d6fb8;
    --select-soft:  rgba(61, 111, 184, 0.3);
    --emerald-deep: #7fb79a;
    --emerald:      #6ea88b;
    --brick:        #d98476;
    --cobalt:       #8fb4f5;
    --highlighter:  #b9a92b;
    --highlighter-2:#3f8f6a;
  }
}

:root[data-theme="night"],
:root[data-theme="dark"] {
  --paper:        #24221d;
  --paper-fresh:  #24221d;
  --paper-aged:   #24221d;
  --paper-edge:   #3d3931;
  --ink:          #ece6d8;
  --ink-soft:     #c4bdac;
  --ink-faint:    #948d7e;
  --ink-ghost:    #6e6759;
  --canvas:       #131210;
  --canvas-deep:  #0b0a09;
  --paper-shadow: rgba(0, 0, 0, 0.6);

  --chrome:       #3b3831;
  --chrome-face:  #46423a;
  --chrome-lit:   #5d584d;
  --chrome-dim:   #2c2925;
  --chrome-dark:  #171614;
  --field:        #1b1a17;

  --comment-fill: #322d22;
  --select:       #3d6fb8;
  --select-soft:  rgba(61, 111, 184, 0.3);
  --emerald-deep: #7fb79a;
  --emerald:      #6ea88b;
  --brick:        #d98476;
  --cobalt:       #8fb4f5;
  --highlighter:  #b9a92b;
  --highlighter-2:#3f8f6a;
}

/* An explicit light request from the host page wins over prefers-color-scheme. */
:root[data-theme="light"] {
  --paper: #ffffff; --paper-fresh: #ffffff; --paper-aged: #ffffff;
  --paper-edge: #d6d6d6; --paper-shadow: rgba(0,0,0,0.28);
  --ink: #1a1a1a; --ink-soft: #4b463d; --ink-faint: #857d6e; --ink-ghost: #b4ab99;
  --canvas: #7f7f7f; --canvas-deep: #6b6b6b;
  --chrome: #d4d0c8; --chrome-face: #ece9de; --chrome-lit: #ffffff;
  --chrome-dim: #808080; --chrome-dark: #404040;
  --field: #ffffff; --comment-fill: #fdf6e3;
}

/* Word 97 heading styles — black Arial, the period-correct look. */
body[data-headings="97"] {
  --word-heading: var(--word-heading-97);
  --word-heading-2: var(--word-heading-97-2);
}