/* ════════════════════════════════════════════════════════════════
   EduPlus International — Design System
   All design tokens as CSS custom properties.
   No component styles here — only variables.
   ════════════════════════════════════════════════════════════════ */

:root {

  /* ── Colour Palette ─────────────────────────────────────────── */

  /* Navy Scale — primary brand: #101841 */
  --navy-950: #060A1C;
  --navy-900: #0D1232;
  --navy-800: #101841;
  --navy-700: #1C2A62;
  --navy-600: #2B3E84;
  --navy-500: #3D55A8;
  --navy-400: #6075C8;
  --navy-300: #8FA4DC;
  --navy-200: #BEC9EE;
  --navy-100: #DDE3F5;
  --navy-50:  #EEF1FB;

  /* Orange / Accent Scale — secondary brand: #f78a27 */
  --gold-950: #3D1E00;
  --gold-900: #6B3600;
  --gold-800: #8C4B00;
  --gold-700: #B06010;
  --gold-600: #D47518;
  --gold-500: #f78a27;
  --gold-400: #FAA558;
  --gold-300: #FCC286;
  --gold-200: #FDE0BD;
  --gold-100: #FEF2E4;
  --gold-50:  #FFF9F3;

  /* Neutrals */
  --neutral-950: #0A0A0A;
  --neutral-900: #111827;
  --neutral-800: #1F2937;
  --neutral-700: #374151;
  --neutral-600: #4B5563;
  --neutral-500: #6B7280;
  --neutral-400: #9CA3AF;
  --neutral-300: #D1D5DB;
  --neutral-200: #E5E7EB;
  --neutral-100: #F3F4F6;
  --neutral-50:  #F9FAFB;
  --white:        #FFFFFF;
  --off-white:    #F8F6F2;

  /* Semantic Colour Aliases */
  --color-brand-primary:   var(--navy-800);
  --color-brand-secondary: var(--navy-700);
  --color-brand-accent:    var(--gold-500);
  --color-brand-accent-lt: var(--gold-400);
  --color-brand-accent-dk: var(--gold-600);

  --color-bg:              var(--white);
  --color-bg-alt:          var(--off-white);
  --color-bg-dark:         var(--navy-800);
  --color-bg-dark-alt:     var(--navy-700);

  --color-text:            var(--neutral-900);
  --color-text-secondary:  var(--neutral-600);
  --color-text-muted:      var(--neutral-400);
  --color-text-inverse:    var(--white);

  --color-border:          var(--neutral-200);
  --color-border-dark:     var(--navy-700);

  --color-success:         #16A34A;
  --color-error:           #DC2626;
  --color-warning:         #D97706;
  --color-info:            var(--navy-600);

  /* ── Typography ──────────────────────────────────────────────── */

  /*
   * Two-font system:
   *   Montserrat 700   → display/headings (70% of site — hero titles, section headings, nav)
   *   Nunito Sans 800  → ui/body/editorial (30% of site — body text, descriptions, UI labels)
   */
  --font-display:   'Montserrat',  system-ui, sans-serif;
  --font-editorial: 'Nunito Sans', system-ui, sans-serif;
  --font-heading:   'Montserrat',  system-ui, sans-serif;
  --font-ui:        'Nunito Sans', system-ui, sans-serif;

  /* Backward-compatible aliases */
  --font-serif: var(--font-editorial);
  --font-sans:  var(--font-ui);
  --font-body:  var(--font-ui);
  --font-mono:  'Courier New', Courier, monospace;
  --font-body-weight: 800;
  --font-heading-weight: 700;

  /* ── Display scale — Clash Display (never below 2rem) ── */
  --display-2xl: clamp(3.5rem, 8vw,   6rem);     /* hero h1       56–96px  */
  --display-xl:  clamp(2.5rem, 5.5vw, 4.5rem);   /* large title   40–72px  */
  --display-lg:  clamp(2rem,   4vw,   3.25rem);   /* section title 32–52px  */
  --display-md:  clamp(1.875rem, 3vw, 2.5rem);   /* sub-display   30–40px  */

  /* ── Heading scale — Satoshi ── */
  --heading-xl:  clamp(1.5rem,   2.5vw, 2rem);    /* 24–32px */
  --heading-lg:  clamp(1.25rem,  2vw,   1.625rem); /* 20–26px */
  --heading-md:  clamp(1.125rem, 1.5vw, 1.375rem); /* 18–22px */
  --heading-sm:  1rem;                              /* 16px   */

  /* ── Editorial scale — Playfair Display ── */
  --editorial-xl: clamp(1.75rem, 3vw,   2.25rem);  /* 28–36px */
  --editorial-lg: clamp(1.375rem, 2vw,  1.75rem);  /* 22–28px */
  --editorial-md: clamp(1.125rem, 1.5vw,1.375rem); /* 18–22px */

  /* ── UI/body scale — Cabinet Grotesk ── */
  --ui-lg:  clamp(1rem, 1.25vw, 1.125rem); /* 16–18px */
  --ui-md:  1rem;
  --ui-sm:  0.875rem;
  --ui-xs:  0.75rem;

  /* Legacy size tokens — kept for component compatibility */
  --text-xs:   var(--ui-xs);
  --text-sm:   var(--ui-sm);
  --text-base: var(--ui-md);
  --text-md:   1.125rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.25rem;
  --text-4xl:  clamp(2rem, 4vw, 3rem);
  --text-5xl:  clamp(2.5rem, 5vw, 4rem);
  --text-6xl:  clamp(3rem, 6vw, 5rem);
  --text-hero: var(--display-2xl);

  /* ── Font-weight tokens per role ── */
  --fw-display:        700;
  --fw-display-alt:    700;
  --fw-heading:        700;
  --fw-heading-active: 700;
  --fw-editorial:      800;
  --fw-body:           800;
  --fw-ui:             800;
  --fw-ui-medium:      800;
  --fw-ui-bold:        800;

  /* Legacy weight tokens */
  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  var(--fw-ui-medium);
  --weight-semi:    var(--fw-ui-bold);
  --weight-bold:    700;

  /* ── Line-height tokens per role ── */
  --lh-display:   1.05;
  --lh-heading:   1.2;
  --lh-editorial: 1.4;
  --lh-body:      1.65;
  --lh-ui:        1.5;

  /* Legacy line-height tokens */
  --leading-tight:   var(--lh-display);
  --leading-snug:    var(--lh-heading);
  --leading-normal:  var(--lh-body);
  --leading-relaxed: 1.75;

  /* ── Letter-spacing tokens per role ── */
  --ls-display-hero: -0.04em;
  --ls-display-lg:   -0.03em;
  --ls-display-md:   -0.02em;
  --ls-heading:      -0.01em;
  --ls-body:          0em;
  --ls-label:         0.05em;
  --ls-eyebrow:       0.12em;

  /* Legacy tracking tokens */
  --tracking-tight:   var(--ls-display-md);
  --tracking-normal:  var(--ls-body);
  --tracking-wide:    var(--ls-label);
  --tracking-wider:   0.1em;
  --tracking-widest:  var(--ls-eyebrow);

  /* ── Spacing Scale (4px base unit) ─────────────────────────── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1:   0.25rem;   /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2:   0.5rem;    /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --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-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Section Vertical Rhythm */
  --section-py: clamp(var(--space-16), 8vw, var(--space-32));

  /* Grid pattern — defined once, referenced everywhere.
     Full-opacity colors; visibility controlled by opacity on the pseudo-element.
     0.5px stroke on a 64px cell reads as architectural at low opacity. */
  --grid-bg-light: linear-gradient(rgba(16,24,65,1) 0.5px, transparent 0.5px),
                   linear-gradient(90deg, rgba(16,24,65,1) 0.5px, transparent 0.5px);
  --grid-bg-dark:  linear-gradient(rgba(255,255,255,1) 0.5px, transparent 0.5px),
                   linear-gradient(90deg, rgba(255,255,255,1) 0.5px, transparent 0.5px);
  --grid-size: 64px 64px;

  /* ── Border Radius ─────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(16, 24, 65, 0.05);
  --shadow-sm:  0 2px 8px rgba(16, 24, 65, 0.08);
  --shadow-md:  0 4px 16px rgba(16, 24, 65, 0.10);
  --shadow-lg:  0 8px 32px rgba(16, 24, 65, 0.12);
  --shadow-xl:  0 16px 48px rgba(16, 24, 65, 0.15);
  --shadow-2xl: 0 24px 64px rgba(16, 24, 65, 0.20);
  --shadow-gold: 0 4px 24px rgba(247, 138, 39, 0.30);
  --shadow-inner: inset 0 2px 4px rgba(16, 24, 65, 0.06);

  /* ── Transitions ────────────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base:     all var(--duration-base) var(--ease-out);
  --transition-fast:     all var(--duration-fast) var(--ease-out);
  --transition-slow:     all var(--duration-slow) var(--ease-out);
  --transition-color:    color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-opacity:  opacity var(--duration-base) var(--ease-out);

  /* ── Layout ─────────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-pad-x: clamp(var(--space-4), 4vw, var(--space-10));

  /* ── Z-index Scale ──────────────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-overlay:  100;
  --z-modal:    200;
  --z-toast:    300;
  --z-header:   400;

  /* ── Component Tokens ───────────────────────────────────────── */

  /* Buttons */
  --btn-height-sm:   2.25rem;   /* 36px */
  --btn-height-md:   2.75rem;   /* 44px */
  --btn-height-lg:   3.25rem;   /* 52px */
  --btn-pad-x-sm:    var(--space-4);
  --btn-pad-x-md:    var(--space-6);
  --btn-pad-x-lg:    var(--space-8);
  --btn-radius:      var(--radius-md);
  --btn-font-size:   var(--text-base);
  --btn-font-weight: var(--weight-semi);

  /* Form Inputs */
  --input-height:      3rem;
  --input-pad-x:       var(--space-4);
  --input-border:      1.5px solid var(--color-border);
  --input-border-focus:1.5px solid var(--gold-500);
  --input-radius:      var(--radius-md);
  --input-bg:          var(--white);
  --input-bg-focus:    var(--white);
  --input-shadow-focus:0 0 0 4px rgba(247, 138, 39, 0.15);

  /* Header */
  --header-height:    6rem;     /* 96px */
  --header-bg:        rgba(16, 24, 65, 0.96);
  --header-bg-scroll: rgba(16, 24, 65, 0.98);

  /* Cards */
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-md);
}

/* ── Global Resets ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: #F8F6F2;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus management */
:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-toast);
  background: var(--gold-600);
  color: var(--navy-900);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: var(--weight-semi);
  text-decoration: none;
  transition: top var(--duration-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-2); }

/* ── Typography Utilities ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading-active);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: inherit;
}

p { line-height: var(--leading-relaxed); }
p + p { margin-top: var(--space-4); }

a { color: var(--gold-600); text-decoration: none; transition: var(--transition-color); }
a:hover { color: var(--gold-500); }

img, video { max-width: 100%; height: auto; display: block; }

ul, ol { list-style: none; }

address { font-style: normal; }

/* ── Container ──────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-x);
}

/* ── Button System ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height-md);
  padding-inline: var(--btn-pad-x-md);
  border-radius: var(--btn-radius);
  font-family: var(--font-ui);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-base);
  position: relative;
  overflow: hidden;
}
.btn:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }

/* Accent / Orange (primary CTA) */
.btn--gold,
.btn--accent {
  background: var(--gold-500);
  color: var(--navy-950);
  border-color: var(--gold-500);
  box-shadow: var(--shadow-gold);
}
.btn--gold:hover,
.btn--accent:hover {
  background: var(--gold-400);
  border-color: var(--gold-400);
  color: var(--navy-950);
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(247, 138, 39, 0.40);
}
.btn--gold:active,
.btn--accent:active { transform: translateY(0); box-shadow: var(--shadow-gold); }

/* Navy */
.btn--navy {
  background: var(--navy-800);
  color: var(--white);
  border-color: var(--navy-800);
}
.btn--navy:hover { background: var(--navy-700); border-color: var(--navy-700); color: var(--white); transform: translateY(-1px); }

/* Outline Navy */
.btn--outline-navy {
  background: transparent;
  color: var(--navy-800);
  border-color: var(--navy-800);
}
.btn--outline-navy:hover { background: var(--navy-800); color: var(--white); }

/* Ghost White (on dark backgrounds) */
.btn--ghost-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.5);
}
.btn--ghost-white:hover { background: rgba(255,255,255,0.1); border-color: var(--white); color: var(--white); }

/* Sizes */
.btn--sm { height: var(--btn-height-sm); padding-inline: var(--btn-pad-x-sm); font-size: var(--text-sm); }
.btn--lg { height: var(--btn-height-lg); padding-inline: var(--btn-pad-x-lg); font-size: var(--text-md); }
.btn--block { width: 100%; }