/* ==========================================================================
   tokens.css — Design tokens
   Build-time copy of the "OBJKT" design system artifact tokens (colors,
   typography, spacing and shape); the artifact is the source of truth.
   Every other stylesheet must reference these variables, never raw values.
   Usage rules and contrast guidance live in the artifact (URL in CLAUDE.md,
   section "Design system"; pointer in TOKENS.md).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Self-hosted files in src/assets/fonts/, served as /assets/fonts/.
   Only the weights actually used are declared, to keep page weight low.
   The build fails if a file referenced below is missing (see eleventy.config.js).
   Roles: Urbanist = headings, Inter = body, Caveat = handwritten accent,
   Manrope = metadata and prices, Josefin Sans = logo wordmark only.
   -------------------------------------------------------------------------- */

/* Urbanist: headings, sub-headings, eyebrows, nav, buttons */
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/urbanist-v18-latin_latin-ext-500.woff2") format("woff2");
}
@font-face {
  font-family: "Urbanist";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/urbanist-v18-latin_latin-ext-600.woff2") format("woff2");
}

/* Inter: body text. Latin subset (with œ/Œ, €, typographic quotes); source in fonts-src/. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-v20-latin-regular.woff2") format("woff2");
}

/* Caveat: handwritten accent. FR/NL/EN subset; source in fonts-src/. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/caveat-v23-fr-nl-en-regular.woff2") format("woff2");
}

/* Manrope: metadata and prices */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/manrope-v20-latin_latin-ext-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/manrope-v20-latin_latin-ext-500.woff2") format("woff2");
}

/* Josefin Sans: logo wordmark only (weight 500) */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/josefin-sans-v34-latin_latin-ext-500.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Metric-matched fallback faces (design system, Typography). Local Arial (or the
   metric-identical Liberation Sans) resized to each web font's average text width and
   line metrics, so the font-display swap does not move the layout (CLS). Values
   measured from the woff2 files above (capsize method); recompute if a file changes.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Urbanist Fallback";
  font-weight: 500;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 100.93%;
  ascent-override: 94.12%;
  descent-override: 24.77%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Urbanist Fallback";
  font-weight: 600;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 102.31%;
  ascent-override: 92.86%;
  descent-override: 24.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Fallback";
  font-weight: 400;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 107.34%;
  ascent-override: 90.25%;
  descent-override: 22.47%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Caveat Fallback";
  font-weight: 400;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 76.59%;
  ascent-override: 125.35%;
  descent-override: 39.17%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 400;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 103.57%;
  ascent-override: 102.93%;
  descent-override: 28.97%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback";
  font-weight: 500;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 105.39%;
  ascent-override: 101.15%;
  descent-override: 28.47%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Josefin Sans Fallback";
  font-weight: 500;
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 104.23%;
  ascent-override: 71.96%;
  descent-override: 23.99%;
  line-gap-override: 0%;
}

:root {
  /* ------------------------------------------------------------------------
     1. Palette (raw values) — do not use directly in components
     ------------------------------------------------------------------------ */
  --palette-cream: #fdf2e7;   /* warm off-white */
  --palette-mist:  #aabcce;   /* soft grey-blue */
  --palette-wine:  #5d1516;   /* deep burgundy */
  --palette-ice:   #d0e1e8;   /* pale blue, logo only */

  /* ------------------------------------------------------------------------
     2. Semantic colors — use these in components
     ------------------------------------------------------------------------ */
  --color-bg:            var(--palette-cream); /* page background */
  --color-surface:       var(--palette-mist);  /* alternate section background */
  --color-surface-dark:  var(--palette-wine);  /* contrast band (call-to-action, footer) */

  --color-text:          var(--palette-wine);  /* body text and headings */
  --color-text-inverse:  var(--palette-cream); /* text on wine background */
  --color-accent:        var(--palette-wine);  /* links, buttons, handwritten accents */

  --color-btn-bg:        var(--palette-wine);
  --color-btn-text:      var(--palette-cream);
  --color-btn-bg-hover:  #7a2224;              /* wine lightened ~10% for hover */

  /* Inverted button, used inside .section--dark */
  --color-btn-inverse-bg:       var(--palette-cream);
  --color-btn-inverse-text:     var(--palette-wine);
  --color-btn-inverse-bg-hover: var(--palette-mist); /* wine on mist = 6.8:1 */

  /* Logo: ice wordmark on a wine block. Ice is reserved for the logo,
     never use it for body text or on cream/mist backgrounds. */
  --color-logo-bg:       var(--palette-cream);
  --color-logo-text:     var(--palette-wine);

  --color-border:        var(--palette-mist);  /* decorative only, never for text */
  --color-border-control: #9b7a73;            /* form control edges: 3.51:1 on cream, 3.87:1 on white; fails on ice and mist, so forms sit on cream only */
  --color-focus:         var(--palette-wine);  /* keyboard focus outline */

  /* ------------------------------------------------------------------------
     3. Typography
     ------------------------------------------------------------------------ */
  --font-primary:   "Urbanist", "Urbanist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* headings */
  --font-secondary: "Urbanist", "Urbanist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* sub-headings, eyebrows, nav, buttons */
  --font-text:      "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;    /* body */
  --font-accent:    "Caveat", "Caveat Fallback", cursive;                                            /* handwritten highlights */
  --font-meta:      "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;  /* metadata, prices */
  --font-logo:      "Josefin Sans", "Josefin Sans Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; /* logo wordmark */

  --font-weight-primary:   600;
  --font-weight-secondary: 500;
  --font-weight-text:      400;
  --font-weight-accent:    400;
  --font-weight-meta:      400;
  --font-weight-meta-strong: 500; /* prices */
  --font-weight-logo:      500;

  /* Fluid type scale: min (mobile 375px) -> max (desktop 1280px) */
  --font-size-xs:   0.8125rem;                                   /* 13px  captions, legal */
  --font-size-sm:   0.9375rem;                                   /* 15px  eyebrow, metadata */
  --font-size-base: 1rem;                                        /* 16px  body */
  --font-size-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);  /* 18-20px lead paragraph */
  --font-size-h3:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);         /* 24-32px section title */
  --font-size-h2:   clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);     /* 28-40px */
  --font-size-h1:   clamp(2.25rem, 1.75rem + 2.2vw, 3.5rem);     /* 36-56px hero */
  --font-size-accent: clamp(2rem, 1.7rem + 1.5vw, 3rem);         /* Caveat has a small x-height, so it runs larger */

  --line-height-tight: 1.15;
  --line-height-base:  1.6;
  --line-height-logo:   1;     /* text logo in the header */
  --line-height-accent: 1.2;   /* handwritten accent */
  --underline-offset:   0.2em; /* link and nav underline offset */
  --letter-spacing-eyebrow: 0.08em;
  --letter-spacing-nav:     0.05em;  /* nav and language switch links */
  --letter-spacing-logo:    -0.05em; /* logo wordmark tracking */

  /* ------------------------------------------------------------------------
     4. Spacing (8px grid)
     ------------------------------------------------------------------------ */
  --space-1: 0.5rem;   /*  8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-6: 3rem;     /* 48px */
  --space-8: 4rem;     /* 64px */
  --space-section: clamp(4rem, 3rem + 4vw, 7rem); /* vertical padding of each section */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);      /* side padding of the page */

  /* ------------------------------------------------------------------------
     5. Layout and shape
     ------------------------------------------------------------------------ */
  --max-width:      1140px;
  --max-width-text: 65ch;     /* comfortable reading line length */
  --max-width-form: 32rem;    /* compact single-column forms (newsletter band) */
  --radius-sm:      8px;
  --radius-lg:      24px;
  --radius-btn:     999px;    /* pill buttons */
  --shadow-soft:    0 8px 24px rgb(93 21 22 / 0.08); /* wine-tinted, very light */

  --btn-padding-block:  0.75rem;  /* 12px */
  --btn-padding-inline: 1.75rem;  /* 28px */
  --control-height:     3rem;     /* 48px: inputs; also the minimum touch target */

  --focus-width:  2px;   /* keyboard focus outline thickness */
  --focus-offset: 3px;   /* gap between element and outline */

  --icon-size: 1.25em;   /* inline icons scale with the surrounding text */

  /* Sticky header: stacking order and the space kept above anchors and focus. */
  --z-header:      5;    /* above page content */
  --z-skip-link:   10;   /* above the sticky header */
  --scroll-offset: 7rem; /* 112px, covers the one-row header (about 80px on phones) */

  /* ------------------------------------------------------------------------
     6. Motion
     ------------------------------------------------------------------------ */
  --transition-fast: 150ms ease-out;
}

/* Respect users who disable animations at OS level. */
@media (prefers-reduced-motion: reduce) {
  :root { --transition-fast: 0ms; }
}

/* ==========================================================================
   Base styles built on the tokens
   ========================================================================== */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-weight: var(--font-weight-text);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

h1, h2, h3 {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-2);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

/* Eyebrow: short label above a section title. Class only, so h4 keeps its own role. */
.eyebrow {
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-secondary);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-eyebrow);
  text-transform: uppercase;
  margin: 0 0 var(--space-1);
}

/* Handwritten highlight, e.g. "a moment to create". Use sparingly, large sizes only. */
.accent-script {
  font-family: var(--font-accent);
  font-weight: var(--font-weight-accent);
  font-size: var(--font-size-accent);
  color: var(--color-accent);
  line-height: var(--line-height-accent);
}

a { color: var(--color-accent); text-underline-offset: var(--underline-offset); }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
}

.btn {
  display: inline-block;
  padding: var(--btn-padding-block) var(--btn-padding-inline);
  border-radius: var(--radius-btn);
  background: var(--color-btn-bg);
  color: var(--color-btn-text);
  font-family: var(--font-secondary);
  font-weight: var(--font-weight-secondary);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}
.btn:hover { background: var(--color-btn-bg-hover); }

/* Section background variants */
.section          { padding-block: var(--space-section); padding-inline: var(--gutter); }
.section--surface { background: var(--color-surface); }
.section--dark    { background: var(--color-surface-dark); color: var(--color-text-inverse); }
.section--dark a  { color: var(--color-text-inverse); }
.section--dark .btn { background: var(--color-btn-inverse-bg); color: var(--color-btn-inverse-text); }
.section--dark .btn:hover { background: var(--color-btn-inverse-bg-hover); }

.container { max-width: var(--max-width); margin-inline: auto; }