/* SlickCut Studios – design tokens.
   Generated by hand from the design system (tokens.json v1 + README).
   Variables only. Do not add values here that are not in the design system. */

/* ---------- Fonts (self-hosted, latin subset) ---------- */
/* Headline serif: Newsreader (variable, weight + optical size), replacing
   Noto Serif Display on client request for better readability. */
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2");
  font-weight: 200 800; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Brand constants ---------- */
  --brand-ink: #1c1c1b;
  --brand-bone: #e2e2de;
  --brand-cream: #f4ede1;
  --brand-beige: #b7ac8b;
  --brand-brown: #6a5d52;
  --brand-film: #0a0a0a;

  /* ---------- Semantic colour: Paper theme (default) ---------- */
  --surface-100: #e2e2de;
  --surface-200: #f4ede1;
  --surface-300: #d6d4cd;
  --ink: #1c1c1b;
  --ink-muted: #5a5a55;
  --accent: #b7ac8b;
  --accent-hover: #a69a77;
  --on-accent: #1c1c1b;
  --accent-text: #6a5d52;
  --line: #1c1c1b29;
  --line-strong: #1c1c1b;
  --focus: #6a5d52;
  --scrim: #1c1c1bb3;
  --success: #2f6b4a;
  --error: #9a3b2c;

  /* ---------- Type ---------- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: Montserrat, "Helvetica Neue", Arial, sans-serif;

  --fs-display-xl: 60px;  --lh-display-xl: 64px;  --fw-display-xl: 500; --ls-display-xl: -0.5px;
  --fs-heading-1: 44px;   --lh-heading-1: 52px;   --fw-heading-1: 500;
  --fs-heading-2: 32px;   --lh-heading-2: 40px;   --fw-heading-2: 500;
  --fs-heading-3: 24px;   --lh-heading-3: 32px;   --fw-heading-3: 500;
  --fs-price: 48px;       --lh-price: 52px;       --fw-price: 500;
  --fs-quote: 24px;       --lh-quote: 36px;       --fw-quote: 400;

  --fs-lead: 20px;        --lh-lead: 32px;        --fw-lead: 400;
  --fs-body: 17px;        --lh-body: 28px;        --fw-body: 400;   --fw-body-strong: 600;
  --fs-small: 14px;       --lh-small: 22px;       --fw-small: 400;
  --fs-eyebrow: 12px;     --lh-eyebrow: 16px;     --fw-eyebrow: 600; --ls-eyebrow: 1.5px;
  --fs-button: 14px;      --lh-button: 20px;      --fw-button: 600;  --ls-button: 1px;
  --fs-nav: 16px;         --lh-nav: 20px;         --fw-nav: 500;     --ls-nav: 0.25px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --container: 1200px;
  --measure: 680px;

  /* ---------- Radius, border, shadow ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --border-hairline: 1px;
  --border-card: 2px;
  --shadow-none: none;
  --shadow-frame: 0 24px 48px -24px rgba(28, 28, 27, 0.35);

  /* ---------- Motion (README: 300–500ms ease-out, no bounce, no parallax) ---------- */
  --duration-fast: 300ms;
  --duration-slow: 500ms;
  --ease-out: ease-out;

  /* ---------- Layout helpers derived from the tokens above ---------- */
  --gutter: var(--space-6);
  --section-pad: var(--space-9);
}

/* Below 768px: mobile type sizes and spacing from the design system notes */
@media (max-width: 767px) {
  :root {
    --fs-display-xl: 40px; --lh-display-xl: 44px;
    --fs-heading-1: 32px;  --lh-heading-1: 40px;
    --gutter: var(--space-4);
    --section-pad: var(--space-8);
  }
}

/* ---------- Cinema theme: nav, hero, film band, final CTA, footer ---------- */
.theme-cinema {
  --surface-100: #1c1c1b;
  --surface-200: #262624;
  --surface-300: #0a0a0a;
  --ink: #e2e2de;
  --ink-muted: #a8a8a2;
  --accent-hover: #c8bd9a;
  --accent-text: #cfc4a2;
  --line: #e2e2de29;
  --line-strong: #e2e2de;
  --focus: #cfc4a2;
  --scrim: #0a0a0acc;
  --success: #86c29f;
  --error: #e08a76;
  --shadow-frame: 0 24px 48px -24px rgba(0, 0, 0, 0.7);
}