/* =============================================================
   ARNDLY LIVE — Colors & Type Foundation
   Brand: deep forest green (#004225), warm orange (#ffa500), white.
   Fonts loaded via Google Fonts CDN (see fonts/README.md).
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- BRAND CORE ---------- */
  --arndly-green: #004225;   /* primary — deep forest green */
  --arndly-orange: #ffa500;  /* accent — warm orange */
  --arndly-white: #ffffff;

  /* ---------- GREEN SCALE (primary) ---------- */
  --green-950: #00190e;
  --green-900: #00250f;
  --green-800: #003219;
  --green-700: #003a1f;
  --green-600: #004225;  /* base brand green */
  --green-500: #0a5a35;
  --green-400: #2c7b50;
  --green-300: #5a9d75;
  --green-200: #9cc4af;
  --green-100: #d3e6dc;
  --green-50:  #eef6f1;

  /* ---------- ORANGE SCALE (accent) ---------- */
  --orange-900: #5f3b00;
  --orange-800: #8f5900;
  --orange-700: #b87200;
  --orange-600: #e08e00;
  --orange-500: #ffa500;  /* base brand orange */
  --orange-400: #ffb733;
  --orange-300: #ffca66;
  --orange-200: #ffdd99;
  --orange-100: #ffedca;
  --orange-50:  #fff7e8;

  /* ---------- WARM NEUTRALS ---------- */
  --neutral-950: #14110d;
  --neutral-900: #211d18;
  --neutral-800: #353029;
  --neutral-700: #4d473e;
  --neutral-600: #6b6358;
  --neutral-500: #8c8377;
  --neutral-400: #b1a99e;
  --neutral-300: #d2ccc3;
  --neutral-200: #e7e2da;
  --neutral-100: #f3f0eb;
  --neutral-50:  #faf8f4;

  /* ---------- SEMANTIC SURFACES (light theme default) ---------- */
  --bg:        var(--neutral-50);   /* app canvas */
  --bg-elev:   #ffffff;             /* cards, panels */
  --bg-sunken: var(--neutral-100);  /* wells, inputs */
  --border:    var(--neutral-200);
  --border-strong: var(--neutral-300);

  /* ---------- SEMANTIC TEXT ---------- */
  --fg1: var(--neutral-900);  /* primary text */
  --fg2: var(--neutral-600);  /* secondary text */
  --fg3: var(--neutral-500);  /* tertiary / captions */
  --fg-on-green: #f4faf6;     /* text on green surfaces */
  --fg-on-orange: #3a1e08;    /* text on orange surfaces */

  /* ---------- SEMANTIC ACCENTS ---------- */
  --primary: var(--green-600);
  --primary-hover: var(--green-700);
  --primary-press: var(--green-800);
  --accent: var(--orange-500);
  --accent-hover: var(--orange-600);
  --accent-press: var(--orange-700);
  --focus-ring: color-mix(in oklch, var(--orange-500) 55%, transparent);

  /* ---------- STATUS ---------- */
  --success: #2c7b50;
  --success-bg: #e7f3ec;
  --warning: #d9892f;
  --warning-bg: #fdf1e0;
  --danger:  #c0432f;
  --danger-bg: #fbe9e5;
  --info:    #2f6d8a;
  --info-bg: #e6f1f5;
  --live:    #e23b2e;  /* "LIVE" broadcast indicator red */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE (1.250 major-third) ---------- */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-lg:   1.25rem;   /* 20 */
  --text-xl:   1.563rem;  /* 25 */
  --text-2xl:  1.953rem;  /* 31 */
  --text-3xl:  2.441rem;  /* 39 */
  --text-4xl:  3.052rem;  /* 49 */
  --text-5xl:  3.815rem;  /* 61 */
  --text-6xl:  4.768rem;  /* 76 */

  /* ---------- WEIGHTS ---------- */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extrabold: 800;

  /* ---------- LINE HEIGHTS ---------- */
  --leading-tight: 1.08;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------- SPACING (4px base) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;

  /* ---------- SHADOWS (warm-tinted, soft) ---------- */
  --shadow-xs: 0 1px 2px rgba(20, 17, 13, 0.06);
  --shadow-sm: 0 2px 6px rgba(20, 17, 13, 0.08);
  --shadow-md: 0 8px 20px rgba(20, 17, 13, 0.10);
  --shadow-lg: 0 18px 40px rgba(20, 17, 13, 0.14);
  --shadow-green: 0 14px 34px rgba(0, 66, 37, 0.28);
  --shadow-orange: 0 10px 28px rgba(255, 165, 0, 0.38);

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 380ms;
}

/* =============================================================
   SEMANTIC TYPE CLASSES
   ============================================================= */
.display-1 { font-family: var(--font-display); font-weight: var(--w-extrabold); font-size: var(--text-6xl); line-height: var(--leading-tight); letter-spacing: -0.03em; color: var(--fg1); }
.display-2 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--text-5xl); line-height: var(--leading-tight); letter-spacing: -0.025em; color: var(--fg1); }
h1, .h1 { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: -0.02em; color: var(--fg1); }
h2, .h2 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-3xl); line-height: var(--leading-snug); letter-spacing: -0.015em; color: var(--fg1); }
h3, .h3 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-2xl); line-height: var(--leading-snug); letter-spacing: -0.01em; color: var(--fg1); }
h4, .h4 { font-family: var(--font-display); font-weight: var(--w-semibold); font-size: var(--text-xl); line-height: var(--leading-snug); color: var(--fg1); }
.lead { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg2); }
.body, p { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--fg1); }
.body-sm { font-family: var(--font-body); font-weight: var(--w-regular); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--fg2); }
.caption { font-family: var(--font-body); font-weight: var(--w-medium); font-size: var(--text-xs); line-height: var(--leading-normal); color: var(--fg3); }
.overline { font-family: var(--font-body); font-weight: var(--w-semibold); font-size: var(--text-xs); line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.code, code { font-family: var(--font-mono); font-weight: var(--w-regular); font-size: 0.92em; }