/* ============================================================
   ROADSHOW · tokens.css
   The single source of truth for color, type, space, radius,
   shadow, and motion. Generated from DESIGN.md. Define once on
   :root for the default dark theme; the light group overrides on
   [data-theme="light"]. Linked into the splash page and every app,
   so a value change here propagates everywhere. Do not duplicate
   this block per app.
   ============================================================ */

/* Fonts: Oswald (display), Hanken Grotesque (body/UI), JetBrains Mono (labels) */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Hanken+Grotesque:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Color: surfaces (dark, default) ---- */
  --surface-base:        #0E0D0A;
  --surface-bezel:       #14120C;
  --surface-modal:       #15130D;
  --surface-card:        #17150F;
  --surface-menu:        #1B1812;
  --surface-card-a40:    rgba(31, 28, 20, 0.40);
  --surface-card-a50:    rgba(31, 28, 20, 0.50);
  --surface-card-a65:    rgba(31, 28, 20, 0.65);
  --surface-card-a70:    rgba(31, 28, 20, 0.70);
  --surface-appbar:      rgba(20, 18, 12, 0.92);
  --surface-tabs:        rgba(20, 18, 12, 0.95);

  /* ---- Color: text and foreground ---- */
  --text-primary:        #F3EEE0;
  --text-secondary:      #ADA48C;
  --text-muted:          #76705E;
  --ink-faint:           #6E6750;
  --text-soft-beige:     #C9C0A8;
  --ink-drag-hint:       #8A8268;

  /* ---- Color: brand triad and status ---- */
  --brand-amber:         #E6B45A;  /* primary brand · Show */
  --brand-blue:          #7FA8CE;  /* action · Travel */
  --brand-sage:          #9FB6A0;  /* OK / soundcheck / ready */
  --status-neutral:      #76705E;  /* Day off / neutral */

  /* ---- Color: borders (single ink at varying alpha) ---- */
  --border-ink:          240, 234, 218;
  --border-hairline:     rgba(240, 234, 218, 0.06);
  --border-card:         rgba(240, 234, 218, 0.08);
  --border-standard:     rgba(240, 234, 218, 0.10);
  --border-raised-lo:    rgba(240, 234, 218, 0.12);
  --border-raised-hi:    rgba(240, 234, 218, 0.16);
  --border-button-lo:    rgba(240, 234, 218, 0.22);
  --border-button-hi:    rgba(240, 234, 218, 0.40);

  /* ---- Color: gradients and ambient ---- */
  --grad-button-hover:   linear-gradient(105deg, #7FA8CE, #E6B45A);
  --grad-avatar:         linear-gradient(135deg, #E6B45A, #7FA8CE);
  --grad-route-line:     linear-gradient(90deg, #E6B45A, #7FA8CE 60%, #6E6750);
  --ambient-amber:       radial-gradient(rgba(230, 180, 90, 0.26), transparent);
  --ambient-blue:        radial-gradient(rgba(127, 168, 206, 0.26), transparent);
  --ambient-blur:        48px;
  --cta-glow:            linear-gradient(100deg, #E6B45A, #7FA8CE);
  --cta-glow-opacity:    0.18;
  --cta-glow-blur:       64px;

  /* ---- Typography: families and weights ---- */
  --font-display:        'Oswald', sans-serif;
  --font-body:           'Hanken Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:           'JetBrains Mono', ui-monospace, monospace;
  --fw-regular:          400;
  --fw-medium:           500;
  --fw-semibold:         600;
  --fw-bold:             700;
  --fw-black:            800;

  /* ---- Typography: type scale ---- */
  --fs-display-xl:       clamp(46px, 7.4vw, 104px);
  --fs-display-l:        clamp(34px, 5.4vw, 58px);
  --fs-h2:               32px;
  --fs-h3:               30px;
  --fs-card-title-l:     34px;
  --fs-card-title-m:     25px;
  --fs-stat:             25px;
  --fs-section-label:    15px;
  --fs-wordmark:         18px;
  --fs-lede:             21px;
  --fs-body:             16.5px;
  --fs-body-s:           14px;
  --fs-button:           14px;
  --fs-eyebrow:          10.5px;
  --fs-micro:            9px;

  --lh-display-xl:       0.94;
  --lh-display-l:        1.04;
  --lh-h3:               1.04;
  --lh-lede:             1.55;
  --lh-body:             1.6;

  --ls-display-xl:       0.02em;
  --ls-display-l:        0.04em;
  --ls-h2:               0.04em;
  --ls-card-title-l:     0.12em;
  --ls-card-title-m:     0.01em;
  --ls-section-label:    0.06em;
  --ls-wordmark:         0.18em;
  --ls-button:           0.05em;
  --ls-eyebrow:          0.26em;
  --ls-micro:            0.13em;

  /* ---- Spacing scale (base 2px) ---- */
  --space-4:   4px;  --space-5:   5px;  --space-7:   7px;  --space-8:   8px;
  --space-9:   9px;  --space-11:  11px; --space-12:  12px; --space-13:  13px;
  --space-14:  14px; --space-16:  16px; --space-18:  18px; --space-22:  22px;
  --space-26:  26px; --space-28:  28px; --space-30:  30px; --space-32:  32px;
  --space-36:  36px; --space-46:  46px; --space-54:  54px;

  --pad-card-app:        var(--space-13);
  --pad-card-marketing:  var(--space-26);
  --rhythm-section:      var(--space-46);
  --rhythm-ticker:       var(--space-54);
  --gap-app-tight:       var(--space-7);
  --gap-card:            var(--space-12);
  --gap-marketing-col:   var(--space-26);
  --container-pad:       var(--space-28);

  /* ---- Corner radii ---- */
  --radius-input:        9px;
  --radius-button:       12px;
  --radius-card:         16px;
  --radius-card-lg:      22px;
  --radius-sheet:        22px;
  --radius-pill:         999px;
  --radius-bezel:        40px;
  --radius-screen:       32px;
  --radius-round:        50%;

  /* ---- Shadows ---- */
  --shadow-phone:        0 50px 90px rgba(0, 0, 0, 0.55);
  --shadow-preview:      0 40px 80px rgba(0, 0, 0, 0.50);
  --shadow-auth:         0 30px 70px rgba(0, 0, 0, 0.45);
  --shadow-menu:         0 22px 46px rgba(0, 0, 0, 0.55);
  --shadow-sheet:        0 -30px 60px rgba(0, 0, 0, 0.50);
  --ring-marker:         0 0 0 1.5px rgba(240, 234, 218, 0.15);

  /* ---- Layout sizing and motion ---- */
  --container-max:       1120px;
  --phone-max:           392px;
  --bp-mobile:           480px;
  --bp-tablet:           768px;
  --bp-desktop:          1120px;
  --transition-standard: 0.35s ease;

  /* ---- Motion and effect tokens (task 5) ---- */
  --hover-gradient:      linear-gradient(105deg, #7FA8CE, #E6B45A);
  --hover-gradient-soft: linear-gradient(105deg, rgba(127,168,206,0.16), rgba(230,180,90,0.16));
  --lift-distance:       -2px;
  --lift-distance-sm:    -1px;
  --lift-transition:     transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
  --lift-shadow:         0 14px 36px rgba(0, 0, 0, 0.35);
  --fade-in-duration:    0.5s;
  --fade-in-ease:        ease;
  --fade-in-delay:       0.08s;
  --fade-in-rise:        8px;
  --marquee-duration:    26s;
  --marquee-timing:      linear;
  --marquee-gap:         42px;
  --grain-opacity:       0.05;
  --grain-opacity-dark:  0.045;
  --grain-blend:         multiply;
  --grain-blend-dark:    screen;
  --grain-size:          160px;
  --grain-svg:           url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---- Light theme (scoped). Overrides only its named group. ---- */
[data-theme="light"] {
  --surface-base:        #F3EEE0;
  --surface-bezel:       #E7E0CC;
  --surface-modal:       #FBF7EC;
  --surface-card:        #FFFFFF;
  --surface-menu:        #FFFFFF;
  --surface-card-a40:    rgba(255, 255, 255, 0.40);
  --surface-card-a50:    rgba(255, 255, 255, 0.55);
  --surface-card-a65:    rgba(255, 255, 255, 0.70);
  --surface-card-a70:    rgba(255, 255, 255, 0.80);
  --surface-appbar:      rgba(243, 238, 224, 0.92);
  --surface-tabs:        rgba(243, 238, 224, 0.95);

  --text-primary:        #1F1B14;
  --text-secondary:      #6E6757;
  --text-muted:          #8A8268;
  --ink-faint:           #A49B82;
  --text-soft-beige:     #6E6757;
  --ink-drag-hint:       #8A8268;

  --border-ink:          20, 18, 12;
  --border-hairline:     rgba(20, 18, 12, 0.06);
  --border-card:         rgba(20, 18, 12, 0.08);
  --border-standard:     rgba(20, 18, 12, 0.12);
  --border-raised-lo:    rgba(20, 18, 12, 0.14);
  --border-raised-hi:    rgba(20, 18, 12, 0.18);
  --border-button-lo:    rgba(20, 18, 12, 0.24);
  --border-button-hi:    rgba(20, 18, 12, 0.42);

  --shadow-phone:        0 50px 90px rgba(60, 50, 30, 0.20);
  --shadow-preview:      0 40px 80px rgba(60, 50, 30, 0.18);
  --shadow-auth:         0 30px 70px rgba(60, 50, 30, 0.16);
  --shadow-menu:         0 22px 46px rgba(60, 50, 30, 0.18);
  --shadow-sheet:        0 -30px 60px rgba(60, 50, 30, 0.16);
  --grain-blend:         multiply;
}

/* ---- Keyframes for the named motion patterns ---- */
@keyframes rs-marquee  { from { transform: translateX(0); }              to { transform: translateX(-50%); } }
@keyframes rs-fade-in  { from { opacity: 0; transform: translateY(var(--fade-in-rise)); } to { opacity: 1; transform: none; } }
@keyframes rs-float-1  { 0% { transform: translate(0,0) scale(1); }      100% { transform: translate(6%,5%) scale(1.18); } }
@keyframes rs-float-2  { 0% { transform: translate(0,0) scale(1); }      100% { transform: translate(-7%,4%) scale(1.22); } }
@keyframes rs-glow     { 0% { transform: translate(-50%,-50%) scale(1); } 100% { transform: translate(-48%,-52%) scale(1.12); } }

/* ---- Reusable motion helpers (opt-in classes) ---- */
.rs-fade-in { animation: rs-fade-in var(--fade-in-duration) var(--fade-in-ease) both var(--fade-in-delay); }

.rs-lift { transition: var(--lift-transition); }
.rs-lift:hover { transform: translateY(var(--lift-distance)); box-shadow: var(--lift-shadow); }

.rs-grain::after {
  content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: var(--grain-svg);
}

.rs-marquee { overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rs-marquee > .run { display: flex; gap: var(--marquee-gap); white-space: nowrap; width: max-content;
  animation: rs-marquee var(--marquee-duration) var(--marquee-timing) infinite; }

@media (prefers-reduced-motion: reduce) {
  .rs-lift:hover { transform: none; }
  .rs-fade-in { animation: none; }
  .rs-marquee > .run { animation: none; }
}