/* ==========================================================================
   tokens.css — design tokens
   Single source of truth for all visual values. Every other CSS file should
   reference these tokens, never hard-code colors / sizes / weights / shadows.
   ========================================================================== */

:root {
  /* ── Font families ─────────────────────────────────────────────────────── */
  --font-base:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: 'Unbounded', 'Plus Jakarta Sans', sans-serif; /* trust metrics only */

  /* ── Font sizes ────────────────────────────────────────────────────────── */
  /* Display & headings */
  --fs-h1-xl:           64px;   /* extra-large display number (calc output, fee-flow yours .amt) */
  --fs-h1-lg:           56px;   /* large section h2 (categories desktop) */
  --fs-h1-mid:          52px;   /* mid-large display (calc @980) */
  --fs-h1:              48px;
  --fs-h1-md:           42px;   /* ≤980 */
  --fs-h2:              38px;
  --fs-h2-md:           36px;   /* tablet h2 / mobile large h2 (categories @720, trainer-cta @720) */
  --fs-h2-faq:          34px;
  --fs-h2-closing:      44px;
  --fs-h1-sm:           28px;   /* ≤720 */
  --fs-h2-sm:           24px;   /* h2 mobile / mid display (faq second tier, calc lbl) */
  --fs-h3-lg:           22px;   /* large card title (cat-tile, payout, you-vs-we) */
  --fs-h4:              20px;   /* heading 4 / mobile h3-tier */
  --fs-h3:              16.5px;

  /* Display metrics (numbers) */
  --fs-metric:          30px;   /* trust strip / closing h2 mobile */
  --fs-metric-sm:       26px;   /* trust strip ≤980 */
  --fs-metric-cta:      28px;   /* trainer-CTA stats */

  /* Body */
  --fs-body-lg:         18px;   /* large body / aux (cat-tile mobile, calc-output per, payout) */
  --fs-body:            16px;
  --fs-subhead:         19px;
  --fs-lead:            16.5px;
  --fs-md:              15px;   /* ad-hoc medium body (price/quote names/etc.) */
  --fs-sm:              14px;
  --fs-caption:         13.5px;
  --fs-micro:           12.5px;
  --fs-meta:            12px;   /* tiny meta lines (card price-from, rb-item subtitles) */
  --fs-quote:           15.5px;

  /* Labels & controls */
  --fs-kicker:          10px;   /* eyebrow chip */
  --fs-count-sm:        10.5px; /* count badge in small segmented filter */
  --fs-label:           11px;
  --fs-footer-label:    13px;
  --fs-badge:           11.5px;
  --fs-btn:             15px;
  --fs-input:           15.5px;
  --fs-price:           17px;
  --fs-price-lg:        22px;   /* booking row price, session detail */
  --fs-date-d:          20px;   /* date-tag day number (bk-row, listing) */

  /* ── Font weights ──────────────────────────────────────────────────────── */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-display:   800;

  /* ── Tracking ──────────────────────────────────────────────────────────── */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-base:    0;
  --ls-wide:    0.04em;
  --ls-wider:   0.08em;
  --ls-widest:  0.12em;

  /* ── Leading ───────────────────────────────────────────────────────────── */
  --lh-display:   1.08;
  --lh-heading:   1.15;
  --lh-tight:     1;
  --lh-card:      1.3;
  --lh-body:      1.5;
  --lh-prose:     1.6;

  /* ── Text colors ───────────────────────────────────────────────────────── */
  --ink:        #1a2333;
  --ink-rgb:    26, 35, 51;       /* rgb fragment for rgba() composition */
  --ink-2:      #2b3447;
  --ink-3:      #475569;
  --muted:      #6b7280;
  --ink-pure:       #000000;      /* pure black — phone-mock bezel, drop-shadows */
  --ink-pure-rgb:   0, 0, 0;      /* rgb fragment for rgba() composition (drop-shadows, gradient masks) */
  --white-rgb:  255, 255, 255;    /* rgb fragment for white-tinted alpha (glass surfaces) */
  --slate-rgb:  15, 23, 42;       /* rgb fragment for slate-tinted shadows */

  /* ── Surfaces ──────────────────────────────────────────────────────────── */
  --bg:           #ffffff;
  --bg-soft:      #f1f4f7;        /* alt section tint — desaturated cool slate */
  --bg-3:         #f4f6fa;        /* subtle gray surface */
  --bg-elevated:  #fdfdfd;        /* near-white pill (header pre-scroll) */
  --bg-dark:        #0b1220;      /* deep slate (footer, hero overlay base) */
  --bg-dark-rgb:    11, 18, 32;   /* rgb fragment for rgba() composition */
  --bg-darker-rgb:  8, 15, 30;    /* rgb fragment, deeper overlay (you-vs-we photo gradient) */

  /* ── Borders ───────────────────────────────────────────────────────────── */
  --line:        #e5e7eb;
  --line-2:      #f1f5f9;
  --line-strong: #cbd5e1;                    /* one notch darker — input borders, control outlines */
  --line-soft:   rgba(var(--ink-rgb), .05);  /* subtle ink-tinted stroke on light bg (cards) */

  /* ── Brand & accent ────────────────────────────────────────────────────── */
  --brand:             #00a7e5;
  --brand-rgb:         0, 167, 229;             /* rgb fragment for rgba() composition */
  --brand-ink:         #0086b8;
  --brand-ink-rgb:     0, 134, 184;             /* rgb fragment for focus rings, gradient overlays */
  --brand-soft:        #d6f1fb;
  --brand-soft-2:      #e8f7fc;                 /* lighter brand tint (trainer-cta inset) */
  --brand-tint:        rgba(var(--brand-rgb), .06); /* semi-transparent brand fill (kicker chip) */
  --star:              #f5a524;
  --star-soft:         #fff4cc;                 /* yellow tile bg behind star icon */
  --accent-live:       #34d399;                 /* green "live" indicator dot */
  --accent-live-rgb:   52, 211, 153;            /* rgb fragment for pulse-shadow keyframes */
  --danger:            #e02424;                 /* form error / destructive */
  --danger-rgb:        224, 36, 36;             /* rgb fragment for danger focus ring */
  --danger-soft:       #fdecec;                 /* tinted error background */
  /* Deeper destructive family used by .btn-danger, .otp.is-error border,
     .reason-card--danger.is-on. Reads less form-error, more "permanent
     action" — destructive buttons, OTP rejection, irreversible toggles. */
  --danger-strong:        #b91c1c;              /* deep destructive surface / border */
  --danger-strong-hover:  #991b1b;              /* hover step (one tone deeper) */
  --danger-strong-rgb:    185, 28, 28;          /* rgb fragment for rgba() shadows / focus rings */
  --danger-strong-ink:    #7f1d1d;              /* deep destructive heading text */
  --danger-strong-bg:     #fef2f2;              /* deeper-tone soft bg (cooler than --danger-soft) */
  --danger-strong-border:       #fecaca;        /* soft border on .btn-danger-ghost */
  --danger-strong-border-hover: #fca5a5;        /* soft border hover step */
  --warn:              #b45309;                 /* caution / partial-refund */
  --warn-rgb:          180, 83, 9;              /* rgb fragment for warn rings */
  --warn-soft:         #fff4e0;                 /* tinted warn background */
  --success:           #15803d;                 /* positive / completed */
  --success-rgb:       21, 128, 61;             /* rgb fragment for success rings */
  --success-soft:      #e7f7ee;                 /* tinted success background */
  --info:              #1d4ed8;                 /* informational / upcoming */
  --info-rgb:          29, 78, 216;              /* rgb fragment for info rings */
  --info-soft:         #eff6ff;                  /* tinted info background */
  --neutral:           #4b5563;                  /* muted / cancelled */
  --neutral-rgb:       75, 85, 99;               /* rgb fragment for neutral rings */
  --neutral-soft:      #f3f4f6;                  /* tinted neutral background */

  /* ── Semantic field tokens ───────────────────────────────────────────────
     Single source of truth for input/select/textarea/datepicker visuals.
     Components (form-field.css, datepicker.css, account-sidebar.css when
     sharing field language) reference ONLY these — never raw colors —
     so a theme change cascades through every input state with one edit.
     ─────────────────────────────────────────────────────────────────────── */
  --field-bg:               var(--bg);
  --field-bg-disabled:      var(--bg);
  --field-border:           var(--line-strong);
  --field-border-hover:     var(--brand);
  --field-border-focus:     var(--brand);
  --field-border-error:     var(--danger);
  --field-border-disabled:  var(--line);
  --field-text:             var(--ink);
  --field-text-readonly:    var(--ink-3);
  --field-text-disabled:    var(--muted);
  --field-placeholder:      var(--muted);
  --field-icon:             var(--muted);
  --field-icon-hover:       var(--ink);
  --field-icon-hover-bg:    var(--bg-3);
  --field-shadow-focus:     0 0 0 3px rgba(var(--brand-rgb),  .18);
  --field-shadow-error:     0 0 0 3px rgba(var(--danger-rgb), .18);
  --field-prefix-bg:        var(--bg);
  --field-prefix-text:      var(--ink-3);

  /* ── Universal hover treatment ───────────────────────────────────────────
     Background + text colors used when a non-button surface (link, nav item,
     chip, generic hover-able element) becomes hovered. Matches the "selected
     menu item in header" affordance — a light brand tint, no inverted black.
     ─────────────────────────────────────────────────────────────────────── */
  --hover-bg:   var(--brand-soft-2);
  --hover-text: var(--brand-ink);

  /* ── Selected-surface tint ───────────────────────────────────────────────
     Background applied to a radio-card / list-row / picker-tile when it is
     in the active/selected state. Pair with --brand border + --brand-ink
     accents on the contents. Deliberately barely-there (rgba brand 6%) so
     the selection reads through the border, not through a hard fill —
     keeps long lists from feeling stuffed with brand color.
     ─────────────────────────────────────────────────────────────────────── */
  --surface-selected: var(--brand-tint);

  /* ── Shadows ───────────────────────────────────────────────────────────── */
  /* Neutral surface elevations (cards, tiles on light bg) */
  --shadow-sm:  0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-md:  0 6px 16px rgba(15,23,42,.06), 0 2px 4px rgba(15,23,42,.04);
  --shadow-lg:  0 18px 36px rgba(15,23,42,.10), 0 6px 10px rgba(15,23,42,.04);

  /* Brand-tinted glow (primary buttons) */
  --shadow-brand:        0 4px 14px rgba(0,167,229,.28);
  --shadow-brand-hover:  0 4px 18px rgba(0,167,229,.45);

  /* Dark glass surfaces (live-card, recent-bookings on hero photo) */
  --shadow-glass:     0 10px 24px rgba(0,0,0,.32);
  --shadow-glass-lg:  0 18px 40px rgba(0,0,0,.32);

  /* Floating site header — pill state and scrolled-strip state */
  --shadow-header:        0 10px 30px rgba(11,18,32,.18), 0 2px 6px rgba(11,18,32,.08);
  --shadow-header-strip:  0 1px 0 rgba(11,18,32,.06), 0 6px 18px rgba(11,18,32,.08);

  /* Segmented-filter active-pill (used as default --seg-active-shadow) */
  --shadow-segment-active: 0 1px 2px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.08);

  /* Card hover lift (booking row, listing row, anywhere a row card lifts on hover) */
  --shadow-card-hover: 0 8px 24px rgba(15,23,42,.06);

  /* ── Radii ─────────────────────────────────────────────────────────────── */
  --radius-xs:  4px;    /* tight crop on small image rectangles (fee-flow bills) */
  --radius-sm:  10px;
  --radius-pill-sm: 12px; /* small pill (you-vs-we icon tile mobile) */
  --radius:     14px;
  --radius-md:  16px;   /* tablet header pill, mobile-menu close corners */
  --radius-lg:  20px;
  --radius-2xl: 24px;   /* app-store badges */
  --radius-xl:  28px;   /* mobile menu drawer when expanded */
  --radius-3xl: 32px;   /* trust-strip floating card */
  --pill:       999px;

  /* ── Spacing scale (pixel-named for unambiguous reference) ─────────────── */
  /* Use these for: padding, margin, gap, top/right/bottom/left.            */
  /* If a pixel value isn't in the scale below, ADD it here first.          */
  --space-2:    2px;
  --space-3:    3px;
  --space-4:    4px;
  --space-5:    5px;
  --space-6:    6px;
  --space-7:    7px;
  --space-8:    8px;
  --space-10:  10px;
  --space-11:  11px;
  --space-12:  12px;
  --space-13:  13px;
  --space-14:  14px;
  --space-16:  16px;
  --space-18:  18px;
  --space-20:  20px;
  --space-22:  22px;
  --space-24:  24px;
  --space-26:  26px;
  --space-28:  28px;
  --space-30:  30px;
  --space-32:  32px;
  --space-36:  36px;
  --space-40:  40px;
  --space-44:  44px;
  --space-48:  48px;
  --space-56:  56px;
  --space-64:  64px;
  --space-72:  72px;
  --space-88:  88px;
  --space-100: 100px;
  --space-110: 110px;
  --space-145: 145px;
  --space-180: 180px;
  --space-340: 340px;          /* trainer-proof portrait height @720 */
  --space-400: 400px;          /* trainer-proof portrait height @desktop */
  --space-560: 560px;          /* trainer-proof portrait height @980 single-col */

  /* ── Motion ────────────────────────────────────────────────────────────── */
  /* Durations: fast for hover state-swaps, base for layout/transform, slow
     for emphasized affordances. Easings: --ease for plain in/out curves,
     --ease-out for natural-feeling overshoot-free motion (sliders, reveals). */
  --dur-fast:   .15s;
  --dur-base:   .2s;
  --dur-slow:   .25s;
  --ease:       ease;
  --ease-out:   cubic-bezier(.2, .8, .2, 1);

  /* ── Layout ────────────────────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-pad:  var(--space-24);

  /* ── Sticky offsets ────────────────────────────────────────────────────────
     Any `position: sticky` element below the app shell header MUST use
     --sticky-offset for its `top` value so it clears the strip + 24px buffer.
     Header strip is 56px (52px ≤980px); buffer keeps content from kissing
     the chrome. Authoritative for booking-wizard aside, settings sidebar,
     listing-wizard aside, and any future sticky card under header.site.service. */
  --app-header-h:   56px;                                      /* .site.service .bar */
  --sticky-buffer:  var(--space-24);                            /* breathing room below header */
  --sticky-offset:  calc(var(--app-header-h) + var(--sticky-buffer));

  /* ── Breakpoints ───────────────────────────────────────────────────────── */
  /* CSS custom properties cannot be used inside @media queries — these vars
     are for reference only. Component @media queries MUST use the literal
     values below. If a new breakpoint is needed, add it here first.          */
  --bp-tablet:  980px;   /* desktop → tablet  — header collapses, grids halve */
  --bp-mobile:  720px;   /* tablet → mobile  — single column, full-width forms */
  /* No "small mobile" breakpoint — design must hold to 360px without one.   */
}