/* ========================================================================
   Equiti Design System — Colors, Type, Spacing, Shadows
   Source: Claude Design project c68e5e61-5700-45b1-9faa-5ca2c42eb9d6
           (colors_and_type.css) — font paths rewritten for this project.
   LIGHT-FIRST: :root semantic tokens are light mode. Dark is an
   intentional contrast layer — apply .theme-dark to a section, never
   the whole page by default.
   ======================================================================== */

/* ---- FONTS ---- */
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Gilroy'; src:url('../assets/fonts/Gilroy-Heavy.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('../assets/fonts/Inter-Variable.ttf') format('truetype-variations'); font-weight:100 900; font-style:normal; font-display:swap; }

:root {
  /* === BRAND / PRIMARY === */
  --equiti-teal: #00AFAB;
  --equiti-black: #0E1420;
  --equiti-white: #FFFFFF;
  --equiti-button-teal: #81D8D0;

  /* === SECONDARY === */
  --equiti-blue: #2E90FA;
  --equiti-yellow: #FAC515;

  /* === 2026 MINI BRAND KIT === */
  --equiti-neon-teal: #03F9EC;   /* Neon Teal — highlight bars, markers, underlines on light surfaces */
  /* Primary hues (light→dark tint ramp of the brand teal) */
  --primary-hue-50:  #E0F4F4;
  --primary-hue-100: #C4ECEB;
  --primary-hue-200: #95E7E5;
  --primary-hue-300: #62E7E4;
  --primary-hue-400: #2ECECB;
  /* Secondary motifs (use sparingly — collage accents, data viz, campaign art) */
  --secondary-rust:    #C43B18;
  --secondary-red:     #E40000;
  --secondary-magenta: #FE027D;
  --secondary-coral:   #FF5532;
  --secondary-orange:  #FF8F2E;
  --secondary-gold:    #D8A300;
  --secondary-yellow:  #FBDA21;
  --secondary-aqua:    #63D2CE;
  --secondary-cyan:    #00ACC9;
  --secondary-sky:     #009FDC;
  --secondary-azure:   #3F8EF9;
  --secondary-blue:    #0069FD;
  --secondary-cobalt:  #0057CE;
  --secondary-navy:    #0D0D76;
  --secondary-ink:     #020204;

  /* === SEMANTIC / SYSTEM === */
  --color-error:    #F04438;
  --color-warning:  #F79009;
  --color-success:  #17B26A;
  --color-info:     #2E90FA;

  /* === TEAL SCALE === */
  --teal-50:  #EFFDFD;
  --teal-100: #CCF7F3;
  --teal-200: #99E5E1;
  --teal-300: #5CC6F3;
  --teal-400: #33C1BD;
  --teal-500: #00AFAB;
  --teal-600: #008DB9;
  --teal-700: #006B67;
  --teal-800: #004A45;
  --teal-900: #002922;
  --teal-950: #000700;

  /* === NEUTRAL SCALE === */
  --neutral-50:  #F9FAFB;
  --neutral-100: #F2F4F7;
  --neutral-200: #EAECF0;
  --neutral-300: #D0D5DD;
  --neutral-400: #98A2B3;
  --neutral-500: #667085;
  --neutral-600: #475467;
  --neutral-700: #344054;
  --neutral-800: #182230;
  --neutral-900: #101828;
  --neutral-950: #0E1420;

  /* === SEMANTIC FG / BG (Light) === */
  --fg-primary:   #0E1420;  /* main text */
  --fg-secondary: #344054;  /* subheads */
  --fg-tertiary:  #475467;  /* body secondary */
  --fg-muted:     #667085;  /* placeholder / disabled */
  --fg-inverse:   #FFFFFF;
  --fg-brand:     #00AFAB;
  --fg-link:      #00AFAB;

  --bg-primary:   #FFFFFF;
  --bg-secondary: #F9FAFB;
  --bg-tertiary:  #F2F4F7;
  --bg-dark:      #0E1420;
  --bg-dark-alt:  #182230;
  --bg-brand:     #00AFAB;
  --bg-brand-soft:#EFFDFD;

  --border-subtle:  #EAECF0;
  --border-default: #D0D5DD;
  --border-strong:  #98A2B3;

  /* === TYPE FAMILIES === */
  --font-display: 'Gilroy', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', 'Helvetica', 'Arial', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* === TYPE SCALE (exact Equiti tokens) === */
  --text-display-2xl: 72px; --lh-display-2xl: 90px;
  --text-display-xl:  60px; --lh-display-xl:  72px;
  --text-display-lg:  48px; --lh-display-lg:  60px;
  --text-display-md:  36px; --lh-display-md:  44px;
  --text-display-sm:  30px; --lh-display-sm:  38px;
  --text-display-xs:  24px; --lh-display-xs:  32px;
  --text-xl: 20px; --lh-xl: 30px;
  --text-lg: 18px; --lh-lg: 28px;
  --text-md: 16px; --lh-md: 24px;
  --text-sm: 14px; --lh-sm: 20px;
  --text-xs: 12px; --lh-xs: 18px;

  /* === SPACING — 8px base === */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* === RADIUS === */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-xs: 0 1px 2px rgba(14,20,32,.05);
  --shadow-sm: 0 1px 3px rgba(14,20,32,.1), 0 1px 2px rgba(14,20,32,.06);
  --shadow-md: 0 4px 8px -2px rgba(14,20,32,.1), 0 2px 4px -2px rgba(14,20,32,.06);
  --shadow-lg: 0 12px 16px -4px rgba(14,20,32,.08), 0 4px 6px -2px rgba(14,20,32,.03);
  --shadow-xl: 0 20px 24px -4px rgba(14,20,32,.08), 0 8px 8px -4px rgba(14,20,32,.03);
  --shadow-focus-teal: 0 0 0 4px rgba(0,175,171,.24);

  /* === MOTION === */
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ==== SEMANTIC TYPE ROLES ==== */
.t-display-2xl { font-family:var(--font-display); font-weight:700; font-size:var(--text-display-2xl); line-height:var(--lh-display-2xl); letter-spacing:-0.02em; color:var(--fg-primary); }
.t-display-xl  { font-family:var(--font-display); font-weight:700; font-size:var(--text-display-xl);  line-height:var(--lh-display-xl);  letter-spacing:-0.02em; color:var(--fg-primary); }
.t-display-lg  { font-family:var(--font-display); font-weight:700; font-size:var(--text-display-lg);  line-height:var(--lh-display-lg);  letter-spacing:-0.02em; color:var(--fg-primary); }
.t-display-md  { font-family:var(--font-display); font-weight:600; font-size:var(--text-display-md);  line-height:var(--lh-display-md);  letter-spacing:-0.02em; color:var(--fg-primary); }
.t-display-sm  { font-family:var(--font-display); font-weight:600; font-size:var(--text-display-sm);  line-height:var(--lh-display-sm);  color:var(--fg-primary); }
.t-display-xs  { font-family:var(--font-display); font-weight:600; font-size:var(--text-display-xs);  line-height:var(--lh-display-xs);  color:var(--fg-primary); }
.t-xl  { font-family:var(--font-body); font-weight:400; font-size:var(--text-xl); line-height:var(--lh-xl); color:var(--fg-primary); }
.t-lg  { font-family:var(--font-body); font-weight:400; font-size:var(--text-lg); line-height:var(--lh-lg); color:var(--fg-primary); }
.t-md  { font-family:var(--font-body); font-weight:400; font-size:var(--text-md); line-height:var(--lh-md); color:var(--fg-primary); }
.t-sm  { font-family:var(--font-body); font-weight:400; font-size:var(--text-sm); line-height:var(--lh-sm); color:var(--fg-tertiary); }
.t-xs  { font-family:var(--font-body); font-weight:500; font-size:var(--text-xs); line-height:var(--lh-xs); color:var(--fg-muted); letter-spacing:.02em; }

/* Dark theme override — intentional contrast blocks only */
.theme-dark {
  --fg-primary:#FFFFFF;
  --fg-secondary:#EAECF0;
  --fg-tertiary:#98A2B3;
  --fg-muted:#667085;
  --bg-primary:#0E1420;
  --bg-secondary:#101828;
  --bg-tertiary:#182230;
  --border-subtle:#182230;
  --border-default:#344054;
  --border-strong:#475467;
}

/* ========================================================================
   VIDEO-SPECIFIC: status tokens (see BUILD-SPEC.md §2)
   Status carries the entire "not delivered" message — no timeline exists.
   ======================================================================== */
:root {
  --status-progress: var(--equiti-teal);      /* in progress   */
  --status-testing:  var(--secondary-sky);    /* testing phase */
  --status-blocked:  var(--color-warning);    /* blocked       */
  /* Both greys are set dark enough to survive the treatment applied on top of
     them. --neutral-400 at the mandated 0.4 paused opacity measured 1.42:1 and
     --neutral-300 on the floor plate measured 1.29:1 — below the threshold of
     visibility from across a room, which breaks the "ghosted must still be
     countable" rule. The hollow/dashed treatment, not the lightness, is what
     carries "paused" and "not started". */
  --status-paused:   var(--neutral-600);      /* paused — ghosted wireframe */
  --status-pipeline: var(--neutral-500);      /* pipeline — outline only    */

  /* No ring ever renders solid. A solid ring reads as shipped. */
  --ring-dash: 6 10;
  --ring-dash-tight: 3 6;
}