/* =============================================================
   FLYING TUMBLER IRISH WHISKEY — Colors & Type
   -------------------------------------------------------------
   Brand: Flying Tumbler Irish Whiskey ("Return Home / Rooted Adventure")
   Palette anchored on Navy (#343064) with a warm Gold lightning-bolt
   accent (#FBBC14). Sage-mint and Cream are used on packaging and
   secondary surfaces. Iris/Wicklow-leaning neutrals throughout.

   Type: the FT custom wordmark is a hand-built geometric all-caps
   sans (Cooper Hewitt-adjacent, with rounded terminals + open
   apertures). Closest free web families used here are
   Bricolage Grotesque (display) and DM Sans (text). FLAGGED — see
   README "Font substitutions" for the ask.
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */

  /* PRIMARY — Navy (the wordmark colour, always the first ink) */
  --ft-navy:            #343064;   /* core brand ink */
  --ft-navy-700:        #2A2752;   /* hover / pressed */
  --ft-navy-900:        #1A1838;   /* deep, near-black, for big bleeds */
  --ft-navy-300:        #6B689B;   /* muted brand tint */
  --ft-navy-100:        #E4E3EE;   /* tonal wash */

  /* ACCENT — Gold Bolt (the only warm flash; use SPARINGLY) */
  --ft-gold:            #FBBC14;   /* the bolt yellow */
  --ft-gold-600:        #E0A60D;
  --ft-gold-200:        #FCE39B;

  /* SECONDARY — Sage-Mint (the bottle capsule + tube) */
  --ft-sage:            #9FCFB6;   /* packaging mint-sage */
  --ft-sage-600:        #6FAE92;   /* hand-darkened sage */
  --ft-sage-200:        #D5EBDF;
  --ft-sage-50:         #EEF7F1;

  /* SUPPORT — Cream / Label */
  --ft-cream:           #F4EFE3;   /* label paper */
  --ft-cream-200:       #FAF7EE;   /* lighter wash */

  /* TERTIARY — Whiskey amber (liquid + warm tint for editorial) */
  --ft-amber:           #C68A2E;
  --ft-amber-200:       #EFCD8E;

  /* EXPRESSION COLOURWAYS — each release in the family has its own
     packaging hue. The brand chrome (Paddy, arch label, navy ink,
     coordinate stamp) stays constant; the tube + nameplate change. */

  /* THE BIRD — sage-mint tube (the original) */
  --ft-bird:            var(--ft-sage);
  --ft-bird-light:      #DCEEE3;   /* lit highlight on the tube */
  --ft-bird-deep:       var(--ft-sage-600);

  /* THE TIPPLER — marigold tube, 46% ABV, sampled from artwork */
  --ft-tippler:         #D89726;   /* marigold body, mid-tone */
  --ft-tippler-light:   #FFDC9D;   /* lit highlight on the tube */
  --ft-tippler-deep:    #A06600;   /* shadow side / hover */
  --ft-marigold:        var(--ft-tippler);  /* alias */

  /* THE ROLLER — coral tube, 43% ABV, sampled from artwork */
  --ft-roller:          #CF7870;   /* coral body, mid-tone */
  --ft-roller-light:    #FFC1BB;   /* lit highlight */
  --ft-roller-deep:     #B65C55;   /* shadow side / hover */
  --ft-coral:           var(--ft-roller);  /* alias */

  /* NEUTRALS */
  --ft-ink:             #1A1838;   /* body text */
  --ft-ink-2:           #4A476A;   /* secondary text */
  --ft-ink-3:           #7E7C95;   /* tertiary / meta */
  --ft-line:            #D9D6E2;   /* hairlines on light bg */
  --ft-line-warm:       #E7DFD0;   /* hairlines on cream bg */
  --ft-paper:           #FFFFFF;
  --ft-paper-warm:      #FBF8F1;   /* slightly warm white */

  /* SEMANTIC */
  --ft-success:         #4F8F6E;
  --ft-warning:         #E0A60D;
  --ft-danger:          #B5453A;
  --ft-info:            #4F6BAE;

  /* SEMANTIC ROLES (use these in components) */
  --bg:                 var(--ft-paper-warm);
  --bg-deep:            var(--ft-navy);
  --bg-cream:           var(--ft-cream);
  --bg-sage:            var(--ft-sage);
  --fg:                 var(--ft-ink);
  --fg-muted:           var(--ft-ink-2);
  --fg-subtle:          var(--ft-ink-3);
  --fg-on-deep:         var(--ft-paper-warm);
  --accent:             var(--ft-gold);
  --link:               var(--ft-navy);
  --link-hover:         var(--ft-navy-700);
  --line:               var(--ft-line);

  /* ---------- TYPE ---------- */

  --font-display:       "Bricolage Grotesque", "Sansita", "Inter", system-ui, sans-serif;
  --font-body:          "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono:          "DM Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* The wordmark itself stretches letterforms — for any FT-style
     headline, we approximate with extra letter-spacing + 600 weight. */
  --wordmark-tracking:  0.04em;
  --wordmark-tracking-tight: 0.01em;

  /* Type scale — fluid */
  --t-xs:   0.75rem;   /* 12 */
  --t-sm:   0.875rem;  /* 14 */
  --t-md:   1rem;      /* 16 */
  --t-lg:   1.125rem;  /* 18 */
  --t-xl:   1.375rem;  /* 22 */
  --t-2xl:  1.75rem;   /* 28 */
  --t-3xl:  2.25rem;   /* 36 */
  --t-4xl:  3rem;      /* 48 */
  --t-5xl:  4rem;      /* 64 */
  --t-6xl:  5.5rem;    /* 88 */

  /* ---------- SPACING ---------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;

  /* ---------- RADII ---------- */
  /* Bottle/label vibe: soft, rounded but NEVER pill-shaped except for
     small badges. Long pills feel un-FT. */
  --r-1:  4px;
  --r-2:  8px;
  --r-3:  12px;
  --r-4:  16px;
  --r-5:  24px;
  --r-arch: 999px 999px 16px 16px; /* @kind radius */ /* the label's archtop shape */
  --r-pill: 999px;                 /* small badges only */

  /* ---------- ELEVATION ---------- */
  /* Soft and warm — never harsh; tinted with navy so cards sit on
     paper, not float in space. */
  --shadow-1: 0 1px 2px rgba(52,48,100,.06), 0 1px 1px rgba(52,48,100,.04);
  --shadow-2: 0 4px 12px rgba(52,48,100,.08), 0 1px 3px rgba(52,48,100,.06);
  --shadow-3: 0 12px 28px rgba(52,48,100,.12), 0 4px 8px rgba(52,48,100,.06);
  --shadow-inset: inset 0 0 0 1px rgba(52,48,100,.10);

  /* ---------- MOTION ---------- */
  --ease-out:     cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-in-out:  cubic-bezier(.5,0,.2,1); /* @kind other */
  --ease-bounce:  cubic-bezier(.34,1.56,.64,1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    420ms; /* @kind other */
}

/* ============= SEMANTIC TYPE ROLES ============= */

html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--t-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* DISPLAY — for the big "RETURN HOME"–style headlines.
   All-caps, generous tracking, a bit of weight. Use sparingly. */
.ft-display, .ft-h-hero {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--wordmark-tracking);
  text-transform: uppercase;
  color: var(--ft-navy);
  line-height: 0.95;
  font-size: clamp(2.5rem, 6vw + .5rem, var(--t-6xl));
  text-wrap: balance;
}

/* HEADINGS */
h1, .ft-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--t-4xl);
  line-height: 1.05;
  letter-spacing: var(--wordmark-tracking-tight);
  color: var(--ft-navy);
  text-wrap: balance;
}
h2, .ft-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-3xl);
  line-height: 1.1;
  letter-spacing: var(--wordmark-tracking-tight);
  color: var(--ft-navy);
  text-wrap: balance;
}
h3, .ft-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.15;
  color: var(--ft-navy);
}
h4, .ft-h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-xl);
  line-height: 1.2;
  color: var(--ft-navy);
}

/* EYEBROW — small all-caps label, the FT signature. Always tracked. */
.ft-eyebrow {
  font-family: var(--font-body);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-xs);
  color: var(--ft-navy);
}

/* BODY */
p, .ft-p {
  font-family: var(--font-body);
  font-size: var(--t-md);
  line-height: 1.6;
  color: var(--fg);
  text-wrap: pretty;
}
.ft-lead {
  font-size: var(--t-lg);
  line-height: 1.5;
  color: var(--fg);
}

.ft-meta, small {
  font-size: var(--t-sm);
  color: var(--fg-muted);
}

/* COORDINATE STAMP — the 52°44'N / 6°52'W marker that appears on
   the bottle, packaging and signposts. Mono, navy, very small. */
.ft-coords {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--ft-navy);
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

/* IRISH-WIT QUOTE — used for the "chase stories not status"-style pulls */
.ft-pullquote {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-2xl);
  line-height: 1.25;
  color: var(--ft-navy);
  text-wrap: balance;
}

a {
  color: var(--link);
  text-decoration-color: color-mix(in oklab, var(--link) 30%, transparent);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--link-hover); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ============= UTILITY CLASSES ============= */
.ft-on-navy   { background: var(--ft-navy);  color: var(--fg-on-deep); }
.ft-on-cream  { background: var(--ft-cream); color: var(--ft-navy); }
.ft-on-sage   { background: var(--ft-sage);  color: var(--ft-navy); }
.ft-on-paper  { background: var(--ft-paper-warm); color: var(--ft-navy); }

.ft-on-navy h1, .ft-on-navy h2, .ft-on-navy h3,
.ft-on-navy .ft-eyebrow { color: var(--fg-on-deep); }