/* ============================================================================
   Academia Canaán — Design Tokens
   Drop this file into any project and reference the CSS variables below.
   Single source of truth for color, type, radius, shadow and spacing.
   ============================================================================ */

:root {
  /* --------------------------------------------------------------------------
     COLOR — Primary palette
     Greens are the lead brand color (taken from the institutional logo).
     Navy is the secondary, used for headlines, structure, and dark surfaces.
     -------------------------------------------------------------------------- */

  /* Green scale — leaf / growth */
  --green-50:  #ecf9e8;
  --green-100: #d6f0cd;
  --green-200: #b1e3a2;
  --green-400: #6ed05a;
  --green-500: #4ec03d;
  --green-600: #3aab2a;  /* primary CTA */
  --green-700: #2a8b1f;  /* primary hover, headings accent */
  --green-800: #1f6917;
  --green-900: #133f0e;

  /* Navy scale — structure / authority */
  --navy-50:  #eef2fb;
  --navy-100: #d8e0f3;
  --navy-300: #8da0d2;
  --navy-500: #2f4ea3;
  --navy-700: #1a3686;
  --navy-900: #0e2466;  /* default headline color */
  --navy-950: #061646;  /* deep footer */

  /* Accent — used sparingly for highlights / energy */
  --accent-amber: #f5c20f;

  /* Neutrals — warm cream */
  --cream-50:  #fbf8f1;
  --cream-100: #f6f1e4;
  --cream-200: #ede5d0;

  /* Ink scale — for body text */
  --ink-900: #14171c;  /* default body */
  --ink-700: #353a44;  /* muted body */
  --ink-500: #5c6270;  /* secondary / captions */
  --ink-300: #a7acb5;  /* disabled / dividers on dark */

  /* --------------------------------------------------------------------------
     SURFACES
     -------------------------------------------------------------------------- */
  --bg:      #fbfaf6;  /* page background — warm off-white */
  --surface: #ffffff;  /* cards, forms */
  --line:    #e6e2d6;  /* dividers, borders */

  /* --------------------------------------------------------------------------
     SEMANTIC ROLES
     Always prefer these over raw palette tokens in components.
     -------------------------------------------------------------------------- */
  --color-text:           var(--ink-900);
  --color-text-muted:     var(--ink-700);
  --color-text-subtle:    var(--ink-500);
  --color-heading:        var(--navy-900);
  --color-heading-accent: var(--green-700);   /* for <em> inside headings */
  --color-primary:        var(--green-600);
  --color-primary-hover:  var(--green-700);
  --color-on-primary:     #ffffff;
  --color-secondary:      var(--navy-900);
  --color-on-secondary:   #ffffff;
  --color-border:         var(--line);
  --color-bg:             var(--bg);
  --color-surface:        var(--surface);
  --color-surface-alt:    var(--cream-50);
  --color-success:        var(--green-700);
  --color-danger:         #c0392b;

  /* --------------------------------------------------------------------------
     TYPOGRAPHY
     Display = Newsreader (serif, italic for emphasis)
     Body    = Manrope (sans, 400/500/600/700)
     Mono    = IBM Plex Mono (labels, code, eyebrows)
     -------------------------------------------------------------------------- */
  --font-display: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Type scale (fluid, clamp) */
  --fs-display:   clamp(40px, 6vw, 72px);
  --fs-h1:        clamp(40px, 5.5vw, 64px);
  --fs-h2:        clamp(32px, 4vw, 48px);
  --fs-h3:        26px;
  --fs-h4:        20px;
  --fs-lead:      18px;
  --fs-body:      16px;
  --fs-small:     14px;
  --fs-eyebrow:   12px;

  --lh-tight:     1.02;
  --lh-snug:      1.15;
  --lh-normal:    1.55;
  --lh-loose:     1.65;

  --ls-tight:     -0.02em;
  --ls-snug:      -0.015em;
  --ls-wide:      0.04em;
  --ls-eyebrow:   0.18em;

  /* --------------------------------------------------------------------------
     SHAPE — radii
     -------------------------------------------------------------------------- */
  --radius-sm:    10px;
  --radius:       16px;
  --radius-lg:    24px;
  --radius-pill:  999px;

  /* --------------------------------------------------------------------------
     ELEVATION — shadows tinted with brand navy
     -------------------------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(17,34,72,0.04), 0 1px 3px rgba(17,34,72,0.04);
  --shadow:    0 4px 12px rgba(17,34,72,0.06), 0 2px 4px rgba(17,34,72,0.04);
  --shadow-lg: 0 24px 48px -16px rgba(17,34,72,0.18), 0 8px 16px -8px rgba(17,34,72,0.08);
  --shadow-cta: 0 6px 16px -4px rgba(58,171,42,0.45);

  /* --------------------------------------------------------------------------
     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: 100px;

  /* --------------------------------------------------------------------------
     LAYOUT
     -------------------------------------------------------------------------- */
  --container-max: 1240px;
  --container-pad: 32px;

  /* --------------------------------------------------------------------------
     MOTION
     -------------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* --------------------------------------------------------------------------
     GRADIENTS — brand-approved
     -------------------------------------------------------------------------- */
  --grad-header-stripe: linear-gradient(90deg, var(--green-600) 0%, var(--green-500) 35%, var(--navy-900) 100%);
  --grad-green-card:    linear-gradient(180deg, var(--green-50) 0%, var(--surface) 60%);
  --grad-navy-card:     linear-gradient(180deg, var(--navy-50) 0%, var(--surface) 60%);
  --grad-green-deep:    linear-gradient(160deg, var(--green-600) 0%, var(--green-800) 100%);
}