/* =============================================================
   edus.one — Design Tokens
   Warm editorial. Premium European. Anti-EdTech.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----- COLOR: BASE / PAPER ----- */
  --paper:           #F4EFE6;   /* primary surface — warm off-white */
  --paper-2:         #EDE6D8;   /* secondary surface, sunken panels */
  --paper-3:         #E4DBC8;   /* hairline / divider on paper */

  /* ----- COLOR: INK / NEAR-BLACK ----- */
  --ink:             #1A1715;   /* primary text on paper */
  --ink-2:           #2B2622;   /* full-bleed dark surface */
  --ink-3:           #3D3631;   /* elevated dark surface */

  /* ----- COLOR: STONE / WARM NEUTRALS ----- */
  --stone-900:       #221E1A;
  --stone-700:       #4A423B;   /* body text on paper */
  --stone-500:       #7A6F63;   /* secondary text */
  --stone-400:       #9B8F80;   /* tertiary, meta */
  --stone-300:       #BDB1A1;   /* disabled */
  --stone-200:       #D6CBB8;
  --stone-100:       #E8DFCB;

  /* ----- COLOR: ACCENT — BURNT SIENNA ----- */
  --sienna:          #B5462A;   /* primary accent */
  --sienna-hover:    #9C3A21;   /* darker on hover */
  --sienna-pressed:  #7E2E19;
  --sienna-soft:     #E8C9BC;   /* subtle background tints */
  --sienna-wash:     #F2DDD0;   /* lightest wash */

  /* ----- COLOR: SEMANTIC ----- */
  --success:         #4A6B3A;   /* sage — anti-cliché green */
  --success-soft:    #D4DBC4;
  --warn:            #B8862A;   /* ochre */
  --warn-soft:       #EBDDBC;
  --danger:          #8B2E1F;   /* deep oxide red */
  --danger-soft:     #E8CFC7;
  --info:            #3D5468;   /* slate, never EdTech blue */
  --info-soft:       #D2D9DF;

  /* ----- COLOR: FOREGROUND ALIASES (paper bg) ----- */
  --fg-1:            var(--ink);          /* highest-emphasis text */
  --fg-2:            var(--stone-700);    /* body / running text */
  --fg-3:            var(--stone-500);    /* secondary, captions */
  --fg-4:            var(--stone-400);    /* meta, hint */
  --fg-on-accent:    var(--paper);
  --fg-on-ink:       var(--paper);
  --fg-on-ink-2:     #BDB1A1;             /* secondary text on dark */

  /* ----- COLOR: BACKGROUND ALIASES ----- */
  --bg:              var(--paper);
  --bg-2:            var(--paper-2);
  --bg-3:            var(--paper-3);
  --bg-inverse:      var(--ink-2);

  /* ----- BORDERS ----- */
  --border-hair:     rgba(26, 23, 21, 0.12);   /* primary hairline on paper */
  --border-quiet:    rgba(26, 23, 21, 0.06);   /* subtler */
  --border-strong:   rgba(26, 23, 21, 0.24);   /* emphasised */
  --border-on-ink:   rgba(244, 239, 230, 0.14);

  /* ----- TYPE: FAMILIES ----- */
  --font-serif:      'Instrument Serif', 'GT Sectra', 'Tiempos Headline', 'Editorial New', Georgia, serif;
  --font-sans:       'Geist', 'Söhne', 'ABC Diatype', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:       'JetBrains Mono', 'Söhne Mono', ui-monospace, SFMono-Regular, monospace;

  /* ----- TYPE: SCALE (editorial — wide range) ----- */
  --fs-display-xl:   clamp(64px, 9vw, 144px);   /* hero lockup, big editorial */
  --fs-display-lg:   clamp(48px, 6vw, 88px);    /* section openers */
  --fs-display-md:   clamp(36px, 4.5vw, 64px);  /* sub-display, quotes */
  --fs-h1:           clamp(32px, 3.6vw, 48px);
  --fs-h2:           clamp(26px, 2.8vw, 36px);
  --fs-h3:           22px;
  --fs-h4:           18px;
  --fs-body-lg:      19px;     /* generous reading copy */
  --fs-body:         16px;
  --fs-body-sm:      14px;
  --fs-caption:      13px;
  --fs-overline:     12px;     /* uppercase labels */

  /* ----- TYPE: LINE-HEIGHT ----- */
  --lh-tight:        1.04;     /* huge serif display */
  --lh-snug:         1.15;     /* H1–H3 */
  --lh-normal:       1.45;
  --lh-relaxed:      1.65;     /* body, generous */
  --lh-loose:        1.85;

  /* ----- TYPE: TRACKING ----- */
  --tr-tight:        -0.025em;  /* big serif */
  --tr-snug:         -0.015em;
  --tr-normal:       0;
  --tr-wide:         0.04em;
  --tr-overline:     0.14em;    /* uppercase mono labels */

  /* ----- SPACING (4 / 8 base, editorial generous) ----- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  192px;   /* between major sections */

  /* ----- RADII (restrained; editorial = small radii) ----- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-pill: 999px;

  /* ----- SHADOWS (warm, subtle — never blue) ----- */
  --shadow-1:  0 1px 2px rgba(26,23,21,0.04);
  --shadow-2:  0 2px 6px rgba(26,23,21,0.06), 0 1px 2px rgba(26,23,21,0.04);
  --shadow-3:  0 6px 18px rgba(26,23,21,0.08), 0 2px 6px rgba(26,23,21,0.04);
  --shadow-4:  0 18px 48px rgba(26,23,21,0.12), 0 4px 12px rgba(26,23,21,0.06);
  --shadow-inset: inset 0 1px 0 rgba(244,239,230,0.6);

  /* ----- MOTION ----- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-editorial: cubic-bezier(0.16, 1, 0.3, 1);  /* signature: slow start, smooth out */
  --dur-fast:     140ms;
  --dur-base:     220ms;
  --dur-slow:     420ms;
  --dur-reveal:   720ms;

  /* ----- LAYOUT ----- */
  --container:     1240px;   /* max content width */
  --container-narrow: 880px;
  --gutter:        clamp(20px, 4vw, 56px);
}

/* =============================================================
   SEMANTIC TYPE PRIMITIVES — use these in components
   ============================================================= */

.display-xl, .t-display-xl {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.display-lg, .t-display-lg {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display-lg);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg-1);
}
.display-md, .t-display-md {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
.t-h1, h1.t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
.t-h2, h2.t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg-1);
}
.t-h3, h3.t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.t-h4, h4.t {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}
.t-body-lg, p.lg {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body, p.t {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.t-body-sm, p.sm {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}
.t-overline, .overline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-overline);
  line-height: 1;
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--fg-3);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Editorial italic — used sparingly for emphasis in display type */
.t-italic, em.display {
  font-family: var(--font-serif);
  font-style: italic;
}

/* =============================================================
   BASELINE RESETS / GLOBAL
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
::selection { background: var(--sienna); color: var(--paper); }

/* Dark/ink-surface helper — flip foreground aliases on dark sections */
.surface-ink {
  background: var(--ink-2);
  color: var(--fg-on-ink);
  --fg-1: var(--paper);
  --fg-2: #D6CBB8;
  --fg-3: #9B8F80;
  --border-hair: rgba(244, 239, 230, 0.14);
  --border-quiet: rgba(244, 239, 230, 0.07);
  --border-strong: rgba(244, 239, 230, 0.28);
}