/* ==========================================================================
   KodeshWay — shared design tokens (stock-iOS unification)
   CANONICAL SOURCE. Edit here, then run each site's build/sync_design.sh.
   DO NOT hand-edit the synced copies in <site>/assets/design/.

   Mirrors the iOS app's stock-iOS look (Native-First Liquid Glass):
   system fonts at system sizes, stock system surfaces, NO gold/crimson —
   accent is the stock system blue. Divine speech is set apart by TYPE
   (see divine.css), never colour.

   Dark is the default (both sites are dark). Light values live under
   [data-theme="light"] for future opt-in — sites do NOT auto-switch on
   prefers-color-scheme, matching today's dark-only behaviour.
   ========================================================================== */

:root {
  /* ---- Fonts (system stack — no self-hosted web fonts) -------------------- */
  --kw-font-ui:     -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --kw-font-serif:  ui-serif, "New York", Georgia, "Times New Roman", serif;
  --kw-font-hebrew: "SBL Hebrew", "Cardo", "Times New Roman", serif;
  --kw-font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (px → rem, base 16; mirrors KodeshWayFont) -------------- */
  --kw-fs-page-title:  2.125rem; /* 34 — page title, system serif        */
  --kw-fs-card-large:  1.25rem;  /* 20 — large card title                */
  --kw-fs-card:        1.0625rem;/* 17 — card title                      */
  --kw-fs-body:        0.9375rem;/* 15 — body / row title                */
  --kw-fs-body-2:      0.875rem; /* 14 — secondary body                  */
  --kw-fs-small:       0.8125rem;/* 13 — tertiary / help                 */
  --kw-fs-pill:        0.75rem;  /* 12 — pill / chip                     */
  --kw-fs-cta:         0.6875rem;/* 11 — CTA / button                    */
  --kw-fs-eyebrow:     0.625rem; /* 10 — eyebrow (uppercase + tracking)  */

  --kw-lh-tight: 1.2;
  --kw-lh-body:  1.55;
  --kw-lh-prose: 1.65;

  /* ---- Tracking (kern relative to font size) ----------------------------- */
  --kw-track-eyebrow: 0.18em; /* 1.8pt @ 10pt */
  --kw-track-label:   0.16em; /* 1.5pt @ 9pt  */
  --kw-track-caps:    0.12em;

  /* ---- Spacing (mirrors KodeshWaySpacing) -------------------------------- */
  --kw-space-xxs: 4px;
  --kw-space-xs:  4px;
  --kw-space-sm:  8px;
  --kw-space-md:  12px;
  --kw-space-lg:  16px;
  --kw-space-lg-plus: 20px;
  --kw-space-xl:  24px;
  --kw-space-xxl: 32px;
  --kw-space-xxxl: 48px;
  --kw-page-h:    20px; /* card-to-edge (pageHorizontal) */
  --kw-card-pad:  16px; /* content inside cards (cardInternal) */

  /* ---- Corner radii (mirrors KodeshWayCornerRadius; all continuous-ish) -- */
  --kw-r-xs:   8px;
  --kw-r-sm:   12px;
  --kw-r-md:   14px;
  --kw-r-lg:   18px;
  --kw-r-xl:   20px;
  --kw-r-ios26: 30px; /* floating glass bar / glass cards */
  --kw-r-capsule: 999px; /* true pills/capsules — always fully rounded */
  /* GUARD (IOS26_GLASS_MIGRATION.md §3): the 30px iOS-26 radius only reads
     when radius ≤ 40% of height → element must be ≥76px on BOTH axes, or the
     corner clamps and the shape "breaks" into a lozenge. Anything using
     --kw-r-ios26 must enforce this on min-height AND min-width (see .kw-ios26
     / .kw-card--ios26). Buttons & pills use --kw-r-capsule instead — a fixed
     30px radius on a short control exceeds half-height and breaks at the ends. */
  --kw-r-ios26-min: 76px;

  /* ---- Colour — DARK (default) ------------------------------------------- */
  /* Stock system surfaces (matches app dark) */
  --kw-bg:          #000000; /* page background (systemBackground)        */
  --kw-surface:     #1C1C1E; /* elevated card (secondarySystemBackground) */
  --kw-surface-2:   #2C2C2E; /* tertiary surface                         */
  --kw-grouped-bg:  #000000; /* grouped page background                  */

  /* Text (matches app KodeshWayTextPrimary/Secondary/Tertiary, dark) */
  --kw-label:        #F2F2F2;
  --kw-label-2:      #D9D6D1;
  --kw-label-3:      #BFBDB8;
  --kw-label-on-accent: #FFFFFF;

  /* Accent — royal blue (NO gold) */
  --kw-accent:        #4169E1;
  --kw-accent-hover:  #6A8AEA;

  --kw-separator:    rgba(255, 255, 255, 0.10);
  --kw-fill:         rgba(255, 255, 255, 0.06); /* tertiarySystemFill-ish */

  /* ---- Glass ------------------------------------------------------------- */
  --kw-glass-blur:    blur(28px) saturate(180%);
  --kw-glass-tint:    rgba(28, 28, 30, 0.55); /* page-toned glass over content */
  --kw-glass-border:  rgba(255, 255, 255, 0.12);
  --kw-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.10);
  --kw-glass-solid:   #1C1C1E; /* opaque fallback (no backdrop-filter / reduced transparency) */
  --kw-scrim:         rgba(0, 0, 0, 0.32);

  /* ---- Card elevation shadow (dark) -------------------------------------- */
  --kw-card-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);

  /* ---- Aurora peak alpha (consumed by aurora.js) ------------------------- */
  --kw-aurora-alpha: 0.45;

  /* ---- Motion ------------------------------------------------------------ */
  --kw-dur-quick: 0.2s;
  --kw-dur:       0.3s;
  --kw-dur-slow:  0.5s;
  --kw-ease:      cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Colour — LIGHT (opt-in via [data-theme="light"]) -------------------- */
[data-theme="light"] {
  --kw-bg:         #F2F2F7;
  --kw-surface:    #FFFFFF;
  --kw-surface-2:  #F2F2F7;
  --kw-grouped-bg: #F2F2F7;

  --kw-label:      #1A1A26;
  --kw-label-2:    #333340;
  --kw-label-3:    #4D4D59;

  --kw-accent:       #4169E1;
  --kw-accent-hover: #3454C4;

  --kw-separator:  rgba(0, 0, 0, 0.12);
  --kw-fill:       rgba(0, 0, 0, 0.05);

  --kw-glass-tint:   rgba(255, 255, 255, 0.62);
  --kw-glass-border: rgba(0, 0, 0, 0.08);
  --kw-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --kw-glass-solid:  #FFFFFF;

  --kw-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}