/* ============================================================
   TOAST CLUB · Colors + Type tokens
   "Wine leaves a mark."
   ============================================================ */

/* --- Webfonts (Google Fonts) --- */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Inter:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,700;1,9..144,300;1,9..144,700&display=swap');

:root {
  /* ── COLOR · NAMED (named after grape varieties + terroir) ── */
  --gamay:        #C9386A;   /* Primary brand. Bold, warm, juicy. */
  --gamay-deep:   #A82B57;   /* Accent dark / press states */
  --gamay-light:  #E85C87;   /* Accent light / italic display */
  --barolo:       #1A0A10;   /* Ink — deepest dark, primary foreground */
  --rose:         #DE659E;   /* Soft pink for diamond gradients */
  --cork:         #D8C8B6;   /* Warm neutral, leather-y */
  --cream:        #F7F3EE;   /* Background — the silence wine needs to breathe */
  --cream-2:      #F9F2EE;   /* Cream variant */
  --studio-grey:  #E7E5E4;   /* Studio light grey */
  --light:        #E8DDD6;   /* Hairlines and borders */
  --schist:       #877F83;   /* Supporting body text grey */
  --mid:          #9C8880;   /* Muted text on cream */
  --white:        #FFFDFC;   /* Off-white */
  --pure-white:   #FFFFFF;
  --pure-black:   #000000;

  /* ── COLOR · SEMANTIC (foreground / background / lines) ── */
  --bg:           var(--cream);
  --bg-ink:       var(--barolo);
  --bg-elev:      var(--white);
  --bg-tint:      rgba(201,56,106,0.07);

  --fg:           var(--barolo);
  --fg-2:         rgba(26,10,16,0.65);
  --fg-3:         rgba(26,10,16,0.45);
  --fg-mute:      var(--schist);
  --fg-on-dark:   var(--cream);
  --fg-on-dark-2: rgba(255,255,255,0.5);
  --fg-on-dark-3: rgba(255,255,255,0.35);

  --line:         var(--light);
  --line-dark:    rgba(255,255,255,0.08);

  --accent:       var(--gamay);
  --accent-press: var(--gamay-deep);
  --accent-soft:  var(--gamay-light);

  --shadow-card:  0 24px 60px rgba(26,10,16,0.10);
  --shadow-bottle:0 40px 100px rgba(0,0,0,0.40);
  --shadow-lift:  0px 4px 80px 0px rgba(0,0,0,0.25);
  --shadow-pin:   0 6px 16px rgba(201,56,106,0.45);

  /* ── TYPE · FAMILIES ── */
  --font-display: 'Outfit', system-ui, sans-serif;     /* Headlines */
  --font-body:    'Inter', system-ui, sans-serif;      /* Body, UI, labels */
  --font-italic:  'Fraunces', Georgia, serif;          /* Italic flourishes inside headlines */

  /* ── TYPE · SCALE (semantic) ── */
  --t-hero:       clamp(72px, 9vw, 148px);     /* "Wine leaves a mark." */
  --t-display-1:  clamp(52px, 6vw, 96px);      /* Section headers */
  --t-display-2:  clamp(44px, 5vw, 80px);      /* Sub-section */
  --t-h1:         clamp(40px, 4vw, 64px);
  --t-h2:         36px;                        /* Card title */
  --t-h3:         24px;
  --t-body-lg:    20px;
  --t-body:       16px;
  --t-body-sm:    14px;
  --t-meta:       13px;
  --t-kicker:     11px;                        /* Eyebrow / kicker */

  --lh-tight:     0.88;
  --lh-display:   0.92;
  --lh-snug:      1.1;
  --lh-body:      1.65;
  --lh-loose:     1.75;

  --ls-display:   -0.04em;
  --ls-tight:     -0.02em;
  --ls-body:      -0.01em;
  --ls-kicker:    0.22em;

  /* ── SHAPE · radii ── */
  --r-pill:       999px;
  --r-card-lg:    32px;
  --r-card:       24px;
  --r-md:         16px;
  --r-sm:         12px;
  --r-xs:         8px;

  /* ── MOTION ── */
  --ease:         cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:       0.2s;
  --t-base:       0.25s;
  --t-slow:       0.7s;
}

/* ============================================================
   Semantic typography
   Apply these classes to recreate brand voice instantly.
   ============================================================ */

/* Eyebrow / kicker — ALL CAPS, 0.22em tracking, gamay. Always sets up a headline. */
.tc-kicker {
  font-family: var(--font-body);
  font-size: var(--t-kicker);
  font-weight: 600;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--accent);
}

/* Hero — "Wine / leaves / a mark." Three-line stack, line-height 0.88, italic Fraunces accent. */
.tc-hero {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.tc-hero em,
.tc-display-1 em,
.tc-display-2 em,
.tc-h1 em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}

.tc-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-display-1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg);
}
.tc-display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-display-2);
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  color: var(--fg);
}

.tc-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.tc-h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.03em;
}
.tc-h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.2;
  letter-spacing: var(--ls-tight);
}

.tc-body-lg {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}
.tc-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
}
.tc-body strong { font-weight: 600; color: var(--fg); }

.tc-meta {
  font-family: var(--font-body);
  font-size: var(--t-meta);
  color: var(--fg-mute);
  letter-spacing: 0.02em;
}

/* Quote — used for manifesto callouts, italic Fraunces */
.tc-quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 300;
  font-size: 32px;
  line-height: 1.3;
  color: var(--fg);
}