/* ============================================================
   RhinoBag Design System: Token Layer (canonical value source)
   Mirrors docs/design-system/tokens.css (the in-repo canonical spec).

   This is the VALUE layer: it defines the --rb-* custom properties
   (light + dark). The Tailwind @theme config (assets/tailwind.css)
   maps semantic utility names to these variables, so brand colors
   stay fixed and only neutrals invert in dark mode automatically,
   without needing dark: variants on every element.
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --rb-navy:        #131A45;
  --rb-navy-band:   #131A45;
  --rb-navy-deep:   #0E1334;
  --rb-on-navy:     #EDEFF8;
  --rb-on-navy-dim: #A7AECB;

  --rb-red:         #BA3B46;
  --rb-red-hover:   #A2323C;
  --rb-red-soft:    rgba(186, 59, 70, 0.10);
  --rb-red-on-navy: #F2B6BC;

  /* ---- Neutrals (light, default) ---- */
  --rb-bg:        #FFFFFF;
  --rb-surface:   #F5F6FA;
  --rb-surface-2: #ECEEF5;
  --rb-card:      #FFFFFF;
  --rb-ink:       #14181C;
  --rb-text:      #3A4250;
  --rb-muted:     #5C6470;
  --rb-line:      #E1E4EE;

  /* ---- Radius ---- */
  --rb-r-sm:  8px;
  --rb-r:     14px;
  --rb-r-lg:  22px;
  --rb-pill:  999px;

  /* ---- Layout & rhythm ---- */
  --rb-maxw: 1200px;
  --rb-gutter:  clamp(1.25rem, 4vw, 3rem);
  --rb-section: clamp(4.5rem, 9vw, 8rem);

  /* ---- Type ---- */
  --rb-font-display: "Archivo", system-ui, -apple-system, sans-serif;
  --rb-font-body:    "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --rb-h1:     clamp(2.6rem, 6vw, 4.5rem);
  --rb-h2:     clamp(1.9rem, 3.8vw, 2.7rem);
  --rb-h3:     1.3rem;
  --rb-lead:   1.2rem;
  --rb-body:   1.0625rem;
  --rb-small:  0.95rem;
  --rb-eyebrow: 0.8rem;

  /* ---- Elevation ---- */
  --rb-shadow:    0 1px 2px rgba(19, 26, 69, .06), 0 10px 30px -12px rgba(19, 26, 69, .18);
  --rb-shadow-lg: 0 24px 60px -24px rgba(19, 26, 69, .35);

  /* ---- Motion ---- */
  --rb-ease:    cubic-bezier(0.16, 1, 0.3, 1);
  --rb-dur-fast: 0.25s;
  --rb-dur-mid:  0.30s;
  --rb-dur-slow: 0.70s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --rb-bg:        #0E1116;
    --rb-surface:   #161A22;
    --rb-surface-2: #1E2531;
    --rb-card:      #161A22;
    --rb-ink:       #F2F4F8;
    --rb-text:      #C5CBD7;
    --rb-muted:     #8C94A3;
    --rb-line:      #29313F;

    --rb-navy-band: #1A2154;
    --rb-navy-deep: #0B0E13;
    --rb-red-soft:  rgba(186, 59, 70, 0.18);

    --rb-shadow:    0 1px 2px rgba(0,0,0,.4), 0 12px 34px -14px rgba(0,0,0,.6);
    --rb-shadow-lg: 0 26px 70px -28px rgba(0,0,0,.75);
  }
}