/* ============================================================
   TALEIST DESIGN SYSTEM — Global tokens & type
   Brand: genuinely compelling copywriters (est. 2018)
   ============================================================ */

/* ---- Fonts ----------------------------------------------------
   Headline: Aron Grotesque (paid — monofonts.com), embedded below
   via @font-face (light/regular/bold/black .ttf in assets/fonts/).
   Hanken Grotesk remains the fallback stack for resilience.
   Body: Crimson Text (the brand's specified body face — free).
----------------------------------------------------------------*/
@font-face{font-family:'Aron Grotesque';src:url('assets/fonts/AronGrotesque-light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Aron Grotesque';src:url('assets/fonts/AronGrotesque-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Aron Grotesque';src:url('assets/fonts/AronGrotesque-bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Aron Grotesque';src:url('assets/fonts/AronGrotesque-black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap}
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,400..600&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600&display=swap');

:root {
  /* ---- Core brand colours (from 2018 guidelines) ---- */
  --tal-deep-blue:  #001935;  /* primary / ink            */
  --tal-dark-gray:  #2e323e;  /* secondary ink            */
  --tal-light-gray: #dad9dd;  /* tints, rules, reverse    */
  --tal-salmon:     #bd9585;  /* heritage accent          */

  /* ---- Extended accents (from later collateral) ---- */
  --tal-orange:     #d7815c;  /* brighter terracotta CTA  */

  /* ---- Neutrals / surfaces ---- */
  --tal-paper:      #f4f3f1;  /* warm off-white canvas    */
  --tal-white:      #ffffff;
  --tal-cloud:      #eceae6;  /* subtle panel fill        */

  /* ---- Semantic roles ---- */
  --tal-ink:           var(--tal-deep-blue);
  --tal-ink-soft:      var(--tal-dark-gray);
  --tal-bg:            var(--tal-paper);
  --tal-surface:       var(--tal-white);
  --tal-accent:        var(--tal-salmon);
  --tal-accent-strong: var(--tal-orange);
  --tal-rule:          var(--tal-light-gray);
  --tal-muted:         #6b6f7a;

  /* ---- Type families ---- */
  --tal-font-head: 'Aron Grotesque', 'Hanken Grotesk', system-ui, sans-serif;
  --tal-font-body: 'Crimson Text', Georgia, 'Times New Roman', serif;

  /* ---- Type scale (display copywriting brand — generous) ---- */
  --tal-step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);  /* @kind spacing */
  --tal-step-0:  clamp(1.05rem, 1rem + 0.25vw, 1.2rem);   /* @kind spacing */
  --tal-step-1:  clamp(1.3rem, 1.2rem + 0.5vw, 1.6rem);   /* @kind spacing */
  --tal-step-2:  clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);   /* @kind spacing */
  --tal-step-3:  clamp(2.2rem, 1.7rem + 2.2vw, 3.6rem);   /* @kind spacing */
  --tal-step-4:  clamp(2.8rem, 2rem + 3.6vw, 5.5rem);     /* @kind spacing */
  --tal-step-5:  clamp(3.4rem, 2.2rem + 5.5vw, 8rem);     /* @kind spacing */

  /* ---- Headline tracking (the brand's signature wide caps) ---- */
  --tal-track-wide: 0.18em;
  --tal-track-mid:  0.08em;

  /* ---- Spacing scale (8px base) ---- */
  --tal-space-1: 4px;
  --tal-space-2: 8px;
  --tal-space-3: 16px;
  --tal-space-4: 24px;
  --tal-space-5: 40px;
  --tal-space-6: 64px;
  --tal-space-7: 96px;
  --tal-space-8: 140px;

  /* ---- Radius (brand is square & classic — keep restrained) ---- */
  --tal-radius-sm: 2px;
  --tal-radius-md: 4px;
  --tal-radius-lg: 8px;

  /* ---- Shadows (minimal, professional) ---- */
  --tal-shadow-sm: 0 1px 2px rgba(0, 25, 53, 0.06);
  --tal-shadow-md: 0 6px 24px -8px rgba(0, 25, 53, 0.14);
  --tal-shadow-lg: 0 24px 60px -20px rgba(0, 25, 53, 0.22);

  /* ---- Layout ---- */
  --tal-maxw: 1200px;
  --tal-gutter: clamp(20px, 5vw, 80px);  /* @kind spacing */
}

/* ============================================================
   Base element styles — opt-in via .tal-scope so the tokens
   don't fight a consuming app's own resets.
   ============================================================ */
.tal-scope {
  font-family: var(--tal-font-body);
  font-size: var(--tal-step-0);
  line-height: 1.6;
  color: var(--tal-ink);
  background: var(--tal-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.tal-scope h1, .tal-scope h2, .tal-scope h3,
.tal-scope h4, .tal-scope h5, .tal-scope h6 {
  font-family: var(--tal-font-head);
  color: var(--tal-ink);
  line-height: 1.05;
  margin: 0;
  font-weight: 700;
}

/* The brand's hallmark: wide-tracked uppercase headline */
.tal-kicker {
  font-family: var(--tal-font-head);
  text-transform: uppercase;
  letter-spacing: var(--tal-track-wide);
  font-weight: 600;
  font-size: var(--tal-step--1);
  color: var(--tal-accent);
}

.tal-display {
  font-family: var(--tal-font-head);
  font-size: var(--tal-step-4);
  letter-spacing: var(--tal-track-mid);
  text-transform: uppercase;
  font-weight: 800;
  line-height: 0.98;
}

/* Editorial serif lede — the copy is the hero */
.tal-lede {
  font-family: var(--tal-font-body);
  font-size: var(--tal-step-1);
  line-height: 1.45;
  color: var(--tal-ink-soft);
}

.tal-scope a { color: var(--tal-accent-strong); text-decoration: none; }
.tal-scope a:hover { text-decoration: underline; }