/* ============================================================
   C. A. Broderick — design tokens
   Forest-green palette. Single source of truth for colour,
   type, spacing, elevation and motion.
   ============================================================ */

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

:root {
  /* ---- brand core ---- */
  --green-primary: #2d6a4f;   /* signature forest green — nav, headings, links */
  --green-dark:    #1b4332;   /* deep pine — gradient partner, footer */
  --green-deep:    #081c15;   /* darkest — dark bands */
  --green-mid:     #40916c;   /* mid green — hovers, accents */
  --green-bright:  #52b788;   /* bright green — accents on dark surfaces */
  --green-light:   #95d5b2;   /* sage — highlights on dark, hover text */
  --green-pale:    #d8f3dc;   /* pale wash — tags, tints */

  --off-white:     #f7f8f4;   /* warm paper — page background */
  --ink:           #22282a;   /* near-black — body text */
  --white:         #ffffff;   /* card surfaces */
  --slate:         #5a6b62;   /* muted body text */

  /* green tints for surfaces & states */
  --green-tint-08: rgba(45, 106, 79, 0.08);
  --green-tint-12: rgba(45, 106, 79, 0.12);
  --green-tint-20: rgba(45, 106, 79, 0.20);
  --green-tint-30: rgba(45, 106, 79, 0.30);

  /* ---- semantic aliases ---- */
  --surface-page:  var(--off-white);
  --surface-card:  var(--white);
  --surface-inset: var(--off-white);
  --surface-dark:  var(--green-deep);

  --text-body:     var(--ink);
  --text-muted:    var(--slate);
  --text-heading:  var(--green-primary);
  --text-on-green: var(--off-white);

  --accent:        var(--green-primary);
  --accent-strong: var(--green-dark);
  --accent-soft:   var(--green-light);
  --link:          var(--green-primary);
  --link-hover:    var(--green-mid);
  --focus-ring:    var(--green-mid);

  /* signature gradient — hero, featured cards, badges */
  --grad-brand: linear-gradient(135deg, var(--green-primary), var(--green-dark));
  --grad-brand-rev: linear-gradient(135deg, var(--green-dark), var(--green-primary));

  /* ---- typography ---- */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-body: var(--font-sans);
  --font-ui:   var(--font-sans);
  --font-data: var(--font-mono);

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --fs-hero:  3.25rem;
  --fs-h1:    2.2rem;
  --fs-h2:    1.6rem;
  --fs-h3:    1.2rem;
  --fs-lead:  1.2rem;
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-tag:   0.8rem;

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.65;

  --ls-eyebrow: 1.5px;
  --ls-caps:    1px;
  --ls-tight:   -0.01em;

  /* ---- spacing & radius ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3rem;
  --space-10: 4rem;
  --space-12: 6rem;

  --pad-card:      1.5rem;
  --gap-stack:     1.25rem;
  --gap-inline:    1.6rem;
  --section-gap:   4rem;
  --container-max: 1120px;
  --reading-max:   760px;
  --nav-height:    68px;

  --radius-xs:    6px;
  --radius-sm:    8px;
  --radius-lg:    14px;
  --radius-pill:  25px;
  --radius-tag:   15px;
  --radius-round: 50%;

  --border-hair:   1px solid rgba(45, 106, 79, 0.15);
  --border-accent: 4px solid var(--green-primary);

  /* ---- elevation & motion ---- */
  --shadow-sm:    0 2px 4px rgba(8, 28, 21, 0.08);
  --shadow-md:    0 6px 16px rgba(8, 28, 21, 0.14);
  --shadow-lg:    0 10px 30px rgba(8, 28, 21, 0.12);
  --shadow-green: 0 6px 20px rgba(45, 106, 79, 0.3);

  --dur-fast:  0.18s;
  --dur-base:  0.3s;
  --dur-slow:  0.6s;
  --dur-enter: 0.8s;

  --ease-standard: ease;
  --ease-out:      ease-out;
  --ease-in-out:   ease-in-out;

  --lift-card: translateY(-4px);
  --lift-btn:  translateY(-2px);
  --nudge-x:   translateX(8px);
  --press:     translateY(1px);
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}