/* ============================================================
   Translation Endeavors — Foundations
   colors_and_type.css

   Two layers:
   1. Raw tokens (--te-*) — the palette + type ramp
   2. Semantic tokens — fg, bg, surface, h1, body, eyebrow, etc.

   Load order: this file first, then any component CSS.
   ============================================================ */

/* ---------- Fonts ---------- */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap");

:root {
  /* ============================================================
     1. PALETTE — "The Spectrum"
     A chromatic accent palette that nods to chromatography:
     warm cream paper, ink-black type, and saturated spectral
     accents. Use sparingly — one accent per surface, not all.
     ============================================================ */

  /* Paper / ground — clean white with subtle steps for surfaces */
  --te-paper-100: #FFFFFF;   /* page background, default */
  --te-paper-200: #FFFFFF;   /* alias of paper-100 (kept for legacy) */
  --te-paper-300: #F4F4F0;   /* raised surface / sunken section */
  --te-paper-400: #E1DFD7;   /* hairline borders on white */

  /* Ink — warm near-black, not pure */
  --te-ink-900: #14110B;     /* primary text */
  --te-ink-700: #2E2A20;     /* body text */
  --te-ink-500: #6B6555;     /* secondary text */
  --te-ink-300: #A39C88;     /* tertiary / disabled */
  --te-ink-100: #D8D2BF;     /* hairline on ink */

  /* Spectrum accents — saturated, punchy, set against white */
  --te-ultramarine: #1E3FE6; /* primary accent — links, focus */
  --te-ultramarine-deep: #0A1F8C;
  --te-tangerine:    #FF5A1F; /* heat, urgency, science orange */
  --te-tangerine-deep: #B8410F;
  --te-violet:       #6B2EFF; /* lab violet, computational */
  --te-violet-deep:  #2E1668;
  --te-kelp:         #1F8A5B; /* organic, life-sciences green */
  --te-kelp-deep:    #0E4A30;
  --te-ochre:        #F2B22E; /* archival, document yellow */
  --te-ochre-deep:   #8A5E0A;
  --te-pulse:        #FF2247; /* signal red, sparing */

  /* Dark ground — used for inverted sections only */
  --te-ink-bg:       #14110B;
  --te-ink-bg-200:   #1E1B14;
  --te-ink-bg-300:   #2A261B;

  /* ============================================================
     2. SEMANTIC TOKENS
     What designers and components should reach for.
     ============================================================ */

  /* Surfaces */
  --te-bg:           var(--te-paper-200);
  --te-bg-elevated:  var(--te-paper-100);
  --te-bg-sunken:    var(--te-paper-300);
  --te-bg-inverse:   var(--te-ink-bg);

  /* Foregrounds */
  --te-fg:           var(--te-ink-900);
  --te-fg-muted:     var(--te-ink-700);
  --te-fg-subtle:    var(--te-ink-500);
  --te-fg-faint:     var(--te-ink-300);
  --te-fg-inverse:   var(--te-paper-100);

  /* Lines */
  --te-line:         var(--te-paper-400);
  --te-line-strong:  var(--te-ink-900);
  --te-line-inverse: var(--te-ink-bg-300);

  /* Interactive */
  --te-accent:           var(--te-ultramarine);
  --te-accent-deep:      var(--te-ultramarine-deep);
  --te-accent-contrast:  var(--te-paper-100);

  /* Signal */
  --te-signal-positive:  var(--te-kelp);
  --te-signal-warn:      var(--te-ochre);
  --te-signal-danger:    var(--te-pulse);

  /* ============================================================
     3. TYPE
     Three families:
     - Display serif: Instrument Serif (italic-leaning, editorial)
     - Body serif:    Newsreader (literary, readable at long form)
     - Sans:          Geist (technical, modern, neutral)
     - Mono:          Geist Mono (eyebrows, tags, code, numerals)
     ============================================================ */

  --te-font-display: "Instrument Serif", "Newsreader", Georgia, serif;
  --te-font-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --te-font-sans:    "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --te-font-mono:    "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type ramp — fluid clamps tuned for editorial layouts */
  --te-text-hero:    clamp(56px, 9vw, 144px);   /* big "thesis" type */
  --te-text-d1:      clamp(44px, 6vw, 88px);    /* display 1 / page hero */
  --te-text-d2:      clamp(36px, 4.5vw, 64px);  /* display 2 / section hero */
  --te-text-h1:      clamp(32px, 3.5vw, 48px);
  --te-text-h2:      clamp(24px, 2.4vw, 32px);
  --te-text-h3:      20px;
  --te-text-body-lg: 19px;                       /* long-form body */
  --te-text-body:    16px;                       /* default body */
  --te-text-sm:      14px;
  --te-text-xs:      12px;                       /* mono eyebrows */

  /* Line-heights */
  --te-lh-tight:     1.02;   /* display serif headings */
  --te-lh-snug:      1.15;
  --te-lh-normal:    1.45;
  --te-lh-relaxed:   1.65;   /* long-form serif body */

  /* Letter-spacing */
  --te-tracking-tight:  -0.02em;   /* display */
  --te-tracking-normal: 0;
  --te-tracking-wide:   0.08em;    /* mono eyebrows, all-caps labels */
  --te-tracking-wider:  0.14em;

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

  /* ============================================================
     4. SHAPE / SPACE / ELEVATION
     ============================================================ */
  --te-radius-sm:  3px;
  --te-radius:     6px;
  --te-radius-lg:  12px;
  --te-radius-xl:  20px;
  --te-radius-pill: 999px;

  --te-space-1:  4px;
  --te-space-2:  8px;
  --te-space-3:  12px;
  --te-space-4:  16px;
  --te-space-5:  24px;
  --te-space-6:  32px;
  --te-space-7:  48px;
  --te-space-8:  64px;
  --te-space-9:  96px;
  --te-space-10: 128px;

  /* Shadows are restrained — this is editorial, not Material */
  --te-shadow-sm:   0 1px 0 rgba(20, 17, 11, 0.06), 0 1px 2px rgba(20, 17, 11, 0.04);
  --te-shadow:      0 2px 4px rgba(20, 17, 11, 0.06), 0 8px 24px -8px rgba(20, 17, 11, 0.10);
  --te-shadow-lg:   0 4px 12px rgba(20, 17, 11, 0.10), 0 24px 48px -16px rgba(20, 17, 11, 0.18);
  --te-shadow-inset: inset 0 0 0 1px var(--te-line);

  /* Motion */
  --te-ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --te-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --te-dur-fast:     120ms;
  --te-dur:          220ms;
  --te-dur-slow:     420ms;
}

/* ============================================================
   GLOBAL DEFAULTS
   ============================================================ */
html, body {
  background: var(--te-bg);
  color: var(--te-fg);
  font-family: var(--te-font-sans);
  font-size: var(--te-text-body);
  line-height: var(--te-lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic element styling — these CAN be used directly,
   but components should reach for the variables above. */

.te-hero {
  font-family: var(--te-font-display);
  font-weight: var(--te-fw-regular);
  font-size: var(--te-text-hero);
  line-height: var(--te-lh-tight);
  letter-spacing: var(--te-tracking-tight);
  color: var(--te-fg);
  text-wrap: balance;
}
.te-hero em, .te-hero i { font-style: italic; font-feature-settings: "ss01"; }

.te-d1 {
  font-family: var(--te-font-display);
  font-weight: var(--te-fw-regular);
  font-size: var(--te-text-d1);
  line-height: var(--te-lh-tight);
  letter-spacing: var(--te-tracking-tight);
  text-wrap: balance;
}
.te-d2 {
  font-family: var(--te-font-display);
  font-weight: var(--te-fw-regular);
  font-size: var(--te-text-d2);
  line-height: var(--te-lh-snug);
  letter-spacing: var(--te-tracking-tight);
  text-wrap: balance;
}

.te-h1 {
  font-family: var(--te-font-sans);
  font-weight: var(--te-fw-medium);
  font-size: var(--te-text-h1);
  line-height: var(--te-lh-snug);
  letter-spacing: var(--te-tracking-tight);
}
.te-h2 {
  font-family: var(--te-font-sans);
  font-weight: var(--te-fw-medium);
  font-size: var(--te-text-h2);
  line-height: var(--te-lh-snug);
}
.te-h3 {
  font-family: var(--te-font-sans);
  font-weight: var(--te-fw-semibold);
  font-size: var(--te-text-h3);
  line-height: var(--te-lh-snug);
}

.te-body-lg {
  font-family: var(--te-font-serif);
  font-weight: var(--te-fw-regular);
  font-size: var(--te-text-body-lg);
  line-height: var(--te-lh-relaxed);
  text-wrap: pretty;
}
.te-body {
  font-family: var(--te-font-sans);
  font-weight: var(--te-fw-regular);
  font-size: var(--te-text-body);
  line-height: var(--te-lh-normal);
}
.te-small { font-size: var(--te-text-sm); }

/* Mono eyebrow — the workhorse label */
.te-eyebrow {
  font-family: var(--te-font-mono);
  font-weight: var(--te-fw-medium);
  font-size: var(--te-text-xs);
  letter-spacing: var(--te-tracking-wide);
  text-transform: uppercase;
  color: var(--te-fg-subtle);
}

.te-numeric {
  font-family: var(--te-font-mono);
  font-feature-settings: "tnum" 1;
}

/* Editorial pull-quote */
.te-quote {
  font-family: var(--te-font-display);
  font-style: italic;
  font-size: var(--te-text-d2);
  line-height: var(--te-lh-snug);
  letter-spacing: var(--te-tracking-tight);
  text-wrap: balance;
}

a.te-link, .te-link {
  color: var(--te-accent);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--te-dur) var(--te-ease);
}
a.te-link:hover, .te-link:hover { color: var(--te-accent-deep); }

/* A horizontal rule with weight — the "editorial bar" */
.te-rule {
  height: 1px;
  background: var(--te-line-strong);
  border: 0;
  margin: var(--te-space-5) 0;
}
.te-rule--thick { height: 3px; }
.te-rule--hair  { background: var(--te-line); }

/* Utility: spectrum bar — the small chromatic motif */
.te-spectrum {
  display: flex;
  height: 6px;
  width: 100%;
}
.te-spectrum > span { flex: 1; }