/* Copied from 2026/Website/tokens/frost-prins-tokens.css. Edit the source, then re-copy; do not edit here. */
/*
 * Frost & Prins design tokens · Edition 2026
 * Mirrors the Figma file "Website 2026": collections Primitives, Theme (Cream / Green / Gold), Layout,
 * and the EB Garamond text styles. Change values in Figma first, then here, so the two stay identical.
 *
 * Theme modes mirror the three logo colourways:
 *   default (Cream) · [data-theme="green"] · [data-theme="gold"]
 */

@layer tokens, base;

/* Fonts: self-hosted EB Garamond (SIL Open Font License, see ../fonts/OFL.txt) */
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("../fonts/EBGaramond-Italic-Variable.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

@layer tokens {
  :root {
    /* Primitives: the three brand colours (core) and tints mixed only from them */
    --fp-green-950: #18231e;
    --fp-green-900: #1f2d26; /* core: Shutter Green */
    --fp-green-800: #2e3b34;
    --fp-green-700: #455049;
    --fp-green-600: #677069;
    --fp-gold-700: #7f6838;  /* bronze: gold for small text on light grounds, 4.7:1 */
    --fp-gold-500: #b89b5e;  /* core: Protea Gold, ornament only on light grounds */
    --fp-gold-300: #cdb98f;
    --fp-cream-50: #faf8f4;
    --fp-cream-100: #f4f1ea; /* core: Limewash */
    --fp-cream-200: #ece5d6;
    --fp-cream-300: #e2d7c0;

    /* Theme: Cream (default) */
    --color-surface-base: var(--fp-cream-100);
    --color-surface-raised: var(--fp-cream-50);
    --color-surface-band: var(--fp-cream-200);
    --color-surface-inverse: var(--fp-green-900);
    --color-text-primary: var(--fp-green-900);
    --color-text-secondary: var(--fp-green-700);
    --color-text-muted: var(--fp-green-600);
    --color-text-accent: var(--fp-gold-700);
    --color-text-inverse: var(--fp-cream-100);
    --color-mark-primary: var(--fp-gold-500);
    --color-mark-ampersand: var(--fp-gold-500);
    --color-border-rule: var(--fp-gold-500);
    --color-border-subtle: var(--fp-cream-300);
    --color-action-primary: var(--fp-green-900);
    --color-action-primary-hover: var(--fp-green-950);
    --color-action-on-primary: var(--fp-cream-100);
    --color-focus-ring: var(--fp-gold-700);

    /* Layout */
    --space-2xs: 4px;
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    --space-6xl: 192px;
    --radius-none: 0;
    --radius-sm: 2px;
    --stroke-hairline: 1px;
    --stroke-rule: 1.5px;
    --measure: 68ch;

    /* Type */
    --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
    --text-display-xl: clamp(3.25rem, 2rem + 4.2vw, 6rem);       /* 96px max */
    --text-display-l: clamp(2.75rem, 1.9rem + 2.9vw, 4.5rem);     /* 72px */
    --text-heading-1: clamp(2.25rem, 1.6rem + 2.1vw, 3.5rem);     /* 56px */
    --text-heading-2: clamp(1.875rem, 1.5rem + 1.2vw, 2.5rem);    /* 40px */
    --text-heading-3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);    /* 28px */
    --text-title-caps: clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); /* 22px */
    --text-body-large: clamp(1.25rem, 1.18rem + 0.3vw, 1.375rem); /* 22px */
    --text-body: 1.1875rem;   /* 19px: EB Garamond runs small, so body never goes below this */
    --text-body-small: 1rem;  /* 16px */
    --text-label: 0.8125rem;  /* 13px */
    --text-caption: 0.9375rem; /* 15px */
    --text-quote: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem); /* 28px */
    --tracking-caps-title: 0.18em;
    --tracking-caps-label: 0.16em;
  }

  [data-theme="green"] {
    --color-surface-base: var(--fp-green-900);
    --color-surface-raised: var(--fp-green-800);
    --color-surface-band: var(--fp-green-800);
    --color-surface-inverse: var(--fp-cream-100);
    --color-text-primary: var(--fp-cream-100);
    --color-text-secondary: var(--fp-cream-300);
    --color-text-muted: var(--fp-gold-300);
    --color-text-accent: var(--fp-gold-500);
    --color-text-inverse: var(--fp-green-900);
    --color-mark-primary: var(--fp-gold-500);
    --color-mark-ampersand: var(--fp-gold-500);
    --color-border-rule: var(--fp-gold-500);
    --color-border-subtle: var(--fp-green-800);
    --color-action-primary: var(--fp-gold-500);
    --color-action-primary-hover: var(--fp-gold-300);
    --color-action-on-primary: var(--fp-green-900);
    --color-focus-ring: var(--fp-gold-300);
  }

  [data-theme="gold"] {
    --color-surface-base: var(--fp-gold-500);
    --color-surface-raised: var(--fp-gold-300);
    --color-surface-band: var(--fp-gold-300);
    --color-surface-inverse: var(--fp-green-900);
    --color-text-primary: var(--fp-green-900);
    --color-text-secondary: var(--fp-green-950);
    --color-text-muted: var(--fp-green-950);
    --color-text-accent: var(--fp-green-950);
    --color-text-inverse: var(--fp-cream-100);
    --color-mark-primary: var(--fp-green-900);
    --color-mark-ampersand: var(--fp-cream-100);
    --color-border-rule: var(--fp-green-900);
    --color-border-subtle: var(--fp-gold-700);
    --color-action-primary: var(--fp-green-900);
    --color-action-primary-hover: var(--fp-green-950);
    --color-action-on-primary: var(--fp-cream-100);
    --color-focus-ring: var(--fp-green-950);
  }
}

/* Text styles: one class per Figma text style (Display/XL → .display-xl) */
@layer base {
  .display-xl, .display-l, .heading-1, .heading-2, .heading-3, .title-caps,
  .body-large, .body, .body-small, .label-caps, .caption, .quote {
    font-family: var(--font-serif);
    font-weight: 400;
  }
  .display-xl { font-size: var(--text-display-xl); line-height: 1; letter-spacing: -0.01em; }
  .display-l  { font-size: var(--text-display-l); line-height: 1.04; letter-spacing: -0.005em; }
  .heading-1  { font-size: var(--text-heading-1); line-height: 1.1; letter-spacing: -0.005em; }
  .heading-2  { font-size: var(--text-heading-2); line-height: 1.16; }
  .heading-3  { font-size: var(--text-heading-3); line-height: 1.25; font-weight: 500; }
  .title-caps { font-size: var(--text-title-caps); line-height: 1.3; letter-spacing: var(--tracking-caps-title); text-transform: uppercase; }
  .body-large { font-size: var(--text-body-large); line-height: 1.5; }
  .body       { font-size: var(--text-body); line-height: 1.55; }
  .body-small { font-size: var(--text-body-small); line-height: 1.5; }
  .label-caps { font-size: var(--text-label); line-height: 1.4; letter-spacing: var(--tracking-caps-label); text-transform: uppercase; font-weight: 500; }
  .caption    { font-size: var(--text-caption); line-height: 1.4; font-style: italic; }
  .quote      { font-size: var(--text-quote); line-height: 1.35; font-style: italic; }

  /* Base surfaces: the parts the browser draws still carry the brand */
  html {
    color-scheme: light;
    background: var(--color-surface-base);
    color: var(--color-text-primary);
    font-family: var(--font-serif);
    font-size: 100%;
    font-kerning: normal;
    font-variant-numeric: oldstyle-nums proportional-nums;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  body { font-size: var(--text-body); line-height: 1.55; }
  [data-theme] { background: var(--color-surface-base); color: var(--color-text-primary); }
  p { max-width: var(--measure); }
  h1, h2, h3 { text-wrap: balance; }
  table, .tabular { font-variant-numeric: lining-nums tabular-nums; }
  a { color: inherit; text-decoration-color: var(--color-border-rule); text-decoration-thickness: var(--stroke-hairline); text-underline-offset: 0.22em; }
  a:hover { text-decoration-thickness: var(--stroke-rule); }
  ::selection { background: var(--color-text-primary); color: var(--color-surface-base); }
  :focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
  input, textarea, select { caret-color: var(--color-text-accent); accent-color: var(--color-action-primary); }
  hr { border: 0; border-top: var(--stroke-rule) solid var(--color-border-rule); }

  /* Components matching Figma "Web/Button" and the guide's form field (page 17) */
  .button {
    display: inline-flex; align-items: center; justify-content: center;
    padding: var(--space-md) 1.75rem;
    border: var(--stroke-hairline) solid transparent; border-radius: var(--radius-none);
    background: var(--color-action-primary); color: var(--color-action-on-primary);
    font: 500 var(--text-label) / 1.4 var(--font-serif);
    letter-spacing: var(--tracking-caps-label); text-transform: uppercase; text-decoration: none;
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  .button:hover { background: var(--color-action-primary-hover); }
  .button--secondary { background: transparent; color: var(--color-text-primary); border-color: var(--color-text-primary); }
  .button--secondary:hover { background: var(--color-surface-band); }
  .button:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
  .field-label { display: block; margin-bottom: var(--space-xs); }
  .field {
    width: 100%; padding: var(--space-sm) var(--space-md);
    background: var(--color-surface-raised); color: var(--color-text-primary);
    border: var(--stroke-hairline) solid var(--color-text-muted); border-radius: var(--radius-sm); /* ≥3:1 field edge in every theme */
    font: 400 var(--text-body) / 1.4 var(--font-serif);
  }
  .field::placeholder { color: var(--color-text-muted); opacity: 1; }
  .field:focus-visible { outline: none; border-color: var(--color-focus-ring); box-shadow: inset 0 0 0 1px var(--color-focus-ring); }
}