/* ============================================================================
   JulianSpeaksLife PWA — DESIGN TOKENS  (Approach A)
   Verbatim transcription of _design-spec.md §1 (colors, type, spacing, radii,
   shadows, motion). No invention. "The Arena Light".
   ========================================================================== */

:root{
  /* ----- Core brand (from brand-kit.json, verbatim) ----- */
  --red:           #E71D1D;   /* signature accent: CTAs, underline bars, active state */
  --red-alt:       #D2042D;   /* gradient partner for red (bar/button sheen) */
  --red-deep:      #9D1111;   /* hover / pressed on red */
  --black:         #000000;   /* pure black — hero letterbox, splash */
  --ink:           #191919;   /* primary dark surface (app bg sits between black & ink) */

  --white:         #FFFFFF;
  --cream:         #FAF7E8;   /* warm off-white for light surfaces */
  --cream-light:   #FDFBF3;

  --gold:          #FFD04E;   /* rare premium micro-accent (Daily Spark, star, cross echo) */
  --gold-deep:     #FAB700;
  --gold-dark:     #A77A00;

  /* ----- Derived app surfaces (dark-first) ----- */
  --bg:            #0B0B0C;   /* app background — near-black, a hair lifted than pure #000 */
  --surface-1:     #141416;   /* raised dark surface: feed cards, sheets, nav bar */
  --surface-2:     #1C1C1F;   /* elevated dark surface: pressed card, menu, input on dark */
  --surface-line:  #2A2A2E;   /* hairline borders on dark */
  --paper:         #FDFBF3;   /* light surface (booking form, confirmation body, settings) */
  --paper-sunk:    #F3EFE2;   /* sunken light surface (input fields on paper) */
  --paper-line:    #E4DECB;   /* hairline borders on paper */

  /* ----- Text ----- */
  --text-on-dark:        #FFFFFF;
  --text-on-dark-soft:   #C9C9CE;   /* secondary text on dark (~78% white) */
  --text-on-dark-faint:  #8A8A90;   /* tertiary / meta on dark (~54%) */
  --text-on-paper:       #191919;   /* = ink */
  --text-on-paper-soft:  #5A5A5A;   /* secondary on paper */
  --text-on-paper-faint: #8C8C8C;   /* meta on paper */

  /* ----- Overlays / scrims (legibility of white text over photos) ----- */
  --scrim-hero:    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.10) 38%, rgba(0,0,0,.78) 100%);
  --scrim-card:    linear-gradient(180deg, rgba(0,0,0,0) 32%, rgba(0,0,0,.72) 100%);
  --scrim-flat:    rgba(0,0,0,.45);   /* even darken on a photo behind a chip/label */

  /* ----- Accent gradients ----- */
  --grad-red:      linear-gradient(135deg, #E71D1D 0%, #D2042D 100%);
  --grad-red-soft: linear-gradient(135deg, rgba(231,29,29,.16), rgba(210,4,45,.06));
  --grad-spotlight: radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 55%);

  --focus-ring:    0 0 0 3px rgba(231,29,29,.45);

  /* ----- Typography ----- */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Raleway', system-ui, sans-serif;
  --font-serif:   'Suez One', 'Times New Roman', Georgia, serif;

  --t-hero:    clamp(40px, 11vw, 72px);
  --t-h1:      clamp(32px, 8vw, 52px);
  --t-h2:      clamp(24px, 6vw, 36px);
  --t-h3:      clamp(19px, 5vw, 26px);
  --t-eyebrow: 12px;
  --t-subhead: clamp(16px, 4.4vw, 20px);
  --t-lead:    18px;
  --t-body:    15.5px;
  --t-small:   13.5px;
  --t-caption: 11.5px;
  --t-button:  14px;

  /* ----- Spacing (8px base rhythm) ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px;
  --page-x: 20px;
  --page-x-lg: 32px;
  --content-max: 460px;
  --section-y: var(--s-10);

  /* ----- Radii ----- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --r-bar: 2px;

  /* ----- Shadows & elevation ----- */
  --sh-card:   0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.45);
  --sh-raised: 0 1px 0 rgba(255,255,255,.06) inset, 0 16px 40px rgba(0,0,0,.55);
  --sh-sheet:  0 -8px 40px rgba(0,0,0,.6);
  --sh-paper:  0 10px 30px rgba(0,0,0,.18);
  --sh-red:    0 8px 22px rgba(231,29,29,.34);
  --sh-nav:    0 -6px 24px rgba(0,0,0,.5);

  /* ----- Motion ----- */
  --ease-out:    cubic-bezier(.22,.61,.36,1);
  --ease-in-out: cubic-bezier(.65,.05,.36,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --d-fast:   140ms;
  --d-base:   260ms;
  --d-slow:   480ms;
  --d-stagger:70ms;

  /* ----- Safe-area helpers ----- */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);

  /* parallax flag (JS reads; reduced-motion sets to 0) */
  --parallax: 1;
}