/* =====================================================================
   Wakilii design tokens — THE single source of truth.
   ---------------------------------------------------------------------
   Every Wakilii surface (the Tailwind app shell in base.html, the custom
   public pages in public_base.html, and the React SPA in App.css) draws
   its colour, type, spacing, radius and elevation from the custom
   properties below. Change a brand value HERE and it propagates.

   Naming: the canonical names are prefixed --wk-*. Each colour that is
   ever used with an alpha/opacity modifier also exposes an RGB-triplet
   companion (--wk-foo-rgb: "R G B") so consumers can write
   rgb(var(--wk-foo-rgb) / <alpha>) without hard-coding the colour.

   Palette is the COOL Wakilii system (navy / gold on a cool canvas).
   The legacy warm sand tones (warm hairlines, surfaces and cream) and
   the stray royal-blue link are retired in favour of the values below
   — see DECISIONS for the rationale.
   ===================================================================== */

:root {
  /* ---- Brand marks (favicon + avatar; brand rule, do not drift) ---- */
  --wk-brand-navy:      #1B2A4E;  --wk-brand-navy-rgb: 27 42 78;
  --wk-brand-gold:      #D4A95C;  --wk-brand-gold-rgb: 212 169 92;

  /* ---- Ink / text ramp (cool navy → greys) ------------------------ */
  --wk-ink-950: #060d1a;  --wk-ink-950-rgb: 6 13 26;
  --wk-ink-900: #0b1524;  --wk-ink-900-rgb: 11 21 36;
  --wk-ink-800: #15233b;  --wk-ink-800-rgb: 21 35 59;
  --wk-ink-700: #22344f;  --wk-ink-700-rgb: 34 52 79;
  --wk-ink-600: #38496a;  --wk-ink-600-rgb: 56 73 106;
  --wk-ink-500: #566581;  --wk-ink-500-rgb: 86 101 129;
  --wk-ink-400: #7a899f;  --wk-ink-400-rgb: 122 137 159;
  --wk-ink-300: #9aa7bb;  --wk-ink-300-rgb: 154 167 187;
  --wk-ink-200: #cbd3df;  --wk-ink-200-rgb: 203 211 223;
  --wk-ink-100: #e6eaf0;  --wk-ink-100-rgb: 230 234 240;
  --wk-ink-050: #f0f3f7;  --wk-ink-050-rgb: 240 243 247;

  /* ---- Surfaces --------------------------------------------------- */
  --wk-canvas: #f3f6fc;  --wk-canvas-rgb: 243 246 252;  /* the page background */
  --wk-card:   #ffffff;  --wk-card-rgb:   255 255 255;  /* cards on the canvas */
  --wk-soft:   #eef2f8;  --wk-soft-rgb:   238 242 248;  /* soft fills, hovers  */
  --wk-ivory:  #edf2f9;  --wk-ivory-rgb:  237 242 249;  /* alternate soft tint */

  /* ---- Hairlines & borders (cool — retire the warm #E5DECE) ------- */
  --wk-line:        #dfe4ee;  --wk-line-rgb:        223 228 238;  /* default hairline */
  --wk-line-strong: #cbd3df;  --wk-line-strong-rgb: 203 211 223;  /* dividers, emphasis */

  /* ---- Gold accents ---------------------------------------------- */
  /* Deep gold is the only gold that passes contrast on a light surface,
     so it (not the lighter brand mark) is the text/icon highlight.     */
  --wk-gold:      #9C7A2E;  --wk-gold-rgb: 156 122 46;
  --wk-gold-mark: #D4A95C;  /* == brand mark; large fills only, never text */
  --wk-gold-soft: #FBF3E1;  --wk-gold-soft-rgb: 251 243 225;  /* pale gold callout */

  /* ---- Accent semantics (links, primary actions) ----------------- */
  --wk-accent:      var(--wk-brand-navy);  --wk-accent-rgb: 27 42 78;
  --wk-accent-soft: #e8ecf4;               --wk-accent-soft-rgb: 232 236 244;
  --wk-link:        var(--wk-brand-navy);

  /* ---- Text semantics -------------------------------------------- */
  --wk-text:        var(--wk-ink-900);  /* primary body / headings */
  --wk-text-muted:  var(--wk-ink-500);  /* secondary / meta        */
  --wk-text-hint:   var(--wk-ink-400);  /* placeholders / hints    */
  --wk-text-invert: #ffffff;

  /* ---- Button semantics (theme-aware; see dark block) ------------- */
  --wk-btn-bg:  var(--wk-brand-navy);
  --wk-btn-ink: #ffffff;

  /* ---- Accent status hues (kept; not part of warm/cool issue) ----- */
  --wk-forest:      #2F4F3A;  --wk-forest-rgb: 47 79 58;
  --wk-forest-soft: #E8EFE8;  --wk-forest-soft-rgb: 232 239 232;

  /* ---- Icon tile — soft info-blue chips (category + quick-access
         tiles on Knowledge and the dashboard). A cool, on-palette accent,
         deliberately bluer than the navy brand mark; tokenised here so the
         tile treatment is shared, not redefined per page. ----------------- */
  --wk-tile-bg:  #e9f0fb;  --wk-tile-bg-rgb:  233 240 251;
  --wk-tile-ink: #33568f;  --wk-tile-ink-rgb: 51 86 143;

  /* ---- Danger / destructive (sign out, delete) -------------------- */
  --wk-danger:      #c0392b;  --wk-danger-rgb: 192 57 43;
  --wk-danger-soft: #fdf2f0;
  --wk-danger-line: #eccac5;

  /* ---- Type ------------------------------------------------------- */
  --wk-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --wk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --wk-text-xs:   0.8125rem;   /* 13 */
  --wk-text-sm:   0.875rem;    /* 14 */
  --wk-text-base: 1rem;        /* 16 */
  --wk-text-md:   1.0625rem;   /* 17 — reading body */
  --wk-text-lg:   1.3125rem;   /* 21 */
  --wk-text-xl:   1.5rem;      /* 24 */
  --wk-text-2xl:  2rem;        /* 32 — page h1 */
  --wk-text-3xl:  2.5rem;      /* 40 — display */
  --wk-leading-tight: 1.2;
  --wk-leading-snug:  1.4;
  --wk-leading-body:  1.6;
  --wk-leading-prose: 1.65;
  --wk-tracking-display: -0.022em;
  --wk-tracking-tight:   -0.011em;

  /* ---- Spacing scale (4px base) ---------------------------------- */
  --wk-space-1: 4px;   --wk-space-2: 8px;   --wk-space-3: 12px;
  --wk-space-4: 16px;  --wk-space-5: 20px;  --wk-space-6: 24px;
  --wk-space-7: 28px;  --wk-space-8: 32px;  --wk-space-10: 40px;
  --wk-space-12: 48px; --wk-space-16: 64px;

  /* ---- Radius ----------------------------------------------------- */
  --wk-radius-sm:   8px;
  --wk-radius-md:   12px;
  --wk-radius-lg:   16px;
  --wk-radius-pill: 999px;

  /* ---- Elevation (cool ink shadows) ------------------------------ */
  --wk-shadow-card:  0 1px 2px rgba(11,21,36,0.04), 0 1px 1px rgba(11,21,36,0.03);
  --wk-shadow-lift:  0 4px 16px -2px rgba(11,21,36,0.08), 0 1px 2px rgba(11,21,36,0.04);
  --wk-shadow-pop:   0 20px 48px -18px rgba(11,21,36,0.30), 0 4px 10px rgba(11,21,36,0.06);
  --wk-shadow-inset: inset 0 0 0 1px rgba(11,21,36,0.06);

  /* ---- Layout ----------------------------------------------------- */
  --wk-reading: 68ch;
}

/* =====================================================================
   Dark theme — only public_base.html opts in (html[data-theme="dark"]).
   Overriding the semantic vars here means every alias that resolves to
   them flips automatically; consumers need no dark-specific rules.
   ===================================================================== */
html[data-theme="dark"] {
  --wk-canvas: #0d1220;  --wk-canvas-rgb: 13 18 32;
  --wk-card:   #151b2c;  --wk-card-rgb:   21 27 44;
  --wk-soft:   #1e2640;  --wk-soft-rgb:   30 38 64;
  --wk-ivory:  #16203a;

  --wk-line:        #2a3149;  --wk-line-rgb:        42 49 73;
  --wk-line-strong: #38416a;  --wk-line-strong-rgb: 56 65 106;

  --wk-text:        #e8ebf5;
  --wk-text-muted:  #9aa3bd;
  --wk-text-hint:   #7e88a6;
  --wk-text-invert: #0d1220;

  /* Links lift to a legible pale navy on the dark canvas. */
  --wk-accent:      #8caaff;  --wk-accent-rgb: 140 170 255;
  --wk-accent-soft: #1b2746;
  --wk-link:        #8caaff;

  /* Button inverts: light pill, dark ink. */
  --wk-btn-bg:  #e8ebf5;
  --wk-btn-ink: #0d1220;

  --wk-ink-700: #aeb9dd;  /* soft-ink alias target stays legible */

  --wk-tile-bg:  #1c2a4d;  --wk-tile-bg-rgb:  28 42 77;
  --wk-tile-ink: #8caaff;  --wk-tile-ink-rgb: 140 170 255;

  --wk-danger:      #e8857a;
  --wk-danger-soft: #2a1715;
  --wk-danger-line: #5c3330;
}