/* WKISME07 brand tokens (wkisme skill).
   Values mirror references/tokens.json; spec values come from docs/brand-spec.md.
   Usage: put <html data-wk-theme="gulf"> (default) or "nusantara".
   Dark mode follows the OS; force it with data-theme="dark" or "light" on <html>.

   Fonts — paste ONE of these into <head> (before this file):
   gulf:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Reem+Kufi:wght@700&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
   nusantara:
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Young+Serif&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap">
*/

/* ---------- gulf (Desert Gold) · default · light ---------- */
:root,
:root[data-wk-theme="gulf"] {
  --wk-bg: #FDFBF7;          /* Pearl */
  --wk-surface: #FFFFFF;
  --wk-tint: #F6EFE2;
  --wk-sand: #F1E8D6;
  --wk-line: #ECE4D4;
  --wk-ink: #1E1B16;         /* brand ink: headings, header fills, logo */
  --wk-text: #1E1B16;        /* body text */
  --wk-muted: #6B6152;
  --wk-on-ink: #FDFBF7;      /* text on an ink fill */
  --wk-accent: #D99A1E;      /* Bright. Fills, rules, text >= 24px only */
  --wk-accent-text: #7E5A12; /* Deep Gold: links, small accent text */
  --wk-secondary: #0B6B4E;
  --wk-tertiary: #155E6E;
  --wk-negative: #A8322D;
  --wk-chart-1: #D99A1E; --wk-chart-2: #0B6B4E; --wk-chart-3: #155E6E;
  --wk-chart-4: #A8322D; --wk-chart-5: #8C7B5E; --wk-chart-6: #D9C49A;

  --wk-font-display: 'Reem Kufi', 'Century Gothic', Arial, sans-serif;
  --wk-display-weight: 700;
  --wk-display-word-spacing: .12em; /* Reem Kufi's space is 0.13 em; this brings word gaps to ~0.25 em */
  --wk-font-body: 'IBM Plex Sans', Arial, sans-serif;
  --wk-font-mono: 'IBM Plex Mono', Menlo, Consolas, monospace;

  /* shared: type scale (web px), spacing, radius */
  --wk-fs-display: 48px; --wk-lh-display: 1.10;
  --wk-fs-h1: 32px;      --wk-lh-h1: 1.15;
  --wk-fs-h2: 22px;      --wk-lh-h2: 1.25;
  --wk-fs-body: 16px;    --wk-lh-body: 1.55;
  --wk-fs-caption: 12px; --wk-lh-caption: 1.30;
  --wk-fs-data: 14px;    --wk-lh-data: 1.40;
  --wk-space-1: 4px; --wk-space-2: 8px; --wk-space-3: 16px; --wk-space-4: 24px;
  --wk-space-5: 32px; --wk-space-6: 48px; --wk-space-7: 64px;
  --wk-radius: 8px; --wk-radius-doc: 4px;
  --wk-measure: 65ch;
  color-scheme: light;
}

/* ---------- nusantara (Nusantara Indigo) · light ---------- */
:root[data-wk-theme="nusantara"] {
  --wk-bg: #FFFFFF;          /* White */
  --wk-surface: #F7F8FB;
  --wk-tint: #EEF0F7;
  --wk-sand: #EEF0F7;
  --wk-line: #E2E4EC;
  --wk-ink: #25336B;         /* Batik Indigo */
  --wk-text: #1B1C2A;
  --wk-muted: #62647A;
  --wk-on-ink: #FFFFFF;
  --wk-accent: #E09A10;      /* Turmeric, Bright. Fills only */
  --wk-accent-text: #25336B;
  --wk-secondary: #7A4A26;   /* Sogan */
  --wk-tertiary: #3F6E45;    /* Daun */
  --wk-negative: #B42318;
  --wk-chart-1: #25336B; --wk-chart-2: #E09A10; --wk-chart-3: #7A4A26;
  --wk-chart-4: #3F6E45; --wk-chart-5: #8E97C4; --wk-chart-6: #D9B98F;

  --wk-font-display: 'Young Serif', Georgia, serif;
  --wk-display-weight: 400;
  --wk-display-word-spacing: normal; /* Young Serif's space is already 0.25 em */
  --wk-font-body: 'Plus Jakarta Sans', Arial, sans-serif;
  --wk-font-mono: 'JetBrains Mono', Menlo, Consolas, monospace;
}

/* ---------- dark mode: OS preference unless forced light ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root[data-wk-theme="gulf"]:not([data-theme="light"]) {
    --wk-bg: #14120F; --wk-surface: #1E1B17; --wk-tint: #1E1B17; --wk-sand: #1E1B17; --wk-line: #332E26;
    --wk-ink: #EDB547; --wk-text: #FDFBF7; --wk-muted: #B3A893; --wk-on-ink: #14120F;
    --wk-accent: #45C79A; --wk-accent-text: #EDB547;
    --wk-secondary: #4FB38E; --wk-tertiary: #6CB8C8; --wk-negative: #E0766F;
    --wk-chart-1: #EDB547; --wk-chart-2: #45C79A; --wk-chart-3: #6CB8C8;
    --wk-chart-4: #E0766F; --wk-chart-5: #B3A893; --wk-chart-6: #8C7B5E;
    color-scheme: dark;
  }
  :root[data-wk-theme="nusantara"]:not([data-theme="light"]) {
    --wk-bg: #12131E; --wk-surface: #1B1D2C; --wk-tint: #1B1D2C; --wk-sand: #1B1D2C; --wk-line: #2D3045;
    --wk-ink: #9AA8E0; --wk-text: #FFFFFF; --wk-muted: #A9A6B8; --wk-on-ink: #12131E;
    --wk-accent: #F2B53A; --wk-accent-text: #9AA8E0;
    --wk-secondary: #D19A6E; --wk-tertiary: #86B98B; --wk-negative: #E0766F;
    --wk-chart-1: #9AA8E0; --wk-chart-2: #F2B53A; --wk-chart-3: #D19A6E;
    --wk-chart-4: #86B98B; --wk-chart-5: #A9A6B8; --wk-chart-6: #8E97C4;
    color-scheme: dark;
  }
}

/* ---------- dark mode: forced ---------- */
:root[data-theme="dark"],
:root[data-wk-theme="gulf"][data-theme="dark"] {
  --wk-bg: #14120F; --wk-surface: #1E1B17; --wk-tint: #1E1B17; --wk-sand: #1E1B17; --wk-line: #332E26;
  --wk-ink: #EDB547; --wk-text: #FDFBF7; --wk-muted: #B3A893; --wk-on-ink: #14120F;
  --wk-accent: #45C79A; --wk-accent-text: #EDB547;
  --wk-secondary: #4FB38E; --wk-tertiary: #6CB8C8; --wk-negative: #E0766F;
  --wk-chart-1: #EDB547; --wk-chart-2: #45C79A; --wk-chart-3: #6CB8C8;
  --wk-chart-4: #E0766F; --wk-chart-5: #B3A893; --wk-chart-6: #8C7B5E;
  color-scheme: dark;
}
:root[data-wk-theme="nusantara"][data-theme="dark"] {
  --wk-bg: #12131E; --wk-surface: #1B1D2C; --wk-tint: #1B1D2C; --wk-sand: #1B1D2C; --wk-line: #2D3045;
  --wk-ink: #9AA8E0; --wk-text: #FFFFFF; --wk-muted: #A9A6B8; --wk-on-ink: #12131E;
  --wk-accent: #F2B53A; --wk-accent-text: #9AA8E0;
  --wk-secondary: #D19A6E; --wk-tertiary: #86B98B; --wk-negative: #E0766F;
  --wk-chart-1: #9AA8E0; --wk-chart-2: #F2B53A; --wk-chart-3: #D19A6E;
  --wk-chart-4: #86B98B; --wk-chart-5: #A9A6B8; --wk-chart-6: #8E97C4;
  color-scheme: dark;
}

/* ---------- base styles ---------- */
html { background: var(--wk-bg); }
body {
  margin: 0;
  background: var(--wk-bg);
  color: var(--wk-text);
  font: 400 var(--wk-fs-body)/var(--wk-lh-body) var(--wk-font-body);
  font-variant-numeric: lining-nums;
  padding-inline: max(16px, env(safe-area-inset-left, 0px));
}
h1, h2, .wk-display {
  font-family: var(--wk-font-display);
  font-weight: var(--wk-display-weight);
  word-spacing: var(--wk-display-word-spacing);
  font-variant-numeric: lining-nums;
  font-feature-settings: 'lnum' 1;
  color: var(--wk-ink);
  text-wrap: balance;
  margin: 0;
}
.wk-display { font-size: var(--wk-fs-display); line-height: var(--wk-lh-display); }
h1 { font-size: var(--wk-fs-h1); line-height: var(--wk-lh-h1); }
h2 { font-family: var(--wk-font-body); font-weight: 600; word-spacing: normal; font-size: var(--wk-fs-h2); line-height: var(--wk-lh-h2); }
p, li { max-width: var(--wk-measure); }
a { color: var(--wk-accent-text); }
code, pre, kbd, .wk-data { font-family: var(--wk-font-mono); font-size: var(--wk-fs-data); line-height: var(--wk-lh-data); font-variant-numeric: tabular-nums; }
.wk-caption { font: 500 var(--wk-fs-caption)/var(--wk-lh-caption) var(--wk-font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--wk-muted); }
.wk-card { background: var(--wk-surface); border: 1px solid var(--wk-line); border-radius: var(--wk-radius); padding: var(--wk-space-4); }
.wk-rule { height: 3px; width: 56px; background: var(--wk-accent); border: 0; margin: var(--wk-space-3) 0; }
.wk-num { font-family: var(--wk-font-mono); font-variant-numeric: tabular-nums; text-align: right; }
.wk-neg { color: var(--wk-negative); }
:focus-visible { outline: 2px solid var(--wk-accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }