/* ============================================================
   N3i Design System — Foundations
   Colours, type, spacing, radius, shadow

   Palette source: the official 9-colour N3i brand swatch sheet.
   Hexes are CANONICAL — do not change without updating brand docs.
   ============================================================ */

/* -------- Fonts (Google Fonts CDN) --------
   Display: Sora    — rounded geometric, friendly + technical
   Body:    Manrope — humanist with a soft, professional feel
   Mono:    JetBrains Mono
   ------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ============================================================
     CANONICAL BRAND COLOURS  (from N3i brand swatch sheet)
     ============================================================ */
  --n3i-light-blue: #269CCE;  /* primary brand */
  --n3i-dark-blue:  #2C2A86;  /* secondary / ring dots */
  --n3i-grey:       #313032;  /* deep ink / "i" body */
  --n3i-orange:     #F6891F;
  --n3i-red:        #EE3124;
  --n3i-pink:       #ED1C6F;
  --n3i-turquoise:  #01A19A;
  --n3i-purple:     #A42383;
  --n3i-green:      #8DC63F;

  /* ============================================================
     LIGHT BLUE — primary ramp
     ============================================================ */
  --n3i-light-blue-50:  #e7f4fb;
  --n3i-light-blue-100: #c0e2f3;
  --n3i-light-blue-200: #94cee9;
  --n3i-light-blue-300: #5cb4dc;  /* the "play triangle" tint */
  --n3i-light-blue-400: #269cce;  /* PRIMARY */
  --n3i-light-blue-500: #1d7ca3;
  --n3i-light-blue-600: #155d7a;
  --n3i-light-blue-700: #0d3e51;
  --n3i-light-blue-800: #061f29;

  /* ============================================================
     DARK BLUE — secondary / brand-serious ramp
     ============================================================ */
  --n3i-dark-blue-50:  #e7e6f2;
  --n3i-dark-blue-100: #c0bee0;
  --n3i-dark-blue-200: #8e8ec8;
  --n3i-dark-blue-300: #5d5cae;
  --n3i-dark-blue-400: #3f3d9c;
  --n3i-dark-blue-500: #2c2a86;  /* SECONDARY */
  --n3i-dark-blue-600: #211f66;
  --n3i-dark-blue-700: #161547;
  --n3i-dark-blue-800: #0b0a28;

  /* ============================================================
     ACCENT TINTS — each accent gets a soft 50 for backgrounds
     ============================================================ */
  --n3i-orange-50:    #ffeedd;
  --n3i-orange-100:   #ffd9b5;
  --n3i-orange-400:   #f6891f;
  --n3i-orange-600:   #c66807;

  --n3i-red-50:       #fde0dd;
  --n3i-red-100:      #fab8b1;
  --n3i-red-400:      #ee3124;
  --n3i-red-600:      #b81b10;

  --n3i-pink-50:      #fbdde9;
  --n3i-pink-100:     #f6b3cf;
  --n3i-pink-400:     #ed1c6f;
  --n3i-pink-600:     #b30f55;

  --n3i-turquoise-50: #d6f3f1;
  --n3i-turquoise-100:#a3e5e1;
  --n3i-turquoise-400:#01a19a;
  --n3i-turquoise-600:#017771;

  --n3i-purple-50:    #f1dbea;
  --n3i-purple-100:   #dfafd0;
  --n3i-purple-400:   #a42383;
  --n3i-purple-600:   #7a1761;

  --n3i-green-50:     #eef6dc;
  --n3i-green-100:    #d6ebb0;
  --n3i-green-400:    #8dc63f;
  --n3i-green-600:    #67932a;

  /* ============================================================
     GREY (charcoal) — based on brand grey #313032
     ============================================================ */
  --n3i-ink-0:    #ffffff;
  --n3i-ink-25:   #f9f9f9;   /* page background */
  --n3i-ink-50:   #f1f0f1;   /* subtle surface */
  --n3i-ink-100:  #e2e1e3;   /* hairline */
  --n3i-ink-200:  #c5c3c6;   /* default border */
  --n3i-ink-300:  #94939a;   /* placeholder */
  --n3i-ink-400:  #6a696d;   /* tertiary text */
  --n3i-ink-500:  #4e4d50;   /* secondary text */
  --n3i-ink-600:  #313032;   /* CANONICAL — body text */
  --n3i-ink-700:  #1f1e20;   /* strong */
  --n3i-ink-800:  #100f11;   /* deepest */

  /* ============================================================
     SEMANTIC TOKENS — referenced by components
     ============================================================ */

  /* Brand */
  --brand-primary:        var(--n3i-light-blue-400);  /* vivid brand blue — DECORATIVE / large graphics only (3.1:1 on white) */
  --brand-primary-strong: var(--n3i-light-blue-500);  /* AA-safe blue for solid fills w/ white text + links (4.7:1) */
  --brand-primary-hover:  var(--n3i-light-blue-600);
  --brand-primary-press:  var(--n3i-light-blue-700);
  --brand-primary-soft:   var(--n3i-light-blue-50);
  --brand-on-primary:     #ffffff;

  /* Interactive text (links, inline CTAs on light surfaces) — must be AA (>=4.5:1) */
  --link:       var(--n3i-light-blue-500);   /* 4.7:1 on white */
  --link-hover: var(--n3i-light-blue-600);   /* 6.9:1 on white */

  --brand-secondary:        var(--n3i-dark-blue-500);
  --brand-secondary-hover:  var(--n3i-dark-blue-600);
  --brand-secondary-soft:   var(--n3i-dark-blue-50);
  --brand-on-secondary:     #ffffff;

  /* Backgrounds */
  --bg-page:        var(--n3i-ink-25);
  --bg-surface:     var(--n3i-ink-0);
  --bg-surface-2:   var(--n3i-ink-50);
  --bg-inverse:     var(--n3i-dark-blue-700);
  --bg-brand-soft:  var(--n3i-light-blue-50);

  /* Foreground */
  --fg-1: var(--n3i-ink-600);    /* primary text — the brand grey */
  --fg-2: var(--n3i-ink-500);    /* secondary text */
  --fg-3: var(--n3i-ink-400);    /* tertiary text */
  --fg-4: var(--n3i-ink-300);    /* meta / disabled-ish */
  --fg-on-inverse:    #ffffff;
  --fg-on-inverse-2:  var(--n3i-dark-blue-100);

  /* Lines */
  --line-1: var(--n3i-ink-100);  /* subtle */
  --line-2: var(--n3i-ink-200);  /* default border */
  --line-3: var(--n3i-ink-300);  /* emphasized */
  --line-focus: var(--n3i-light-blue-400);

  /* Semantic — feedback */
  --success:     var(--n3i-green-400);
  --success-soft:var(--n3i-green-50);
  --success-ink: var(--n3i-green-600);
  --warning:     var(--n3i-orange-400);
  --warning-soft:var(--n3i-orange-50);
  --warning-ink: var(--n3i-orange-600);
  --danger:      var(--n3i-red-400);
  --danger-soft: var(--n3i-red-50);
  --danger-ink:  var(--n3i-red-600);
  --info:        var(--n3i-light-blue-400);
  --info-soft:   var(--n3i-light-blue-50);
  --info-ink:    var(--n3i-light-blue-600);

  /* ============================================================
     TYPE — Families
     ============================================================ */
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* TYPE — Scale (px) */
  --fs-display: 64px;
  --fs-h1: 48px;
  --fs-h2: 36px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-h5: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  /* Line heights */
  --lh-tight: 1.12;
  --lh-snug:  1.25;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Tracking */
  --ls-tight: -0.02em;
  --ls-snug:  -0.01em;
  --ls-base:  0;
  --ls-wide:  0.02em;
  --ls-eyebrow: 0.12em;

  /* Weights */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* ============================================================
     SPACING (4-px base)
     ============================================================ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 128px;

  /* ============================================================
     RADIUS — generally soft & friendly
     ============================================================ */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ============================================================
     SHADOWS — cool-tinted using brand dark-blue
     ============================================================ */
  --shadow-xs: 0 1px 2px rgba(44, 42, 134, 0.06);
  --shadow-sm: 0 2px 6px rgba(44, 42, 134, 0.07), 0 1px 2px rgba(44, 42, 134, 0.04);
  --shadow-md: 0 6px 16px rgba(44, 42, 134, 0.09), 0 2px 4px rgba(44, 42, 134, 0.05);
  --shadow-lg: 0 16px 40px rgba(44, 42, 134, 0.12), 0 4px 12px rgba(44, 42, 134, 0.06);
  --shadow-xl: 0 28px 64px rgba(44, 42, 134, 0.16), 0 8px 20px rgba(44, 42, 134, 0.08);
  --shadow-focus-ring: 0 0 0 3px rgba(38, 156, 206, 0.32);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 0 rgba(44,42,134,0.05);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  /* Layout */
  --container-max: 1200px;
  --container-pad: 24px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.n3i-display, .n3i-h1, .n3i-h2, .n3i-h3, .n3i-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  text-wrap: balance;
  margin: 0;
}

.n3i-display { font-size: var(--fs-display); font-weight: var(--fw-extrabold); letter-spacing: -0.03em; }
.n3i-h1      { font-size: var(--fs-h1);      font-weight: var(--fw-bold); }
.n3i-h2      { font-size: var(--fs-h2);      font-weight: var(--fw-bold); }
.n3i-h3      { font-size: var(--fs-h3);      font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.n3i-h4      { font-size: var(--fs-h4);      font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); }
.n3i-h5      { font-family: var(--font-sans); font-size: var(--fs-h5); font-weight: var(--fw-semibold); line-height: var(--lh-snug); margin: 0; }

.n3i-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--brand-secondary);
}

.n3i-lead {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.n3i-body { font-size: var(--fs-body); line-height: var(--lh-base); color: var(--fg-1); }
.n3i-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-base); color: var(--fg-2); }
.n3i-caption { font-size: var(--fs-caption); color: var(--fg-3); }
.n3i-code, code { font-family: var(--font-mono); font-size: 0.92em; background: var(--n3i-ink-50); padding: 1px 6px; border-radius: var(--radius-xs); color: var(--fg-1); }

/* Link */
.n3i-link, a.n3i-link {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--link) 55%, transparent);
  transition: text-decoration-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.n3i-link:hover { color: var(--link-hover); text-decoration-color: var(--link-hover); }

/* ============================================================
   ACCESSIBILITY  (WCAG 2.2 AA)
   - 2.4.7 / 2.4.11 focus visible & not obscured
   - 1.4.11 non-text contrast for focus indicator (>=3:1)
   - 1.4.3 placeholder text meets 4.5:1
   - 2.3.3 respect reduced-motion
   ============================================================ */
:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--n3i-light-blue-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
::placeholder { color: var(--n3i-ink-400); opacity: 1; }  /* 5.4:1 on white — was ink-300 (2.8:1, fails) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}