/*
 * brand/tokens.css — Skerply brand v1.0.
 *
 * Palette, typography, and voice anchored to the wordmark + cloud
 * mark in brand/logo.svg. Token surface contract documented in
 * brand/README.md. Adding tokens is non-breaking; renaming or
 * removing tokens is breaking.
 *
 * Brand colours (from the approved palette card):
 *   #214B67  navy        — primary, wordmark fill, body text
 *   #F5CD1B  yellow      — cloud mark, signal / "savings" highlight
 *   #93A9CA  mid-blue    — secondary, muted UI
 *   #BBC4DB  pale slate  — soft surfaces, accent-soft
 *   #D8DFE6  light grey  — inset surface
 *   #FFFFFF  white       — page background
 */

:root {
  /* --- Palette -------------------------------------------------------- */
  --color-bg:           #FFFFFF;
  --color-bg-elevated:  #F7F9FC;
  --color-bg-inset:     #D8DFE6;

  --color-fg:           #214B67;
  --color-fg-muted:     #4D6B85;
  --color-fg-subtle:    #93A9CA;

  --color-accent:       #214B67;
  --color-accent-fg:    #FFFFFF;
  --color-accent-soft:  #BBC4DB;

  /* Yellow is the brand "signal" colour — reserved for the cloud
   * mark, focus rings, and savings/win highlights. Never use as a
   * background for body text (contrast against navy is fine; against
   * white it falls below WCAG AA at body sizes). */
  --color-highlight:    #F5CD1B;
  --color-highlight-fg: #214B67;

  --color-success:      #1F7A4D;
  --color-warning:      #B45309;
  --color-danger:       #B91C1C;
  --color-info:         #214B67;

  --color-border:        #BBC4DB;
  --color-border-strong: #93A9CA;

  --color-focus-ring:   #F5CD1B;

  /* --- Type ----------------------------------------------------------- */
  /* Display: Space Grotesk — geometric, slightly quirky, pairs with the
   * chunky wordmark without competing with it. Body: Inter — neutral,
   * trustworthy, excellent at small sizes for KPIs and tables. Both
   * licensed under the SIL Open Font License and served from the web
   * project's self-hosted font pipeline (no third-party CDN). */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", "Consolas", monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.25rem;   /* 20 */
  --text-2xl:  1.5rem;    /* 24 */
  --text-3xl:  1.875rem;  /* 30 */
  --text-4xl:  2.25rem;   /* 36 */
  --text-5xl:  3rem;      /* 48 */
  --text-6xl:  3.75rem;   /* 60 */
  --text-7xl:  4.5rem;    /* 72 */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* --- Spacing -------------------------------------------------------- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  3rem;     /* 48 */
  --space-8:  4rem;     /* 64 */
  --space-9:  6rem;     /* 96 */
  --space-10: 8rem;     /* 128 */
  --space-11: 12rem;    /* 192 */

  /* --- Motion (see docs/design/motion-language.md) -------------------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-entrance: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-60:  60ms;
  --duration-120: 120ms;
  --duration-220: 220ms;
  --duration-360: 360ms;
  --duration-600: 600ms;

  /* --- Radius / elevation -------------------------------------------- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  --shadow-low:    0 1px 2px rgba(33, 75, 103, 0.08);
  --shadow-medium: 0 4px 12px rgba(33, 75, 103, 0.10), 0 1px 2px rgba(33, 75, 103, 0.05);
  --shadow-high:   0 16px 40px rgba(33, 75, 103, 0.14), 0 2px 6px rgba(33, 75, 103, 0.07);
}

/* Dark mode — opt-in via [data-theme="dark"] on <html>.
 * Inverts to a navy field with white text and the yellow signal
 * colour promoted to accent. Same token surface, different values. */
[data-theme="dark"] {
  --color-bg:           #1A3B52;     /* navy, ~10% darker than brand */
  --color-bg-elevated:  #214B67;     /* brand navy */
  --color-bg-inset:     #2C5C7A;

  --color-fg:           #FFFFFF;
  --color-fg-muted:     #BBC4DB;
  --color-fg-subtle:    #93A9CA;

  --color-accent:       #F5CD1B;
  --color-accent-fg:    #214B67;
  --color-accent-soft:  #2C5C7A;

  --color-highlight:    #F5CD1B;
  --color-highlight-fg: #214B67;

  --color-border:        #2C5C7A;
  --color-border-strong: #93A9CA;

  --shadow-low:    0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-high:   0 16px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Respect user motion preference — collapses every documented duration
 * to 0 except the 120 ms cross-fade fallback. Components MUST NOT
 * override these to longer values in reduced-motion mode. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-60:  0ms;
    --duration-220: 120ms;
    --duration-360: 120ms;
    --duration-600: 120ms;
    /* --duration-120 retained at 120 ms for the cross-fade fallback. */
  }
}