/* Greenlake Martial Arts landing: design tokens (GMA-313).
   Every color, radius, size and shadow used by landing.css comes from here. Components never
   hardcode a value. One theme: navy, the app's dark theme (composeApp theme/Color.kt, header and
   footer band = DarkNavy #1C2340).

   Program and CTA colors (background / text, contrast), all WCAG AA or better:
     main CTA   #C41E3A / #FFFFFF  5.84
     Adult      #C41E3A / #FFFFFF  5.84  (same as the main CTA)
     Teen       #F08A3C / #1C1E22  6.68
     superHERO  #F5C518 / #1C1E22 10.24
     Women's    #C23A83 / #FFFFFF  4.97

   A program color is used in three places only: its program card accent bar, its pricing tab
   when active, and its Buy buttons. Since GMA-321 programs are data and pick from the program
   palette below (--c-prog-*); the four per-program pairs stay for the static no-JS markup.

   Page text contrast (text #F1F5F9 / muted #94A3B8):
     bg #0F172A 16.30 / 6.96, surface #1E293B 13.35 / 5.71, raised #283548 11.32 / 4.84,
     band #1C2340 14.06 / 6.01

   Mobile first: base values are phone values, wider screens scale up below. */

:root {
  /* Page */
  --c-bg: #0F172A;
  --c-surface: #1E293B;
  --c-surface-raised: #283548;
  --c-text: #F1F5F9;
  --c-muted: #94A3B8;
  --c-line: #334155;
  --c-header-bg: rgba(28, 35, 64, 0.96);
  --c-band: #1C2340;

  /* Main call to action (brand red) */
  --c-cta-bg: #C41E3A;
  --c-cta-text: #FFFFFF;

  /* Programs: background / text of each program's buttons and active tab */
  --c-adult-bg: #C41E3A;
  --c-adult-text: #FFFFFF;
  --c-teen-bg: #F08A3C;        /* warm light orange; white on it would be 2.5:1, so dark text */
  --c-teen-text: #1C1E22;
  --c-womens-bg: #C23A83;      /* magenta pink, 4.97:1 with white. Hector's reference is #D0438F
                                  (4.30:1 with white, AA only for large bold text); swap here if
                                  that is accepted. */
  --c-womens-text: #FFFFFF;
  --c-superhero-bg: #F5C518;
  --c-superhero-text: #1C1E22;

  /* Program palette (GMA-321): programs are data, each one picks a color_key from this closed
     set in the app. Mirrors PricingProgramColor (shared/.../domain/pricing/PricingProgramRules.kt);
     a server test fails if the two drift. Consumed through [data-color] in css/programs.css.
     Contrast background / text: red 5.84, orange 6.68, yellow 10.24, magenta 4.97, blue 5.17,
     green 5.02, teal 5.47, gray 11.24 (all WCAG AA). */
  --c-prog-red-bg: #C41E3A;      --c-prog-red-text: #FFFFFF;
  --c-prog-orange-bg: #F08A3C;   --c-prog-orange-text: #1C1E22;
  --c-prog-yellow-bg: #F5C518;   --c-prog-yellow-text: #1C1E22;
  --c-prog-magenta-bg: #C23A83;  --c-prog-magenta-text: #FFFFFF;
  --c-prog-blue-bg: #2563EB;     --c-prog-blue-text: #FFFFFF;
  --c-prog-green-bg: #15803D;    --c-prog-green-text: #FFFFFF;
  --c-prog-teal-bg: #0F766E;     --c-prog-teal-text: #FFFFFF;
  --c-prog-gray-bg: #CBD5E1;     --c-prog-gray-text: #1C1E22;

  /* Logo sits on a light disc: its brand red is too dark to read on the page background */
  --c-logo-disc: #FFFFFF;

  /* WhatsApp brand green stays WhatsApp's green: people recognise it. The white
     glyph is the brand mark; the bubble itself is 9.0:1 against the page. */
  --c-whatsapp: #25D366;
  --c-on-whatsapp: #FFFFFF;

  /* Focus ring: white on the dark page, offset so it reads around filled buttons */
  --c-focus: #FFFFFF;

  /* Hero photo scrim and carousel controls. The scrim is also the Ways to train program photo
     scrim (GMA-331), so both photo sections read the same. */
  /* Darkest where text can sit: white text over a pure white pixel under 0.62 navy is 5:1 (AA). */
  --c-scrim: linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.68) 55%, rgba(15, 23, 42, 0.92) 100%);
  /* Ways to train on phones and tablets (GMA-331): the photo is a band at the top, so the scrim
     ends in the page background and the band melts into the navy under the plan cards. */
  --c-scrim-band: linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.72) 55%, #0F172A 100%);
  /* Featured program band (GMA-366, css/programs.css). Phones and tablets: the Ways to train band
     scrim, ending in the featured band's own navy (--c-band) instead of the page. From 1000px: a
     left to right scrim, darkest behind the copy, which is held to --featured-copy-max so it ends
     before the scrim drops under 0.62 (5:1 for white text over a white pixel, as above): at
     1000px wide the copy ends at about 62% of the width, alpha 0.72; at 1440px about 54%, 0.77.
     The plan cards are solid surface, so the lighter right side only ever shows the photo. */
  --c-scrim-featured-band: linear-gradient(180deg, rgba(15, 23, 42, 0.62) 0%, rgba(15, 23, 42, 0.72) 55%, #1C2340 100%);
  --c-scrim-side: linear-gradient(90deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.80) 50%, rgba(15, 23, 42, 0.45) 100%);
  --c-on-photo: #FFFFFF;
  --c-dot: rgba(255, 255, 255, 0.45);
  --c-dot-hover: rgba(255, 255, 255, 0.75);
  --c-control-bg: rgba(15, 23, 42, 0.6);

  /* Status */
  --c-error-text: #FFB4AB;

  /* Stage notice (GMA-319, stage builds only, see css/stage-notice.css). A light page, copied
     from the app's light theme (composeApp theme/Color.kt, ColorScheme.kt) so it matches the
     native NonProductionLandingScreen: background, onBackground, onSurfaceVariant,
     errorContainer / onErrorContainer (badge), primary / onPrimary (button).
     Contrast: text #0F172A on #F8FAFC 17.1, muted #64748B on #F8FAFC 4.55,
     badge #410002 on #FFDAD6 13.3, button #FFFFFF on #C41E3A 5.84. */
  --c-notice-bg: #F8FAFC;
  --c-notice-text: #0F172A;
  --c-notice-muted: #64748B;
  --c-notice-badge-bg: #FFDAD6;
  --c-notice-badge-text: #410002;
  --c-notice-cta-bg: #C41E3A;
  --c-notice-cta-text: #FFFFFF;
  --c-notice-focus: #0F172A;   /* the white page focus ring would vanish on the light notice */

  /* Stage notice sizes, from the Compose screen (dp = px) and the app typography (Type.kt) */
  --notice-max-w: 480px;
  --notice-pad-x: 24px;
  --notice-pad-y: 32px;
  --notice-logo: 140px;
  --notice-gap-logo: 20px;      /* logo to badge */
  --notice-gap-badge: 24px;     /* badge to heading */
  --notice-gap-title: 12px;     /* heading to body */
  --notice-gap-body: 28px;      /* body to button */
  --notice-gap-cta: 8px;        /* button to text link */
  --notice-badge-pad-y: 6px;
  --notice-badge-pad-x: 12px;
  --notice-badge-size: 14px;    --notice-badge-lh: 20px;   /* labelLarge, bold */
  --notice-title-size: 24px;    --notice-title-lh: 32px;   /* headlineSmall, bold */
  --notice-body-size: 14px;     --notice-body-lh: 20px;    /* bodyMedium */
  --notice-cta-size: 16px;      --notice-cta-lh: 24px;     /* titleMedium, bold */
  --notice-cta-h: 48px;         /* Material's 40dp button, raised to clear the 44px touch target */
  --notice-z: 1000;

  /* Type: system stack, no web font request */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --h1-size: 34px;  --h1-lh: 1.1;
  --h2-size: 26px;  --h2-lh: 1.2;
  --h3-size: 19px;  --h3-lh: 1.25;
  --lead-size: 17px;
  --body-size: 16px; --body-lh: 1.55;
  --small-size: 14px;
  --eyebrow-size: 13px; --eyebrow-ls: 0.14em;
  --price-size: 30px;
  --wordmark-size: 16px;

  /* Shape */
  --radius-pill: 999px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --line-w: 1px;
  --accent-w: 4px;
  --focus-w: 3px;
  --focus-offset: 3px;

  /* Space */
  --container: 1120px;
  --gutter: 16px;
  --section-y: 48px;
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap: 16px;
  --gap-lg: 24px;
  --card-pad: 18px;
  --header-h: 64px;
  --logo-size: 40px;
  --touch: 44px;

  /* Buttons */
  --btn-pad-y: 12px; --btn-pad-x: 22px; --btn-size: 16px;
  --btn-lg-pad-y: 16px; --btn-lg-pad-x: 32px; --btn-lg-size: 18px;

  /* Effects */
  --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.35);
  --shadow-header: 0 1px 0 rgba(51, 65, 85, 1);
  --shadow-bubble: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-bubble-hover: 0 10px 24px rgba(0, 0, 0, 0.5);
  --hero-min-h: 78vh;
  --ease: 160ms ease;
  --fade: 900ms ease;
  --text-fade: 420ms;   /* hero slide text: fade out, then fade in (GMA-322) */
  --program-band-h: 62vh; /* phone and tablet height of the Ways to train photo band (GMA-331) */
  --photo-fade: 450ms;  /* Ways to train program photo crossfade on tab change (GMA-331) */
  --featured-band-y: 32px;      /* featured program band top and bottom padding (GMA-366) */
  --featured-copy-max: 36rem;   /* its tag, title and description width, see --c-scrim-side */
}

/* Tablet */
@media (min-width: 640px) {
  :root {
    --h1-size: 46px;
    --h2-size: 32px;
    --h3-size: 21px;
    --lead-size: 19px;
    --gutter: 24px;
    --section-y: 64px;
    --card-pad: 22px;
    --price-size: 34px;
    --wordmark-size: 17px;
    --featured-band-y: 44px;
  }
}

/* Desktop */
@media (min-width: 1000px) {
  :root {
    --h1-size: 60px;
    --h2-size: 38px;
    --lead-size: 21px;
    --body-size: 17px;
    --gutter: 40px;
    --section-y: 88px;
    --card-pad: 26px;
    --logo-size: 44px;
    --header-h: 72px;
    --featured-band-y: 56px;
  }
}

/* Demo-class booking (GMA-153, css/booking.css). Lighter form since GMA-326.
   Contrast on the dialog surface #1E293B (and on the field background #172033):
     success #86EFAC 10.42
     label #CBD5E1 9.85, hint and required asterisk (muted) #94A3B8 5.71 (6.34 on the field)
     field error text #F87171 5.29 (5.88 on the field), text AA 4.5:1 met
     field border #64748B 3.07 (3.42 on the field), non-text 3:1 met
     focus border #F0506A 4.22 (4.70 on the field), a tint of the brand red #C41E3A, which itself
     is only 2.50 on the surface, so the red glow around it is decoration, not the indicator */
:root {
  --c-success: #86EFAC;
  --c-backdrop: rgba(2, 6, 23, 0.72);
  --c-input-bg: #172033;
  --c-input-border: #64748B;
  --c-label: #CBD5E1;
  --c-field-error: #F87171;
  --c-field-focus: #F0506A;
  --c-field-focus-glow: rgba(196, 30, 58, 0.35);
  --field-glow-w: 4px;
  --check-focus-w: 2px;
  --label-size: 13px;
  --dialog-max-w: 560px;
  --dialog-max-h: 92vh;
  --input-pad: 10px 12px;
  --check-size: 22px;
  --policy-max-w: 760px;
}

/* Demo class cards (GMA-367, css/booking.css). The soonest class gets a "Next class" pill: text
   #F1F5F9 on this red tint over the card background #0F172A (composite about #37192E) 14.3, with a
   brand red #C41E3A border (decoration, the text carries the meaning). Later dates: muted pill text
   #94A3B8 on #0F172A 6.96; outlined Book now text #F1F5F9 16.30, border #94A3B8 6.96 (non-text 3:1
   met), hover border #F1F5F9. */
:root {
  --c-next-tag-bg: rgba(196, 30, 58, 0.22);
}

/* Demo class feedback page (GMA-336, css/feedback.css). Contrast on the card surface #1E293B:
     filled star #F5C518 10.24, empty star outline #64748B 3.07 (non-text 3:1 met),
     status text (success) #86EFAC 10.42. Stars are 44px, the touch target. The read-only stars of
     the sent feedback (GMA-384) are smaller, they are not a control; its comment sits on the page
     background #0F172A, text #F1F5F9 16.30. */
:root {
  --c-star-on: #F5C518;
  --c-star-off: #64748B;
  --star-size: 44px;
  --star-size-sm: 28px;
  --star-gap: 4px;
  --feedback-max-w: 560px;
}

/* Embedded Stripe checkout dialog (GMA-359, css/checkout.css). No new page colors: the dialog is
   the page navy with a surface summary card and the booking dialog's backdrop. The one addition
   is the white panel Stripe's form sits on; it matches the branding_settings background_color
   the server sends Stripe (StripePaymentGateway), so the iframe and its frame read as one card.
   Contrast: text #F1F5F9 on bg #0F172A 16.30, muted #94A3B8 on surface #1E293B 5.71,
   success check #86EFAC on band #1C2340 11.0. Full screen below 760px (css/checkout.css). */
:root {
  --c-checkout-form-bg: #FFFFFF;
  --checkout-max-w: 820px;
  --checkout-z: 200;              /* above the sticky header (50) and the WhatsApp bubble (45) */
  --checkout-form-min-h: 360px;   /* keeps the dialog from jumping while Stripe's form loads */
  --checkout-toast-bottom: 88px;  /* clears the WhatsApp bubble */
  --checkout-spinner: 32px;
  --checkout-enter: 180ms ease;
}

/* Free first class (GMA-379, css/booking.css). The list rows reuse the demo card colors; the one
   addition is the amber of the "You already have your free class" box: #FBBF24 on the dialog
   surface #1E293B 9.3 (title text), its tint over the surface is decoration only. */
:root {
  --c-warn: #FBBF24;
  --c-warn-bg: rgba(251, 191, 36, 0.08);
  --free-date-w: 54px;
  --free-dow-ls: 0.06em;
  --free-list-max-w: 760px;
}

/* Booking dialog, round 2 (GMA-379, css/booking.css). The class box is the brand red over the
   dialog surface #1E293B (composite about #3C1F33): name #F1F5F9 13.1, kicker #FFD7DD 11.6, date
   and time #FFE4E8 12.4, all AA; its border is the brand red (decoration). The under-18 block has
   only a red border, no tint (its text is the dialog's own). Link-styled buttons
   #FFC2CC on the surface 10.4. Inputs are 36px tall; tapped controls keep --touch (44px). */
:root {
  --c-class-box-bg: rgba(196, 30, 58, 0.16);
  --c-class-box-kicker: #FFD7DD;
  --c-class-box-when: #FFE4E8;
  --c-link-accent: #FFC2CC;
  --class-box-pad: 9px 12px;
  --minor-box-pad: 10px 12px;
  --booking-gap: 12px;
  --input-h-compact: 36px;
  --input-pad-compact: 6px 10px;
  --check-size-sm: 18px;
  --switch-w: 36px;
  --switch-h: 20px;
  --switch-thumb: 14px;
  --switch-gap: 2px;
}

/* Program schedules (GMA-380, GMA-381; css/schedule.css and css/program-page.css). No new page
   colors: the featured band's when block is the raised surface, the Class times card is the
   surface with its rows on the page navy, the tags, the card's top border and the row accents are
   the program palette above. Contrast: text #F1F5F9 on raised #283548 11.32, muted #94A3B8 on
   raised 4.84; card kicker #94A3B8 on surface #1E293B 5.71; row class name #F1F5F9 on bg #0F172A
   16.30, day, time and note #94A3B8 on bg 6.96 (all AA). A tag uses its program's background /
   text pair (AA, see the palette). The card's top border and the row accents are decoration: the
   program tab and the panel carry the meaning. The program page hero reuses the program photo
   mapping (css/programs.css) with the hero scrim; without a photo it is the band navy with a tint
   of the program color on top. */
:root {
  --when-pad-y: 12px;
  --when-pad-x: 14px;
  --when-main-size: 18px;
  --schedule-day-w: 3.25rem;
  --schedule-row-pad-y: 8px;
  --schedule-row-pad-x: 12px;
  --class-times-min-w: 260px;    /* the card's narrowest width next to the plans, from 900px */
  --class-times-day-w: 2.75rem;  /* the day column of a Class times row ("TUE") */
  --plan-min-w: 240px;           /* a plan card's narrowest width next to the Class times card */
  --program-page-max-w: 40rem;
  --program-hero-min-h: 44vh;
  --program-tint: 45%;           /* program color over the band navy when a program has no photo */
}

/* Section links, phone menu and Back to top (GMA-379, css/nav.css). No new colors: the header,
   surface and brand red above. The WhatsApp bubble size is named so Back to top can stack above
   it (the bubble itself still sizes from css/landing.css). */
:root {
  --wa-bubble-size: 56px;
}