/* Queens & Carryons Club — design tokens, flattened single file (v4 build) */

/* ==== tokens/fonts.css ==== */
/* ===========================================================================
   Queens & Carryons Club — Webfonts
   Primary: Playfair Display (editorial serif, display + headings)
   Secondary: Montserrat (clean sans, body + UI)
   Latin subset only, self-hosted woff2.
   =========================================================================== */

/* ---- Playfair Display ---- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-400.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-500.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-600.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-700.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-800.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-900.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 600 900;
  font-display: swap;
  src: url("/assets/fonts/playfairdisplay-600-italic.woff2") format("woff2");
}

/* ---- Montserrat ---- */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/montserrat-300.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-500.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-600.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url("/assets/fonts/montserrat-400-italic.woff2") format("woff2");
}

/* ==== tokens/colors.css ==== */
/* ===========================================================================
   Queens & Carryons Club — Color System
   Warm, editorial, luxury. Charcoal ink on cream, champagne gold + coral
   blush accents, espresso/cocoa browns for warmth. No cold grays.
   =========================================================================== */

:root {
  /* ---- Base palette (raw brand values) ---- */
  --qcc-charcoal:    #0C0C0C; /* primary ink */
  --qcc-espresso:    #4B2E1E; /* deep warm brown — headings */
  --qcc-cocoa:       #6C4A33; /* mid brown — logo wordmark, muted text */
  --qcc-gold:        #D6C29A; /* champagne gold — accent */
  --qcc-gold-deep:   #BFA877; /* deeper gold for text/edges on light */
  --qcc-coral:       #E5988A; /* coral blush — secondary accent */
  --qcc-coral-deep:  #BC4B34; /* deeper coral — links, hovers */
  --qcc-terracotta:  #9A493D; /* terracotta — strongest warm pop */
  --qcc-sand:        #E8DCC5; /* sand beige — section background */
  --qcc-pearl:       #F7F5F0; /* pearl white — page background */
  --qcc-white:       #FFFFFF;

  /* Tints / shades used throughout */
  --qcc-sand-soft:   #F0E8D8; /* between sand and pearl */
  --qcc-gold-soft:   #EBDFC6; /* pale gold wash */
  --qcc-coral-soft:  #F6DDD6; /* pale coral wash */
  --qcc-ink-80:      rgba(12, 12, 12, 0.80);
  --qcc-ink-60:      rgba(12, 12, 12, 0.60);
  --qcc-ink-40:      rgba(12, 12, 12, 0.40);
  --qcc-line:        rgba(75, 46, 30, 0.16); /* hairline on light (espresso @ low alpha) */
  --qcc-line-strong: rgba(75, 46, 30, 0.30);

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--qcc-pearl);   /* default page background */
  --surface-card:    var(--qcc-white);   /* raised cards */
  --surface-sand:    var(--qcc-sand);    /* warm section blocks */
  --surface-sand-soft: var(--qcc-sand-soft);
  --surface-ink:     var(--qcc-charcoal);/* dark / luxe sections */
  --surface-gold:    var(--qcc-gold);    /* gold fill (badges, seals) */
  --surface-coral:   var(--qcc-coral);   /* coral fill */

  /* ---- Semantic: text ---- */
  --text-heading:    var(--qcc-espresso);   /* serif display + headings */
  --text-body:       #2B221C;               /* warm near-black body */
  --text-muted:      var(--qcc-cocoa);       /* captions, meta */
  --text-faint:      rgba(75, 46, 30, 0.78); /* timestamps, fine print */
  --text-on-ink:     var(--qcc-pearl);       /* text on charcoal */
  --text-on-ink-muted: rgba(247, 245, 240, 0.66);
  --text-on-gold:    var(--qcc-espresso);    /* text on gold fill */
  --text-link:       var(--qcc-terracotta);
  --text-link-hover: var(--qcc-coral-deep);

  /* ---- Semantic: accents ---- */
  --accent-gold:     var(--qcc-gold);
  --accent-gold-deep:var(--qcc-gold-deep);
  --accent-coral:    var(--qcc-coral);
  --accent-coral-deep: var(--qcc-coral-deep);
  --accent-terracotta: var(--qcc-terracotta);

  /* ---- Borders & lines ---- */
  --border-hairline: var(--qcc-line);
  --border-strong:   var(--qcc-line-strong);
  --border-gold:     var(--qcc-gold-deep);

  /* ---- Status (kept warm, used sparingly) ---- */
  --status-success:  #5C7A52; /* sage green */
  --status-warning:  #C98A2B; /* amber */
  --status-error:    #B23A2E; /* deep red-terracotta */
  --status-info:     var(--qcc-cocoa);

  /* ---- Gradients (metallic gold — matches crown asset) ---- */
  --gradient-gold: linear-gradient(135deg, #E9D9B4 0%, #D6C29A 40%, #BFA877 70%, #E4D2A8 100%); /* @kind color */
  --gradient-coral: linear-gradient(135deg, #EBA99B 0%, #E5988A 55%, #D57A68 100%); /* @kind color */
  /* readability scrim for text over imagery */
  --scrim-bottom: linear-gradient(to top, rgba(12,12,12,0.78) 0%, rgba(12,12,12,0.35) 45%, rgba(12,12,12,0) 100%); /* @kind color */
}

/* ==== tokens/typography.css ==== */
/* ===========================================================================
   Queens & Carryons Club — Typography System
   Playfair Display for editorial display + headings (warm, confident).
   Montserrat for body, UI, labels (clean, legible, no fuss).
   Scale is editorial: generous display sizes, restrained body.
   =========================================================================== */

:root {
  /* ---- Families ---- */
  --font-display: "Playfair Display", "Times New Roman", Georgia, serif; /* @kind font */
  --font-serif:   "Playfair Display", "Times New Roman", Georgia, serif; /* @kind font */
  --font-sans:    "Montserrat", "Helvetica Neue", Arial, sans-serif; /* @kind font */
  --font-body:    var(--font-sans); /* @kind font */

  /* ---- Weights ---- */
  --fw-light:     300; /* @kind font */
  --fw-regular:   400; /* @kind font */
  --fw-medium:    500; /* @kind font */
  --fw-semibold:  600; /* @kind font */
  --fw-bold:      700; /* @kind font */
  --fw-display:   800; /* @kind font */
  --fw-black:     900; /* @kind font */

  /* ---- Type scale (px) — editorial, fluid where it matters ---- */
  --fs-display:   clamp(48px, 7vw, 88px); /* @kind font */
  --fs-h1:        clamp(38px, 4.5vw, 58px); /* @kind font */
  --fs-h2:        clamp(30px, 3.2vw, 42px); /* @kind font */
  --fs-h3:        26px;
  --fs-h4:        21px;
  --fs-h5:        18px;
  --fs-body-lg:   18px;
  --fs-body:      16px;
  --fs-body-sm:   14px;
  --fs-caption:   13px;
  --fs-overline:  12px; /* uppercase eyebrow / kicker */

  /* ---- Line heights ---- */
  --lh-tight:     1.05;  /* @kind font */
  --lh-snug:      1.18;  /* @kind font */
  --lh-normal:    1.5;   /* @kind font */
  --lh-relaxed:   1.65;  /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display:   -0.02em; /* @kind font */
  --ls-heading:   -0.01em; /* @kind font */
  --ls-normal:    0; /* @kind font */
  --ls-wide:      0.08em;  /* @kind font */
  --ls-overline:  0.18em;  /* @kind font */

  /* ---- Semantic roles ---- */
  --text-display: var(--fw-display) var(--fs-display)/var(--lh-tight) var(--font-display); /* @kind font */
  --text-h1:      var(--fw-bold) var(--fs-h1)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-h2:      var(--fw-bold) var(--fs-h2)/var(--lh-snug) var(--font-display); /* @kind font */
  --text-h3:      var(--fw-semibold) var(--fs-h3)/var(--lh-snug) var(--font-display); /* @kind font */
}

/* ==== tokens/spacing.css ==== */
/* ===========================================================================
   Queens & Carryons Club — Spacing & Layout
   4px base grid. Editorial generosity — let things breathe.
   =========================================================================== */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Section rhythm ---- */
  --section-pad-y:   var(--space-24); /* @kind spacing */
  --section-pad-x:   var(--space-8); /* @kind spacing */
  --content-gap:     var(--space-6); /* @kind spacing */

  /* ---- Container widths ---- */
  --container-prose: 680px;   /* @kind spacing */
  --container-narrow: 880px; /* @kind spacing */
  --container:       1120px;  /* @kind spacing */
  --container-wide:  1320px; /* @kind spacing */
}

/* ==== tokens/effects.css ==== */
/* ===========================================================================
   Queens & Carryons Club — Radii, Shadows, Motion & Effects
   Editorial luxury: modest corner radii, soft warm shadows (never cold/black),
   gentle fades. Nothing bouncy or trend-driven.
   =========================================================================== */

:root {
  /* ---- Corner radii (restrained — editorial, not bubbly) ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Shadows (warm-tinted, soft, low-contrast) ---- */
  --shadow-xs:  0 1px 2px rgba(75, 46, 30, 0.06);
  --shadow-sm:  0 2px 6px rgba(75, 46, 30, 0.08);
  --shadow-md:  0 6px 18px rgba(75, 46, 30, 0.10);
  --shadow-lg:  0 14px 38px rgba(75, 46, 30, 0.14);
  --shadow-xl:  0 28px 64px rgba(75, 46, 30, 0.18);
  /* gold glow used on premium/seal elements */
  --shadow-gold: 0 8px 28px rgba(191, 168, 119, 0.35);
  /* inset hairline for cards on cream */
  --ring-hairline: inset 0 0 0 1px rgba(75, 46, 30, 0.08); /* @kind shadow */

  /* ---- Focus ring (accessible, warm) ---- */
  --focus-ring: 0 0 0 3px rgba(213, 122, 104, 0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:    140ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    400ms; /* @kind other */

  /* ---- Blur / glass (used sparingly, on imagery only) ---- */
  --blur-sm: blur(6px); /* @kind other */
  --blur-md: blur(14px); /* @kind other */
}

/* Respect reduced motion globally for consumers that opt in. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms; /* @kind other */
    --dur-base: 0ms; /* @kind other */
    --dur-slow: 0ms; /* @kind other */
  }
}

/* ==== tokens/base.css ==== */
/* ===========================================================================
   Queens & Carryons Club — Base element defaults
   Light, brand-faithful resets so raw HTML inherits the voice of the brand.
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--text-heading);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
  margin: 0 0 0.4em;
  font-weight: var(--fw-bold);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-semibold); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); }

/* Editorial eyebrow / kicker — a signature brand device */
.qcc-overline {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--accent-terracotta);
}

::selection { background: var(--qcc-coral-soft); color: var(--qcc-espresso); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }

img { max-width: 100%; display: block; }