/* ============================================================
   DESIGN TOKENS
   ============================================================ */

:root {

  /* ----------------------------------------------------------
     COLOR — PALETTE
     Source colors: #2B6D54 (teal green), #99A2AE (blue-gray)
     All text tokens verified ≥ 4.5:1 contrast (WCAG AA).
     #99A2AE is decorative-only (~2.4:1) — never use for text.
     ---------------------------------------------------------- */

  /* Brand */
  --color-green:        #2B6D66;   /* contrast on white: 4.9:1 ✓ */
  --color-green-dark:   #205750;   /* hover / pressed state */
  --color-green-light:  #EBF2F1;   /* tinted wash, bg use only */
  --color-slate:        #99A2AE;   /* decorative only — borders, frames */
  --color-slate-dark:   #7A8491;   /* darker slate — still decorative only */

  /* Neutrals — slight cool green-gray tint */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F4F5F4;   /* page background */
  --color-neutral-100:  #EDEEED;   /* surface / card bg */
  --color-neutral-200:  #D8DCDA;   /* borders */
  --color-neutral-300:  #C0C6C3;   /* disabled states */
  --color-neutral-500:  #7A8480;   /* placeholder text — 3.9:1, large text only */
  --color-neutral-600:  #5A6670;   /* muted text — 4.95:1 on bg ✓ AA */
  --color-neutral-800:  #2A3330;   /* secondary text */
  --color-neutral-900:  #1A221C;   /* primary text — 14.3:1 ✓ AAA */

  /* Semantic */
  --color-bg:           var(--color-neutral-50);
  --color-surface:      var(--color-neutral-100);
  --color-border:       var(--color-neutral-200);
  --color-text:         var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-800);
  --color-text-muted:   var(--color-neutral-600);   /* 4.95:1 on --color-bg ✓ */
  --color-link:         var(--color-green);
  --color-link-hover:   var(--color-green-dark);
  --color-accent:       var(--color-green);
  --color-accent-hover: var(--color-green-dark);
  --color-accent-wash:  var(--color-green-light);

  /* ----------------------------------------------------------
     TYPOGRAPHY
     ---------------------------------------------------------- */

  --font-sans:  'Work Sans', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* Size scale — Minor Third (1.2) from 16px base */
  --text-xs:   0.8125rem;  /* 13px */
  --text-ui:   0.9375rem;  /* 15px — nav links, buttons */
  --text-sm:   var(--text-xs); /* alias — same size, kept for compatibility */
  --text-base: 1rem;       /* 16px */
  --text-body: 1.125rem;   /* 18px — body copy, meta values, team list */
  --text-md:   1.2rem;     /* 19px */
  --text-lg:   1.44rem;    /* 23px */
  --text-xl:   1.728rem;   /* 28px */
  --text-2xl:  2.074rem;   /* 33px */
  --text-3xl:  2.488rem;   /* 40px */
  --text-4xl:  2.986rem;   /* 48px */

  /* Weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* Line heights */
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.6;
  --leading-loose:   1.8;

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.09em;

  /* ----------------------------------------------------------
     SPACING (4px base)
     ---------------------------------------------------------- */

  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* ----------------------------------------------------------
     LAYOUT
     ---------------------------------------------------------- */

  --width-content: 680px;
  --width-wide:    960px;
  --width-full:   1200px;
  --gutter:        var(--space-6);

  /* ----------------------------------------------------------
     BORDERS & RADII
     ---------------------------------------------------------- */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-thin:   1px solid var(--color-border);
  --border-medium: 2px solid var(--color-border);
  --border-accent: 2px solid var(--color-accent);

  /* ----------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------- */

  --shadow-sm:  0 1px 3px rgba(26,34,28,.06), 0 1px 2px rgba(26,34,28,.04);
  --shadow-md:  0 4px 12px rgba(26,34,28,.08), 0 2px 4px rgba(26,34,28,.04);
  --shadow-lg:  0 12px 32px rgba(26,34,28,.10), 0 4px 8px rgba(26,34,28,.05);

  /* ----------------------------------------------------------
     MOTION
     ---------------------------------------------------------- */

  --duration-fast:  120ms;
  --duration-base:  200ms;
  --duration-slow:  350ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);

  /* ----------------------------------------------------------
     ANNOTATION COMPONENT
     ---------------------------------------------------------- */

  --annotation-col-width:     260px;
  --annotation-gap:           var(--space-8);
  --annotation-dot-size:      1.375rem;
  --annotation-dot-bg:        var(--color-green);
  --annotation-dot-color:     #fff;
  --annotation-dot-font-size: var(--text-xs);

}