/* ============================================================
   UNCLE TIBO — CORE TOKENS
   Pull this file into any artifact to inherit brand foundations.
============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Core palette ---------- */
  --ut-bg:            #FAFAF8;  /* page background — warm white */
  --ut-cream:         #F5F0E8;  /* section tint */
  --ut-ember:         #F4B527;  /* accent / primary action — brand mustard */
  --ut-ember-dark:    #D89A12;  /* hover/press */
  --ut-charcoal:      #1A1A18;  /* primary text / inversion bg */
  --ut-warm-grey:     #6B6459;  /* secondary text */
  --ut-white:         #FFFFFF;  /* pure white (used sparingly inside cards) */

  /* ---------- Derived ---------- */
  --ut-border:        rgba(26, 26, 24, 0.10);
  --ut-border-strong: rgba(26, 26, 24, 0.22);
  --ut-shadow-sm:     0 2px 10px rgba(0, 0, 0, 0.04);
  --ut-shadow-md:     0 4px 24px rgba(0, 0, 0, 0.06);
  --ut-shadow-lg:     0 16px 48px rgba(0, 0, 0, 0.12);
  --ut-shadow-ember:  0 8px 24px rgba(244, 181, 39, 0.35);

  /* ---------- Semantic aliases ---------- */
  --fg1: var(--ut-charcoal);
  --fg2: var(--ut-warm-grey);
  --bg1: var(--ut-bg);
  --bg2: var(--ut-cream);
  --accent: var(--ut-ember);

  /* ---------- Type families ---------- */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-serif);
  --font-body:    var(--font-sans);

  /* ---------- Spacing ---------- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;
  --space-2xl: 10rem;

  /* ---------- Radii ---------- */
  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-full: 999px;

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:   0.18s;
  --dur-base:   0.30s;
  --dur-slow:   0.60s;
}

/* ============================================================
   BASE TYPE SCALE
   Editorial: serif display, italic accent in ember.
============================================================ */
html { font-size: 16px; }
body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg1);
}

h1 { font-size: clamp(2.8rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.1rem; font-weight: 500; }

h1 em, h2 em, .display em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}

p {
  font-size: 1rem;
  color: var(--fg2);
  line-height: 1.75;
  max-width: 60ch;
}

/* Eyebrow label — Inter, uppercase, tracked, ember */
.label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Marquee / overline mono-ish utility text */
.overline {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg2);
}

/* Quote — serif italic, ember left rule */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--fg1);
  border-left: 3px solid var(--accent);
  padding-left: var(--space-md);
}

/* Focus ring — ember, 2px, offset 3 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}