/*
 * RopeBreak design tokens — the single source of truth (docs/brand/).
 * Served in place via STATICFILES_DIRS; there are no copies and no
 * sync step. Any consumer (Django templates, the pattern-library
 * showcase, a future SPA) reads this file at design/tokens.css.
 *
 * Two layers:
 *   --rb-*    raw palette (private; do not reference in components)
 *   --color-*, --font-*, --space-*, ... semantic tokens (public)
 * Components only reference the semantic layer.
 */

:root {
  /* Palette — raw values */
  --rb-navy-50: #e8edf6;
  --rb-navy-100: #c8d2e6;
  --rb-navy-300: #5a73a8;
  --rb-navy-500: #1e3a6e;
  --rb-navy-700: #122553;
  --rb-navy-900: #0a1b3d;

  --rb-gold-300: #e6c769;
  --rb-gold-500: #d4af37;
  --rb-gold-700: #b8941f;

  --rb-cream-50: #faf3df;
  --rb-cream-100: #f4ecd8;
  --rb-cream-300: #d9cdb0;

  --rb-red-600: #b3261e;
  --rb-green-600: #2e7d32;

  /* Semantic — light defaults */
  --color-bg: var(--rb-cream-100);
  --color-bg-elevated: var(--rb-cream-50);
  --color-fg: var(--rb-navy-900);
  --color-fg-muted: var(--rb-navy-300);
  --color-accent: var(--rb-gold-700);
  --color-accent-fg: var(--rb-navy-900);
  --color-link: var(--rb-navy-700);
  --color-link-hover: var(--rb-gold-700);
  --color-border: var(--rb-cream-300);
  --color-danger: var(--rb-red-600);
  --color-success: var(--rb-green-600);

  /* Typography */
  --font-sans:
    ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Big Shoulders Display", var(--font-sans);
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
    monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 3rem;

  /* Fluid type scale — clamp(min, preferred, max), mobile-first. Each step
   * grows smoothly from a 360px phone to a desktop with no breakpoint jumps
   * (ADR-0023 / frontend PRD: intrinsic-first). Components reference these
   * semantic names; the static --font-size-* steps remain for fixed contexts.
   * min = comfortable at 360px, max = the matching static step, vw term
   * carries the growth between. */
  --font-fluid-sm: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
  --font-fluid-md: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --font-fluid-lg: clamp(1.125rem, 1.02rem + 0.55vw, 1.5rem);
  --font-fluid-xl: clamp(1.5rem, 1.26rem + 1.2vw, 2rem);
  --font-fluid-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --font-fluid-marquee: clamp(2rem, 1.1rem + 4.6vw, 3rem);

  --line-height-tight: 1.15;
  --line-height-normal: 1.5;
  --line-height-loose: 1.75;

  /* Spacing — 4px base */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Fluid spacing scale — clamp-based rhythm that flexes between phone and
   * desktop with no breakpoint jumps. Used for page-level rhythm (section
   * gaps, marquee margins); the static --space-* steps stay for fixed gaps
   * (icon gaps, table padding) where flexing would be noise. min holds at
   * 360px, max matches the corresponding static step. */
  --space-fluid-sm: clamp(0.5rem, 0.45rem + 0.25vw, 0.75rem);
  --space-fluid-md: clamp(0.75rem, 0.6rem + 0.7vw, 1.5rem);
  --space-fluid-lg: clamp(1.5rem, 1.2rem + 1.4vw, 3rem);
  --space-fluid-xl: clamp(2rem, 1.4rem + 2.8vw, 4rem);

  /* Radius */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(10, 27, 61, 0.08);
  --shadow-md: 0 4px 12px rgba(10, 27, 61, 0.16);

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);

  /* Z-index */
  --z-base: 0;
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--rb-navy-900);
    --color-bg-elevated: var(--rb-navy-700);
    --color-fg: var(--rb-cream-100);
    --color-fg-muted: var(--rb-navy-100);
    --color-accent: var(--rb-gold-500);
    --color-accent-fg: var(--rb-navy-900);
    --color-link: var(--rb-gold-300);
    --color-link-hover: var(--rb-gold-500);
    --color-border: var(--rb-navy-500);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
}

/*
 * Reduced-motion kill switch (frontend PRD motion policy). All motion routes
 * through the duration tokens, so zeroing them here collapses every animation
 * and transition — present and future — to instant under the OS preference.
 * One structural rule, not per-animation diligence. View-transition polish
 * (ADR-0023) reads these tokens too, so it degrades to an instant cut.
 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}