/* ==========================================================================
   Tina Ngọc — Colors & Typography
   Single source of truth for design tokens. Import once in a root stylesheet
   or <style>, then reference CSS variables throughout.
   ========================================================================== */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreCaslonText-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreCaslonText-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/LibreCaslonText-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Sora-Variable.woff2') format('woff2-variations'),
       url('fonts/Sora-Variable.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */

:root {
  /* --- Brand colors (Palette A — Terracotta Authority) --- */
  --tn-terracotta: #C4653A;   /* primary — the ember */
  --tn-terracotta-deep: #A85227; /* pressed / hover-darker */
  --tn-espresso:   #2A2523;   /* dominant dark ground */
  --tn-espresso-deep: #1A1614; /* deepest night (slide 1 bg, hero) */
  --tn-amber:      #D4A574;   /* warm accent, wheat */
  --tn-sage:       #8A9A7E;   /* quiet secondary accent */
  --tn-warm-linen: #F5F0EB;   /* default light page bg */
  --tn-cream:      #FAF7F4;   /* lightest surface, cards on linen */
  --tn-charcoal:   #3D3532;   /* secondary text on linen */
  --tn-stone:      #99908A;   /* muted text, metadata, borders */

  /* --- Foreground tokens (use these, not raw palette) --- */
  --fg-1: var(--tn-espresso);         /* primary body/headings on light */
  --fg-2: var(--tn-charcoal);         /* secondary body */
  /* Body text token. Was var(--tn-stone) (#99908A → 2.76:1 on warm
     linen, fails AA). Darkened to #6F665F (4.95:1) so metadata,
     captions, and footnotes pass WCAG AA. The palette token
     --tn-stone stays #99908A for borders and decorative use. */
  --fg-3: #6F665F;                    /* tertiary / metadata */
  --fg-accent: var(--tn-terracotta);  /* eyebrow labels, links, ember */
  --fg-on-dark: var(--tn-cream);      /* body text on espresso grounds */
  --fg-on-dark-muted: #B8AEA6;        /* muted text on espresso */

  /* --- Background tokens --- */
  --bg-page: var(--tn-warm-linen);    /* default marketing page */
  --bg-surface: var(--tn-cream);      /* cards on page */
  --bg-sunken: #EDE6DF;               /* subtle sunken fill on linen */
  --bg-dark: var(--tn-espresso);      /* dark sections */
  --bg-dark-deep: var(--tn-espresso-deep); /* deepest dark (hero) */

  /* --- Borders --- */
  --border-soft: #E4DCD3;             /* hairlines on linen */
  --border-medium: #D1C6BA;           /* clearer separators */
  --border-on-dark: rgba(250, 247, 244, 0.14);

  /* --- Semantic --- */
  --link: var(--tn-terracotta);
  --link-hover: var(--tn-terracotta-deep);
  --focus-ring: rgba(196, 101, 58, 0.4);

  /* --- Type families --- */
  --font-serif: 'Libre Caslon Text', 'Cormorant Garamond', 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* --- Type scale --- */
  --fs-display: clamp(3rem, 6vw + 1rem, 5.75rem);  /* hero */
  --fs-h1: clamp(2.25rem, 3.5vw + 1rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 2vw + 1rem, 2.5rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-body: 1.0625rem;        /* 17px — readable, warm */
  --fs-body-sm: 0.9375rem;     /* 15px */
  --fs-eyebrow: 0.75rem;       /* 12px — SORA, tracked, uppercase */
  --fs-meta: 0.8125rem;

  /* --- Line heights --- */
  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-loose: 1.75;

  /* --- Letter-spacing --- */
  --ls-eyebrow: 0.2em;         /* wide tracking for SORA all-caps */
  --ls-secondary-lockup: 0.3em; /* TINA NGỌC lockup: 6pt @ ~20px ≈ 0.3em */
  --ls-display: -0.015em;      /* Caslon display subtly tight */
  --ls-body: 0;

  /* --- Spacing (4px base, 8px rhythm) --- */
  --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;

  /* --- Radii --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;      /* default buttons / inputs — restrained */
  --radius-lg: 10px;     /* cards */
  --radius-xl: 16px;
  --radius-pill: 999px;  /* eyebrow pills, small tags */

  /* --- Shadows (warm, soft, low) --- */
  --shadow-xs: 0 1px 2px rgba(42, 37, 35, 0.05);
  --shadow-sm: 0 2px 6px rgba(42, 37, 35, 0.06), 0 1px 2px rgba(42, 37, 35, 0.04);
  --shadow-md: 0 8px 20px rgba(42, 37, 35, 0.08), 0 2px 4px rgba(42, 37, 35, 0.04);
  --shadow-lg: 0 20px 40px rgba(42, 37, 35, 0.12), 0 4px 10px rgba(42, 37, 35, 0.06);
  --shadow-ember: 0 0 32px rgba(196, 101, 58, 0.45);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* --- Motion --- */
  --ease-out-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out-soft: cubic-bezier(0.4, 0.1, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 220ms;
  --dur-slow: 420ms;

  /* --- Layout --- */
  --container-max: 1200px;
  --container-narrow: 720px;
  --container-prose: 640px;
}

/* ---------- Semantic component tokens ---------- */

.tn-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "ss02"; /* sora stylistic sets */
  text-rendering: optimizeLegibility;
}

/* Headings — serif, Libre Caslon Text */
.tn-display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.tn-h1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
  text-wrap: balance;
}
.tn-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  color: var(--fg-1);
  text-wrap: balance;
}
.tn-h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}
.tn-h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  color: var(--fg-1);
}

/* Eyebrow — wide-tracked Sora all-caps; THE strongest brand signal */
.tn-eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg-accent);
}

/* Secondary lockup style: TINA NGỌC in Sora medium, ultra-wide tracking */
.tn-lockup {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--ls-secondary-lockup);
  text-transform: uppercase;
}

/* Pull quote — oversized serif italic */
.tn-pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem);
  line-height: 1.35;
  color: var(--fg-1);
  text-wrap: balance;
}

/* Body variants */
.tn-p  { font-family: var(--font-sans); font-size: var(--fs-body);    line-height: var(--lh-body);  color: var(--fg-2); }
.tn-p-sm { font-family: var(--font-sans); font-size: var(--fs-body-sm); line-height: var(--lh-body);  color: var(--fg-2); }
.tn-meta { font-family: var(--font-sans); font-size: var(--fs-meta); color: var(--fg-3); letter-spacing: 0.02em; }
.tn-num  { font-family: var(--font-serif); font-weight: 400; font-variant-numeric: lining-nums; letter-spacing: -0.02em; }

/* Link */
.tn-link {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-base) var(--ease-out-soft);
}
.tn-link:hover { color: var(--link-hover); }

/* On-dark overrides */
.tn-on-dark { color: var(--fg-on-dark); }
.tn-on-dark .tn-p, .tn-on-dark.tn-p { color: var(--fg-on-dark); }
.tn-on-dark .tn-meta, .tn-on-dark.tn-meta { color: var(--fg-on-dark-muted); }
.tn-on-dark .tn-eyebrow, .tn-on-dark.tn-eyebrow { color: var(--tn-amber); }