/* ==========================================================================
   Eduvantage — Design Tokens
   Generated from design.md v1.0. Do not hardcode colour outside this file.
   ========================================================================== */

@font-face {
  font-family: 'Satoshi';
  src: url('https://api.fontshare.com/v2/css?f[]=satoshi@500,800,900&display=swap');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- Teal --- */
  --ev-teal-50:#EFFAFA; --ev-teal-100:#D7F3F3; --ev-teal-200:#ADE7E8;
  --ev-teal-300:#7FD8D9; --ev-teal-400:#50C4C5; --ev-teal-500:#38ACAD;
  --ev-teal-600:#2C8E8F; --ev-teal-700:#267273; --ev-teal-800:#205A5B;
  --ev-teal-900:#133838;

  /* --- Navy --- */
  --ev-navy-50:#F5F7FA; --ev-navy-100:#E6EBF2; --ev-navy-200:#C8D3E1;
  --ev-navy-300:#A3B5CB; --ev-navy-400:#7691B0; --ev-navy-500:#4B6C92;
  --ev-navy-600:#35577A; --ev-navy-700:#264563; --ev-navy-800:#1C334A;
  --ev-navy-900:#101D2B;

  /* --- Green --- */
  --ev-green-50:#EFF9F4; --ev-green-100:#D6F0E4; --ev-green-200:#A9E1C7;
  --ev-green-300:#6FCBA3; --ev-green-400:#35B07E; --ev-green-500:#0C8B5A;
  --ev-green-600:#037146; --ev-green-700:#035C39; --ev-green-800:#02452B;
  --ev-green-900:#012C1C;

  /* --- Sand --- */
  --ev-sand-50:#FCFBF2; --ev-sand-100:#F7F4DF; --ev-sand-200:#EEE9BE;
  --ev-sand-300:#DFD581; --ev-sand-400:#CFC35F; --ev-sand-500:#B8AB47;
  --ev-sand-600:#988D39; --ev-sand-700:#776E2D; --ev-sand-800:#565021;
  --ev-sand-900:#383414;

  /* --- Olive --- */
  --ev-olive-600:#717B3A; --ev-olive-700:#5C632F; --ev-olive-800:#444A24;

  /* --- Ink --- */
  --ev-ink-50:#F7F8FA; --ev-ink-100:#EDEFF3; --ev-ink-200:#DDE1E8;
  --ev-ink-300:#C3C9D4; --ev-ink-400:#9BA4B4; --ev-ink-500:#727D91;
  --ev-ink-600:#525C6E; --ev-ink-700:#3A4352; --ev-ink-800:#252C38;
  --ev-ink-900:#141922;

  /* --- Brand asset colours (logo artwork only) ---
     Sampled from Asset_1.png. These are deliberately NOT the UI palette:
     the logo yellow is far more saturated than sand-300 and must never
     carry text (1.4:1 on white). Use only for the logo itself. */
  --ev-logo-teal:#3DBFC0;
  --ev-logo-yellow:#F5DE3B;

  /* --- Status --- */
  --ev-success:#037146;  --ev-success-bg:#EFF9F4;
  --ev-warning:#92400E;  --ev-warning-bg:#FEF6E7;
  --ev-danger:#B91C1C;   --ev-danger-bg:#FEF0F0;
  --ev-info:#267273;     --ev-info-bg:#EFFAFA;

  /* --- Semantic --- */
  --ev-bg-page:var(--ev-ink-50);
  --ev-bg-surface:#FFFFFF;
  --ev-bg-sunken:var(--ev-ink-100);
  --ev-bg-brand:var(--ev-teal-400);
  --ev-bg-brand-subtle:var(--ev-teal-50);
  --ev-bg-inverse:var(--ev-navy-700);

  --ev-text-primary:var(--ev-navy-700);
  --ev-text-secondary:var(--ev-ink-600);
  --ev-text-tertiary:var(--ev-ink-500);
  --ev-text-disabled:var(--ev-ink-400);
  --ev-text-inverse:#FFFFFF;
  --ev-text-accent:var(--ev-green-600);

  --ev-border-subtle:var(--ev-ink-100);
  --ev-border-default:var(--ev-ink-200);
  --ev-border-strong:var(--ev-ink-300);
  --ev-border-accent:var(--ev-sand-300);
  --ev-border-focus:var(--ev-green-600);

  --ev-action-primary:var(--ev-green-600);
  --ev-action-primary-hover:var(--ev-green-700);
  --ev-action-primary-active:var(--ev-green-800);
  --ev-action-secondary:var(--ev-navy-700);
  --ev-action-secondary-hover:var(--ev-navy-800);

  /* --- Type --- */
  --ev-font:'Satoshi','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',
            Roboto,'Helvetica Neue',Arial,sans-serif;
  --ev-weight-display:800;
  --ev-weight-display-max:900;
  --ev-weight-body:500;

  /* --- Space --- */
  --ev-space-1:.25rem;  --ev-space-2:.5rem;   --ev-space-3:.75rem;
  --ev-space-4:1rem;    --ev-space-5:1.25rem; --ev-space-6:1.5rem;
  --ev-space-8:2rem;    --ev-space-10:2.5rem; --ev-space-12:3rem;
  --ev-space-16:4rem;   --ev-space-20:5rem;   --ev-space-24:6rem;
  --ev-space-32:8rem;

  /* --- Radius (square-first per design.md §5.1) --- */
  --ev-radius-none:0; --ev-radius-sm:2px; --ev-radius-md:4px;
  --ev-radius-lg:6px; --ev-radius-full:9999px;

  /* --- Elevation (navy-tinted, never pure black) --- */
  --ev-shadow-sm:0 1px 2px rgba(38,69,99,.06);
  --ev-shadow-md:0 2px 8px rgba(38,69,99,.08);
  --ev-shadow-lg:0 8px 24px rgba(38,69,99,.10);
  --ev-shadow-xl:0 16px 48px rgba(38,69,99,.14);

  /* --- Motion --- */
  --ev-motion-instant:100ms;
  --ev-motion-fast:160ms;
  --ev-motion-base:220ms;
  --ev-motion-slow:320ms;
  --ev-ease:cubic-bezier(.2,0,.2,1);

  /* --- Layout --- */
  --ev-container:1200px;
  --ev-container-narrow:720px;
  --ev-gutter:1.5rem;
  --ev-nav-h:72px;
}

@media (min-width:1024px){ :root{ --ev-gutter:3rem; } }