/* ==========================================================================
   DESIGN TOKENS
   ==========================================================================
   Single source of truth for colors, type, spacing, radii, etc.
   Inferred from existing palette + DM Serif Display / Inter pairing.
   Verify against Figma when screenshots are provided.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     COLOR — Brand
     ---------------------------------------------------------------------- */
  --color-navy:            #16315A;          /* Primary brand navy */
  --color-navy-90:         #1F3D6A;          /* For hover/border accents */

  --color-teal:            #00B6AB;          /* Canonical brand teal */
  --color-teal-bright:     #00E0C1;          /* Accent teal (italic emphasis, on-dark) */
  --color-teal-dark:       #008A82;          /* Hover state for teal CTAs */

  /* ----------------------------------------------------------------------
     COLOR — Surfaces
     ---------------------------------------------------------------------- */
  --color-white:           #FFFFFF;
  --color-cream:           #F2F2EE;          /* Light section background */
  --color-cream-warm:      #F4F3F1;          /* Slight warm variant (news-related) */
  --color-black:           #0A0A0A;

  /* ----------------------------------------------------------------------
     COLOR — Status / Accent (impact accordion + status pills + year tags)
     ---------------------------------------------------------------------- */
  --color-accent-orange:   #F4A81D;
  --color-accent-lime:     #A2CF5F;
  --color-accent-purple:   #9381C2;        /* Accordion: Graduate Students */
  --color-status-green:    #5BAF8B;        /* Status pill: Completed */
  --color-status-orange:   #F4A81D;        /* Status pill: In Progress */
  --color-pink:            #D4146C;        /* Publications year tag */

  /* ----------------------------------------------------------------------
     COLOR — Semantic
     ---------------------------------------------------------------------- */
  --color-text:            var(--color-navy);
  --color-text-on-dark:    var(--color-white);
  --color-text-muted:      rgba(22, 49, 90, 0.7);
  --color-text-muted-on-dark: rgba(255, 255, 255, 0.8);
  --color-rule:            rgba(22, 49, 90, 0.1);

  /* Legacy aliases — keep so old selectors still resolve. Don't use in new code. */
  --color-teal-primary:    var(--color-teal-bright);
  --color-teal-secondary:  var(--color-teal);


  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Families
     ---------------------------------------------------------------------- */
  --font-display:          'DM Serif Display', Georgia, serif;
  --font-body:             'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Size scale (fluid using clamp)
     Base: 20px body, scale up for display headings.
     ---------------------------------------------------------------------- */
  --text-xs:     0.75rem;                                  /* 12px */
  --text-sm:     0.875rem;                                 /* 14px */
  --text-base:   1rem;                                     /* 16px */
  --text-md:     1.125rem;                                 /* 18px */
  --text-lg:     1.25rem;                                  /* 20px — body default */
  --text-xl:     1.375rem;                                 /* 22px — large body */

  /* Display sizes (headings) — fluid */
  --text-h6:     clamp(1.125rem, 1.6vw, 1.25rem);          /* 18–20px */
  --text-h5:     clamp(1.25rem,  2vw, 1.5rem);             /* 20–24px */
  --text-h4:     clamp(1.5rem,   2.4vw, 1.75rem);          /* 24–28px */
  --text-h3:     clamp(1.75rem,  3vw, 2.4rem);             /* 28–38px */
  --text-h2:     clamp(2.4rem,   5vw, 3.5rem);             /* 38–56px */
  --text-h1:     clamp(3rem,     7vw, 6.25rem);            /* 48–100px */
  --text-hero:   clamp(2.6rem,   6vw, 4.5rem);             /* hero subhead variant */

  /* ----------------------------------------------------------------------
     TYPOGRAPHY — Weights / line-heights / letter-spacing
     ---------------------------------------------------------------------- */
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  --lh-tight:     1.05;
  --lh-snug:      1.2;
  --lh-normal:    1.4;
  --lh-relaxed:   1.6;
  --lh-loose:     1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;


  /* ----------------------------------------------------------------------
     SPACING — 4px base unit
     ---------------------------------------------------------------------- */
  --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-7:    1.75rem;     /* 28px */
  --space-8:    2rem;        /* 32px */
  --space-10:   2.5rem;      /* 40px */
  --space-12:   3rem;        /* 48px */
  --space-14:   3.5rem;      /* 56px */
  --space-16:   4rem;        /* 64px */
  --space-18:   4.5rem;      /* 72px */
  --space-20:   5rem;        /* 80px */
  --space-24:   6rem;        /* 96px */
  --space-30:   7.5rem;      /* 120px */
  --space-36:   9rem;        /* 144px */

  /* Section vertical rhythm */
  --section-padding-y:        clamp(3rem, 6vw, 6rem);     /* 48–96px */
  --section-padding-y-large:  clamp(5rem, 10vw, 9rem);    /* 80–144px */


  /* ----------------------------------------------------------------------
     LAYOUT — Container
     ---------------------------------------------------------------------- */
  --container-max:        1400px;
  --container-narrow:     1200px;
  --container-text:       820px;                /* prose / readable text */
  --container-padding:    1.5rem;               /* 24px */
  --container-padding-sm: 1rem;                 /* 16px mobile */


  /* ----------------------------------------------------------------------
     RADII
     ---------------------------------------------------------------------- */
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --radius-2xl:   24px;
  --radius-pill:  999px;


  /* ----------------------------------------------------------------------
     BORDERS
     ---------------------------------------------------------------------- */
  --border-thin:  1px;
  --border-mid:   2px;
  --border-thick: 3px;


  /* ----------------------------------------------------------------------
     SHADOWS
     ---------------------------------------------------------------------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:    0 12px 32px rgba(0, 0, 0, 0.12);


  /* ----------------------------------------------------------------------
     TRANSITIONS
     ---------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;


  /* ----------------------------------------------------------------------
     Z-INDEX
     ---------------------------------------------------------------------- */
  --z-base:       1;
  --z-overlay:    10;
  --z-sticky:     50;
  --z-header:     100;
  --z-modal:      1000;


  /* ----------------------------------------------------------------------
     BREAKPOINTS (reference only — CSS can't use these in @media)
     Mirror these in @media (max-width: ...) queries.
     ---------------------------------------------------------------------- */
  /* --bp-sm:  640px;  */
  /* --bp-md:  768px;  */
  /* --bp-lg:  1024px; */
  /* --bp-xl:  1280px; */
  /* --bp-2xl: 1440px; */
}