/* Britt Broadcast — Design tokens
   Brand colors extracted from the official logo. Do not alter
   --green-600 or --black; derive new tones from these. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Open+Sans:wght@400;500;600&family=Roboto+Slab:wght@700&display=swap');

:root {
  /* ---- Brand color primitives ---- */
  --green-600: #239D48;   /* Primary green (logo) — 3.5:1 on white, accent/large-text/dark-bg use only */
  --green-700: #1B7A38;   /* Hover / pressed / small text on light — 5.1:1 on white, AA-safe as text/button fill */
  --green-800: #145C2A;   /* Pressed state for green-700 fills — 7.4:1 on white */
  --green-50:  #E9F6EE;   /* Light green tint backgrounds */
  --black:     #050707;   /* Brand black (logo) */
  --off-white: #F7F9F8;   /* Page background */
  --white:     #FFFFFF;

  /* ---- Neutral grays (green-tinted) ---- */
  --gray-900: #171B19;
  --gray-700: #3C433F;
  --gray-500: #67716B;
  --gray-300: #C7D0CA;
  --gray-200: #E2E8E4;

  /* ---- Semantic aliases ---- */
  --color-primary:        var(--green-600);
  --color-primary-hover:  var(--green-700);
  --color-primary-active: var(--green-800);
  --color-primary-tint:   var(--green-50);
  --color-primary-text:   var(--green-700); /* AA-safe green for links and small text on light surfaces */
  --surface-page:         var(--off-white);
  --surface-card:         var(--white);
  --surface-dark:         var(--black);
  --surface-dark-raised:  #0D1310;
  --text-heading:         var(--black);
  --text-body:            var(--gray-700);
  --text-muted:           var(--gray-500);
  --text-on-dark:         #F2F5F3;
  --text-on-dark-muted:   #9DA8A2;
  --border:               var(--gray-200);
  --border-strong:        var(--gray-300);
  --border-on-dark:       rgba(255, 255, 255, 0.10);

  /* ---- Typography ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', sans-serif;
  --font-nav:     'Roboto Slab', Georgia, serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;    /* 12 — captions, micro-labels, footer text */
  --text-sm:   0.875rem;   /* 14 — secondary text */
  --text-base: 1rem;       /* 16 — body */
  --text-lg:   1.125rem;   /* 18 — lead paragraphs */
  --text-xl:   1.375rem;   /* 22 — card titles */
  --text-2xl:  1.75rem;    /* 28 — sub-headings */
  --text-3xl:  2.25rem;    /* 36 — section headings */
  --text-4xl:  3rem;       /* 48 — page headings */
  --text-5xl:  3.75rem;    /* 60 — hero */

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.6;
  --tracking-caps: 0.14em;

  /* ---- Spacing scale ---- */
  --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;

  /* ---- Shape ---- */
  --radius: 8px;
  --radius-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-sm: 0 1px 2px rgba(5, 7, 7, 0.05);
  --shadow-md: 0 2px 6px rgba(5, 7, 7, 0.05), 0 10px 28px rgba(5, 7, 7, 0.07);
  --shadow-lift: 0 4px 10px rgba(5, 7, 7, 0.06), 0 18px 40px rgba(5, 7, 7, 0.12);

  /* ---- Motion (restrained, purposeful) ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 300ms;
}