/* ============================================================
   Airlive — design tokens
   Philosophy: Modern Dark Product (Swiss-influenced functionalism)
   Generated by /design-tokens from .design/airlive-landing/DESIGN_BRIEF.md

   Dark-only. The brand lives on a dark background — there is no light theme.
   Components reference SEMANTIC tokens only — never raw hex.

   The embedded product mockups (multiview, mixer, switcher, Log preview)
   use the fixed --screen-* tokens so they always read as a dark broadcast
   app screen.
   ============================================================ */

:root {
  /* ---- brand (theme-independent) ---- */
  --brand-red:    #DC2626;
  --brand-pink:   #DC2626;   /* legacy alias name; value is brand red */
  --brand-purple: #7A1212;   /* legacy alias name; clean dark red (no purple cast) */
  --brand-glow:   #FF7A6E;
  --brand-soft:   #FFD60A;   /* solid accent → yellow (buttons, links, prices) */
  --brand-yellow: #FFD60A;
  --brand-blue:   #0A84FF;   /* toggles */
  --gradient-brand: linear-gradient(120deg, #DC2626 0%, #B81D1D 45%, #7A1212 100%);
  --gradient-brand-strong: linear-gradient(120deg, #DC2626, #7A1212);

  /* ---- color · semantic (DARK = default) ---- */
  --color-bg-primary:    #0A0A0B;
  --color-bg-secondary:  #16161A;   /* cards */
  --color-bg-tertiary:   #1C1C22;   /* inputs, wells, hovers */
  --color-bg-raised:     #101014;   /* alt band */
  --color-bg-inverse:    #EDEDED;

  --color-text-primary:    #EDEDED;
  --color-text-secondary:  #A0A0A8;
  --color-text-tertiary:   #6B6B73;
  --color-text-inverse:    #0A0A0B;
  --color-text-on-accent:  #FFFFFF;

  --color-border-primary:    #2A2A30;
  --color-border-secondary:  #202026;
  --color-border-focus:      var(--brand-soft);

  --color-accent-primary:        #DC2626;
  --color-accent-primary-hover:  #E13030;
  --color-accent-primary-active: #A01414;
  --color-accent-secondary:      #7A1212;
  --color-accent-contrast:       #FFD60A; /* solid accent → yellow */

  --color-status-success: #30D158;
  --color-status-warning: #FFD60A;
  --color-status-error:   #FF453A;
  --color-status-info:    #5AC8FA;

  --color-overlay: rgba(10,10,11,.72);

  /* ---- product "screen" tokens (FIXED dark, both themes) ---- */
  --screen-bg:      #101014;
  --screen-surface: #16161A;
  --screen-tile:    linear-gradient(135deg, #1a1a22, #101015);
  --screen-border:  #202026;
  --screen-text:    #EDEDED;
  --screen-text-2:  #A0A0A8;
  --screen-shadow:  0 40px 120px -40px rgba(0,0,0,.8);

  /* ---- spacing · 4px base ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ---- typography ---- */
  --font-family-display: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-body:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-family-mono:    "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---- TYPE SCALE — the single source of truth ----
     Every component sizes text with var(--fs-*). Do NOT hardcode rem values.
     Values are px-labelled at the 16px root. Steps rise ~1.1–1.15×. */
  --fs-micro:   0.65rem;    /* ~10 · tiny mono badges on compact UI only  */
  --fs-3xs:     0.72rem;    /* ~12 · mono micro-labels, dense meta        */
  --fs-2xs:     0.82rem;    /* ~13 · eyebrows, mono section labels        */
  --fs-xs:      0.9rem;     /* ~14 · captions, secondary links, footnotes */
  --fs-sm:      0.95rem;    /* ~15 · small / dense body                   */
  --fs-md:      1.0625rem;  /*  17 · BODY — default paragraph             */
  --fs-lg:      1.1875rem;  /*  19 · lead paragraphs, intros             */
  --fs-xl:      1.3rem;     /* ~21 · card titles, small headings          */
  --fs-2xl:     1.5rem;     /*  24 · sub-section headings                 */
  --fs-h2:      clamp(1.45rem, 2.6vw, 1.95rem);  /* fluid sub-heading      */
  --fs-h1:      clamp(1.9rem, 3.8vw, 2.7rem);    /* section / page titles  */
  --fs-display: clamp(2.4rem, 5.4vw, 3.9rem);    /* hero display           */

  /* legacy aliases → map onto the scale (kept in case anything references them) */
  --font-size-xs:   var(--fs-2xs);
  --font-size-sm:   var(--fs-xs);
  --font-size-base: var(--fs-md);
  --font-size-md:   var(--fs-lg);
  --font-size-lg:   var(--fs-xl);
  --font-size-xl:   var(--fs-2xl);
  --font-size-2xl:  var(--fs-h1);
  --font-size-3xl:  var(--fs-h1);
  --font-size-4xl:  var(--fs-display);

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:   1.08;
  --line-height-normal:  1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight:  -0.03em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.14em;

  /* ---- layout ---- */
  --max-width-content: 62ch;
  --max-width-wide:    960px;
  --max-width-page:    1120px;

  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 999px;

  --shadow-sm:    0 2px 6px rgba(0,0,0,.4);
  --shadow-md:    0 16px 40px -16px rgba(0,0,0,.6);
  --shadow-lg:    0 40px 120px -40px rgba(0,0,0,.8);
  --shadow-accent:0 6px 24px -8px rgba(216,31,38,.6);
  --shadow-focus: 0 0 0 3px rgba(255,90,82,.45);

  /* ---- motion ---- */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  700ms;

  --easing-default: cubic-bezier(.22,.61,.36,1);
  --easing-in:      cubic-bezier(.4,0,1,1);
  --easing-out:     cubic-bezier(0,0,.2,1);
  --easing-bounce:  cubic-bezier(.34,1.56,.64,1);

  /* ---- breakpoints (reference; media queries can't read vars) ---- */
  --breakpoint-sm:  375px;
  --breakpoint-md:  768px;
  --breakpoint-lg:  1024px;
  --breakpoint-xl:  1280px;

  color-scheme: dark;
}