/* Inkyscib design tokens — the single vocabulary.
 *
 * Source of truth: DESIGN.md. Load this FIRST, before every other stylesheet,
 * on every page. Marketing and the editor both read from here so the two
 * halves of the product cannot drift apart again.
 *
 * Rules:
 *   - Do not declare a `--yourfeature-*` palette. Add to this file instead.
 *   - Do not scope tokens to a breakpoint or a body class. `--chrome-*` used
 *     to live on `body.chrome-rail`, which only exists at >=1180px, so a panel
 *     built against it rendered with no background at all on a tablet.
 *   - Every colour below is measured for contrast; see the table in DESIGN.md.
 *
 * Palette: the deployed Inkyscib identity (inkyscib.salajtech.com), sampled
 * from the running editor rather than guessed - #06090F canvas, #0C0E13 bar,
 * #5A5AFF accent. These are near-black grounds on purpose; a lighter navy
 * washes the whole editor out.
 *
 * The accent is #5A5AFF exactly, as deployed. In the editor it is only ever a
 * fill, a border or an icon, and 4.12 : 1 on the canvas clears the 3 : 1 that
 * non-text contrast asks for. Where it does carry text - the marketing pages -
 * that ground is light, where it reaches 4.51 : 1. White on the accent fill is
 * 4.84 : 1. So one value covers every role it actually has.
 */

:root {
  /* --- surfaces --- */
  --paper:   #F5F7FB;
  --surface: #FFFFFF;
  --raised:  #E8EDF5;

  /* --- ink --- */
  --ink:     #0F172A;   /* 16.65 : 1  AAA */
  --ink-2:   #4A5568;   /*  7.02 : 1  AAA */
  --ink-3:   #7A8699;   /*  3.44 : 1  AA-large, non-load-bearing only */

  /* --- lines --- */
  --rule:    #DCE3ED;
  --rule-2:  #EDF1F7;

  /* --- the one accent: the tool in your hand, and primary actions --- */
  --accent:      #5A5AFF;  /* 4.51 : 1  AA as text (4.84 : 1 on --surface) */
  --accent-wash: #ECECFD;
  --on-accent:   #FFFFFF;  /* 6.05 : 1  AA on the accent fill */

  /* --- the only other saturated things --- */
  --error: #C02A22;        /* 5.45 : 1  AA */
  --ok:    #15803D;        /* 4.68 : 1  AA */

  /* --- the support link, and nothing else ---
     Inkyscib takes no money and shows no ads, so the one "buy me a coffee"
     link is the single place it asks for anything. It is warm on purpose:
     with the rest of the palette gone cool, warmth is what sets it apart
     without borrowing the accent, which means "the tool in your hand". */
  --support:      #8F5A08;  /* 5.78 : 1  AA  (5.25 : 1 on its own wash) */
  --support-wash: #FDF3E2;
  /* There is no warning colour. Nothing here has a form to validate, and
     amber would fight the accent for the same meaning. */

  /* --- the user's ink. Content, not chrome, and exempt from the 13. --- */
  --draw:       #2F6FD0;
  --draw-point: #B3261E;

  /* --- 4px module. Nothing off this scale. --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* --- radius. Hierarchical, never uniform. --- */
  --r-sm: 3px;    /* controls, chips, swatches */
  --r-md: 6px;    /* panels, cards, islands */
  --r-lg: 10px;   /* sheets, modals, the canvas frame */
  --r-pill: 999px;
  --r-circle: 50%;

  /* --- type --- */
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Consolas", monospace;

  --t-1: 0.75rem;   --t-2: 0.8125rem; --t-3: 0.9375rem; --t-4: 1.0625rem;
  --t-5: 1.375rem;  --t-6: 1.875rem;  --t-7: 2.75rem;

  /* --- motion. Instruments do not bounce. --- */
  --fast: 140ms;
  --slow: 180ms;

  /* --- the smallest thing a finger can reliably hit --- */
  --tap: 44px;

  /* --- overlay washes ---
     Translucent fills that sit ON something rather than replacing it: hover
     tints, hairlines, inset wells. write.css alone held 258 white-alpha and
     167 dark-alpha declarations spread across 65 and 61 distinct alpha values.
     Nobody can see the difference between 5.5% and 6%; that ladder is drift,
     not decision. Five rungs per direction is more than enough.
     These deliberately do NOT flip with the theme: a rule that says
     "lighten what is under me" must keep meaning that. --raised and --rule
     are the theme-aware pair for solid surfaces. */
  --w-1: rgba(255, 255, 255, 0.04);
  --w-2: rgba(255, 255, 255, 0.07);
  --w-3: rgba(255, 255, 255, 0.10);
  --w-4: rgba(255, 255, 255, 0.14);
  --w-5: rgba(255, 255, 255, 0.22);

  --d-1: rgba(15, 23, 42, 0.05);
  --d-2: rgba(15, 23, 42, 0.08);
  --d-3: rgba(15, 23, 42, 0.12);
  --d-4: rgba(15, 23, 42, 0.18);
  --d-5: rgba(15, 23, 42, 0.30);

  /* --- page shell --- */
  --shell: 74rem;                        /* max width of a marketing page */
  --pad: clamp(16px, 4vw, 48px);         /* its gutter */
  --measure: 62ch;                       /* max width of running prose */
}

/* Three theme states, not two. An explicit choice stamps data-theme; the
   default "no choice yet" case follows the operating system. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #06090F;   /* sampled from the deployed canvas */
    --surface: #0C0F16;   /* sampled from the deployed top bar */
    --raised:  #161A24;
    --ink:     #F8FAFC;   /* 19.05 : 1  AAA */
    --ink-2:   #AEB7C9;   /*  9.89 : 1  AAA */
    --ink-3:   #71809B;   /*  4.99 : 1  AA */
    --rule:    #1E2430;
    --rule-2:  #141922;
    --accent:      #5A5AFF;  /* 4.12 : 1 as icon/fill, over the 3 : 1 floor */
    --accent-wash: #15153A;
    --on-accent:   #FFFFFF;  /* 4.84 : 1  AA on the accent fill */
    --error: #F8877F;        /*  8.21 : 1  AAA */
    --ok:    #5BE49B;        /* 12.20 : 1  AAA */
    --support:      #FFD36A; /* 12.48 : 1  AAA (11.15 : 1 on its own wash) */
    --support-wash: #2A2113;
    --draw:       #7BA9F7;   /*  8.30 : 1  AAA */
    --draw-point: #F8877F;
  }
}

[data-theme="dark"] {
  --paper:   #06090F;   /* sampled from the deployed canvas */
  --surface: #0C0F16;   /* sampled from the deployed top bar */
  --raised:  #161A24;
  --ink:     #F8FAFC;   /* 19.05 : 1  AAA */
  --ink-2:   #AEB7C9;   /*  9.89 : 1  AAA */
  --ink-3:   #71809B;   /*  4.99 : 1  AA */
  --rule:    #1E2430;
  --rule-2:  #141922;
  --accent:      #5A5AFF;  /* 4.12 : 1 as icon/fill, over the 3 : 1 floor */
  --accent-wash: #15153A;
  --on-accent:   #FFFFFF;  /* 4.84 : 1  AA on the accent fill */
  --error: #F8877F;        /*  8.21 : 1  AAA */
  --ok:    #5BE49B;        /* 12.20 : 1  AAA */
  --support:      #FFD36A; /* 12.48 : 1  AAA (11.15 : 1 on its own wash) */
  --support-wash: #2A2113;
  --draw:       #7BA9F7;   /*  8.30 : 1  AAA */
  --draw-point: #F8877F;
}

/* The cascade root had no font, so anything outside body's subtree fell back
   to the browser default serif. */
html {
  font-family: var(--sans);
}

/* Inky's writing desk. Content presets and pen colours remain independent. */
html.inky-editor[data-theme="dark"] {
  --paper: #0B0C10; --surface: #121319; --raised: #1C1E27;
  --ink: #EEEFF6; --ink-2: #ADB0C2; --ink-3: #83889F;
  --rule: #2B2E3C; --rule-2: #20232E;
  --accent: #AAA3FF; --accent-wash: #27233E;
  --on-accent: #171321;
}
html.inky-editor[data-theme="light"] {
  --paper: #F2F1ED; --surface: #FCFCFA; --raised: #EEEDEA;
  --ink: #242331; --ink-2: #626172; --ink-3: #79788B;
  --rule: #DCDAD6; --rule-2: #E9E7E3;
  --accent: #6153C5; --accent-wash: #EEEAFB;
  --on-accent: #FFFFFF;
}