/* BIPAM Tickets — design tokens
   Source of truth: design-system/bipam-tickets/brand-identity.md (from bipam.org)
   Dark-first site chrome (#141414, never pure black), brand gradient as CTA surface with INK text.
   Light theme available via [data-theme="light"].                                          */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Kanit:wght@400;600&family=Fira+Code:wght@400;500;600&display=swap');

:root {
  color-scheme: dark;

  /* Brand (sampled from the logo, top → bottom) */
  --brand-yellow: #FDC70B;
  --brand-orange: #F6923D;
  --brand-red:    #EE583D;
  --brand-accent: #FB5D38;   /* headings, active nav on bipam.org */
  --brand-teal:   #7ED6C4;   /* FWB tier label */
  --brand-violet: #B06BF0;   /* STANDARD tier label */
  --brand-gradient:   linear-gradient(180deg, var(--brand-yellow) 0%, var(--brand-orange) 50%, var(--brand-red) 100%);
  --brand-gradient-x: linear-gradient(100deg, var(--brand-yellow) 0%, var(--brand-orange) 55%, var(--brand-red) 100%);

  /* Surfaces */
  --bg:            #141414;
  --bg-elev:       #191919;
  --surface:       #1C1C1C;
  --surface-2:     #232323;
  --border:        #2E2E2E;
  --border-strong: #3A3A3A;

  /* Text (contrast on #141414: fg 15.8:1, muted 8.4:1, subtle 5.3:1) */
  --fg:            #F5F0EA;
  --fg-muted:      #B5AEA6;
  --fg-subtle:     #8F8781;
  --fg-on-accent:  #141414;   /* ink on gradient / yellow / orange — white fails AA */

  /* Accent + status */
  --accent:        var(--brand-accent);
  --accent-hot:    var(--brand-red);
  --accent-soft:   rgba(251,93,56,.14);
  --ring:          var(--brand-yellow);
  --ok:            #4ADE80;
  --ok-soft:       rgba(74,222,128,.14);
  --warn:          var(--brand-yellow);
  --warn-soft:     rgba(253,199,11,.14);
  --danger:        #F87171;
  --danger-soft:   rgba(248,113,113,.14);
  --info:          var(--brand-teal);
  --info-soft:     rgba(126,214,196,.14);

  /* Type — Barlow (DIN-derived) + Kanit for Thai glyphs; Fira Code for codes/prices */
  --font-sans: "Barlow", "Kanit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2vw, 3rem);
  --fs-hero: clamp(2.5rem, 1.4rem + 4.2vw, 5.5rem);
  --lh-tight: 1.05;
  --lh-body: 1.55;

  /* Spacing (density 4/10) */
  --space-xs: .25rem;
  --space-sm: .5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout — fluid, full-bleed. No max-width on the shell.
     Gutter scales with viewport: 16px on phones → 56px on wide screens. */
  --gutter: clamp(1rem, 2.5vw, 3.5rem);
  --header-h: 64px;
  --bottombar-h: 72px;
  --prose-measure: 72ch;
  --card-min: 280px;

  /* Radii + shadows */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 20px;
  --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.45);
  --glow: 0 0 0 3px rgba(253,199,11,.25);

  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 150ms;
  --dur: 220ms;
  --dur-slow: 350ms;

  /* Safe areas (notched phones, PWA) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:            #FAF7F2;
  --bg-elev:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F1ECE5;
  --border:        #E6E0D8;
  --border-strong: #CFC7BC;
  --fg:            #141414;
  --fg-muted:      #5E5852;
  --fg-subtle:     #857D75;
  --accent:        #D9482A;
  --accent-soft:   rgba(217,72,42,.12);
  --ok:            #15803D;
  --ok-soft:       rgba(21,128,61,.12);
  --warn:          #A16207;
  --warn-soft:     rgba(161,98,7,.12);
  --danger:        #B91C1C;
  --danger-soft:   rgba(185,28,28,.12);
  --info:          #0F766E;
  --info-soft:     rgba(15,118,110,.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 6px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);
}

/* Breakpoints used across all stylesheets (mobile-first):
   sm  ≥ 480px   large phones
   md  ≥ 768px   tablets
   lg  ≥ 1024px  laptops
   xl  ≥ 1440px  desktops
   2xl ≥ 1920px  wide / TV / box-office monitors                        */