/* ============================================================================
   ReimburseOS v2 — Design Tokens
   Single source of truth for the build environment. Commure × ReimburseOS.
   Consumed by all build surfaces via /shared/tokens.css
   ============================================================================ */

:root {
  /* ---- Surfaces ---------------------------------------------------------- */
  --rb-bg-dark:        #0a0f1c;   /* primary dark sections */
  --rb-bg-dark-2:      #0f1b3d;   /* layered dark */
  --rb-bg-dark-3:      #111827;   /* dark elevation */
  --rb-bg-light:       #FAFAF7;   /* primary light sections — warm white, not #fff */
  --rb-bg-light-2:     #F2F1EB;   /* layered light */
  --rb-bg-light-3:     #FFFFFF;   /* card surface on light */

  /* ---- Text -------------------------------------------------------------- */
  --rb-fg-dark:        #0A0F1C;   /* text on light bg */
  --rb-fg-dark-muted:  #4B5563;   /* secondary text on light */
  --rb-fg-dark-faint:  #8A93A3;   /* tertiary text on light */
  --rb-fg-light:       #FFFFFF;   /* text on dark bg */
  --rb-fg-light-muted: rgba(255,255,255,0.62);
  --rb-fg-light-faint: rgba(255,255,255,0.40);

  /* ---- Accent (anchor — used sparingly) ---------------------------------- */
  --rb-cyan:           #00D4FF;
  --rb-cyan-deep:      #0891B2;   /* darker cyan for light-bg accents */
  --rb-cyan-glow:      rgba(0,212,255,0.18);
  --rb-cyan-soft:      rgba(0,212,255,0.10);

  /* ---- Semantic ---------------------------------------------------------- */
  --rb-red:            #DC2F3D;   /* gap / loss indicator */
  --rb-red-soft:       rgba(220,47,61,0.14);
  --rb-green:          #059669;   /* opportunity / positive (works on light) */
  --rb-green-soft:     rgba(5,150,105,0.13);
  --rb-amber:          #B45309;   /* warning / partial data */
  --rb-amber-soft:     rgba(180,83,9,0.14);

  /* ---- Hairlines --------------------------------------------------------- */
  --rb-divider:        rgba(10,15,28,0.08);    /* on light */
  --rb-divider-dark:   rgba(255,255,255,0.07); /* on dark */
  --rb-border-light:   rgba(10,15,28,0.14);
  --rb-border-dark:    rgba(255,255,255,0.12);

  /* ---- Typography -------------------------------------------------------- */
  --rb-font-display: 'Inter Display','Sora',system-ui,sans-serif;
  --rb-font-body:    'Inter',system-ui,-apple-system,sans-serif;
  --rb-font-mono:    'JetBrains Mono','Geist Mono',ui-monospace,monospace;

  --rb-text-xs:   0.75rem;    /* 12 — captions, pre-headline */
  --rb-text-sm:   0.8125rem;  /* 13 — trust strip, fine print */
  --rb-text-base: 0.9375rem;  /* 15 — UI / CTA */
  --rb-text-md:   1.0625rem;  /* 17 — body */
  --rb-text-lg:   1.1875rem;  /* 19 — subhead */
  --rb-text-xl:   1.5rem;     /* 24 — H3 */
  --rb-text-2xl:  2rem;       /* 32 — H2 small */
  --rb-text-3xl:  2.625rem;   /* 42 — H2 */
  --rb-text-4xl:  3.25rem;    /* 52 — section hero */
  --rb-text-5xl:  clamp(3.2rem,6.5vw,5.2rem); /* H1 */

  --rb-leading-tight:  1.05;
  --rb-leading-snug:   1.25;
  --rb-leading-normal: 1.55;
  --rb-tracking-tight: -0.028em;
  --rb-tracking-wide:  0.14em;  /* pre-headline */

  /* ---- Spacing (8px grid) ------------------------------------------------ */
  --rb-space-1:  0.25rem;
  --rb-space-2:  0.5rem;
  --rb-space-3:  0.75rem;
  --rb-space-4:  1rem;
  --rb-space-6:  1.5rem;
  --rb-space-8:  2rem;
  --rb-space-12: 3rem;
  --rb-space-16: 4rem;
  --rb-space-20: 5rem;
  --rb-space-24: 6rem;
  --rb-space-32: 8rem;

  /* ---- Radius ------------------------------------------------------------ */
  --rb-radius-sm:   6px;
  --rb-radius-md:   8px;
  --rb-radius-lg:   12px;
  --rb-radius-xl:   14px;
  --rb-radius-pill: 100px;

  /* ---- Shadows (layered, cyan-tinted) ------------------------------------ */
  --rb-shadow-sm:   0 1px 2px rgba(10,15,28,0.06), 0 2px 8px rgba(10,15,28,0.04);
  --rb-shadow-md:   0 4px 12px rgba(10,15,28,0.08), 0 12px 32px rgba(10,15,28,0.06);
  --rb-shadow-lg:   0 8px 24px rgba(10,15,28,0.10), 0 32px 64px rgba(10,15,28,0.10);
  --rb-shadow-hero: 0 0 0 1px rgba(0,212,255,0.16), 0 40px 80px rgba(0,0,0,0.50), 0 0 140px rgba(0,212,255,0.07);
  --rb-shadow-cyan: 0 0 24px rgba(0,212,255,0.18);

  /* ---- Motion ------------------------------------------------------------ */
  --rb-ease:       cubic-bezier(0.16,1,0.3,1);   /* the Commure curve */
  --rb-ease-out:   cubic-bezier(0.33,1,0.68,1);
  --rb-dur-fast:   200ms;
  --rb-dur-base:   240ms;
  --rb-dur-slow:   380ms;

  /* ---- Z-index ----------------------------------------------------------- */
  --rb-z-base:     1;
  --rb-z-sticky:   100;
  --rb-z-nav:      200;
  --rb-z-overlay:  900;
  --rb-z-modal:    1000;
  --rb-z-toast:    1100;
  --rb-z-banner:   99999; /* BUILD ENV pill */
}

/* ---- Selection + scrollbar (premium polish) ------------------------------ */
::selection { background: var(--rb-cyan-glow); color: var(--rb-fg-light); }
:focus-visible { outline: 2px solid var(--rb-cyan); outline-offset: 2px; border-radius: 3px; }