@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&display=swap");

/* ============================================================
   Inspiration Space — external pack · shared token file
   ONE file, per Phase 3 §25. Concatenated verbatim from the
   project token set (tokens/colors, fonts, typography,
   spacing, effects) on 2 September 2026.

   Do not add a colour, a font size, a radius or a spacing step
   here. Everything in the external templates resolves to the
   values below; that was verified across all twelve templates
   in Phase 2 and is a freeze condition.

   Font paths are relative to this file: ../../assets/fonts/.
   ============================================================ */

/* Fonts are self-hosted. Owner confirmed web embedding and self-hosting
   permission on 3 September 2026. */
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sentient";
  src: url("../fonts/Sentient-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* --- Twentieth Century. Medium + Bold are the only supplied faces, so Medium
       covers 300–500 rather than letting the browser synthesise a Light.
       LICENCE: web use and redistribution unconfirmed — blocks packaging and
       activation. See _private/README.md and blocker B-21. --- */
@font-face {
  font-family: "Twentieth Century";
  src: url("../fonts/TwentiethCentury-Medium.ttf") format("truetype");
  font-weight: 300 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Twentieth Century";
  src: url("../fonts/TwentiethCentury-MediumItalic.ttf") format("truetype");
  font-weight: 300 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Twentieth Century";
  src: url("../fonts/TwentiethCentury-Bold.ttf") format("truetype");
  font-weight: 600 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Twentieth Century";
  src: url("../fonts/TwentiethCentury-BoldItalic.ttf") format("truetype");
  font-weight: 600 800; font-style: italic; font-display: swap;
}

:root {
  /* ---------- Palette ---------- */
  /* COLOUR ROLES · B-32, approved.
     --orange is an ACCENT, never the colour carrying readable text. It may
     be an underline, a rule, a border, a bullet, a decorative icon, a
     background whose foreground pairing passes, or a state accent that is
     not the only indicator. Words and numbers whose meaning depends on
     being read take --text-strong (or --soft-black) on paper, stone, white
     and lilac, and --text-on-black on soft black. The large-text allowance
     is not used anywhere in this pack. Measured: orange text is 2.76:1 on
     paper, 2.34:1 on stone, 1.51:1 on lilac and 4.38:1 on soft black. */
  --orange: #eb7e47;
  --orange-press: #cf6a34;
  --soft-black: #363636;
  --lilac: #c9b9dc;
  --lilac-blob: #b9a3d4;
  --lilac-blob-tip: #d8cbe8;
  --teal: #57818e;
  --cream: #f8f4f0;
  --stone: #eeecea;
  --elephant: #bcb3ac;
  --paper: #ffffff;
  --ground-black: #2b2a29;

  /* ---------- Surfaces ---------- */
  --surface-cream: var(--cream);
  --surface-paper: var(--paper);
  --surface-black: var(--ground-black);
  --surface-divider: #d8d0c8;
  --surface-divider-strong: rgba(54, 54, 54, 0.5);
  --surface-divider-on-black: rgba(245, 239, 233, 0.15);
  --surface-divider-on-lilac: rgba(54, 54, 54, 0.18);

  /* ---------- Text ---------- */
  --text-body: var(--soft-black);
  --text-strong: var(--soft-black);
  --text-muted: #6b6560;
  /* NOT FOR TEXT in the external pack — DEV-32. 2.76:1 on paper,
     2.34:1 on stone, so it fails the 4.5 minimum on every light ground
     here. Captions, meta lines and status lines use --text-muted. The
     declaration is retained rather than deleted because the internal
     pack has not been read and Q11 is open; removing a shared token
     before that answer would be a unilateral change. */
  --text-faint: #a49a90;
  --text-on-black: #f5efe9;
  --text-accent: var(--orange);

  /* ---------- Interactive ----------
     --action-label is the button's TEXT colour and is deliberately not
     --soft-black: soft-black on orange measures 4.38:1, --ground-black
     measures 5.19:1. B-32 / DEV-36. --action-fg is retained as the older
     name for compatibility with anything already referencing it. */
  --action-bg: var(--orange);
  --action-label: var(--ground-black);
  --action-fg: var(--soft-black);
  --action-bg-press: var(--orange-press);
  --action-outline: var(--soft-black);

  /* ---------- Icon accents ---------- */
  --icon-mono: var(--soft-black);
  --icon-accent-commercial: var(--orange);
  --icon-accent-people: var(--lilac);
  --icon-accent-sustainability: var(--teal);

  /* ---------- Type ---------- */
  --font-display: "Sentient", Georgia, serif;
  --font-body: "Twentieth Century", system-ui, sans-serif;
  --font-hand: "Kalam", cursive;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --weight-display: 300;
  --weight-body: 400;
  --weight-label: 500;
  --weight-eyebrow: 700;

  /* Display scale — five steps. Do not add a sixth. */
  --display-hero: clamp(34px, 4.2vw, 48px);
  --display-section: 34px;
  --display-band: 26px;
  --display-card: 21px;
  --display-card-sm: 18px;
  --leading-display: 1.12;
  --leading-display-tight: 1.06;

  /* Numerals. Never used for words. */
  --numeral-lg: 96px;
  --numeral-xl: clamp(56px, 9vw, 108px);

  /* Body */
  --body-lead: 20px;
  --body-base: 18px;
  --body-sm: 16px;
  --body-xs: 14px;
  --leading-body: 1.62;

  /* Legal prose — DEV-06, raised from 15.5px at review for long-form
     readability. Uses the existing 17px step; not a new token family. */
  --body-legal: 17px;
  --leading-legal: 1.75;

  /* Eyebrows — two specs, that is the whole set. */
  --eyebrow-size: 11px;
  --eyebrow-tracking: 2.5px;
  --eyebrow-card-size: 9.5px;
  --eyebrow-card-tracking: 1.5px;

  /* Button labels */
  --button-size: 14px;
  --button-tracking: 2px;
  --button-size-sm: 12px;
  --button-tracking-sm: 1px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 56px; --space-9: 80px;

  --pad-band: 88px;
  --pad-section: 64px;
  --pad-tight: 44px;
  --pad-utility: 28px;
  --pad-card: 22px;
  --pad-card-feature: 40px;
  --pad-card-compact: 14px;
  --pad-social: 34px;

  /* ---------- Layout shell — frozen, never varied per page ---------- */
  --container-max: 1360px;
  --measure-body: 720px;
  --measure-legal: 34em;
  --measure-form: 480px;
  --gutter: clamp(16px, 2.5vw, 28px);
  --nav-height: 96px;

  /* Navigation gap — DEV-14. 32px normally, 24px below 1024px so the
     approved six-item set clears the 840–880px band without removing a
     destination, reducing type, or compressing a hit area. The media
     query is in components.css; this is the value it switches. */
  --nav-gap: 32px;
  --nav-gap-compact: 24px;

  /* Breakpoints, for reference — CSS cannot use variables in media
     queries, so these are documentation, not switches.
     drawer 840px · single column 600px · nav gap 1024px */

  /* ---------- Ratios ---------- */
  --ratio-feature: 16 / 10;
  --ratio-video: 16 / 9;
  --ratio-portrait: 4 / 5;
  --ratio-thumb: 1 / 1;
  --ratio-wide: 16 / 6;

  --grid-card: 260px;
  --grid-card-feature: 300px;

  --rule-gap: 28px;
  --rule-gap-tight: 24px;
  --rule-gap-loose: 36px;

  /* ---------- Corners, borders, shadows ---------- */
  --radius-control: 10px;
  --radius-card: 0px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --border-hairline: 1px solid var(--surface-divider);
  --border-outline: 1.5px solid var(--action-outline);
  --border-ground: 1px solid var(--surface-divider);
  --border-ground-strong: 1.5px solid var(--surface-divider-strong);
  --border-on-black: 1px solid var(--surface-divider-on-black);
  --stroke-icon: 1.8px;

  --shadow-card: 0 2px 16px rgba(54, 54, 54, 0.08);
  --shadow-raised: 0 6px 28px rgba(54, 54, 54, 0.12);
  --shadow-plate: 0 18px 40px -18px rgba(43, 42, 41, 0.3);

  --rule-colour: rgba(54, 54, 54, 0.08);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-hover: 180ms;
  --dur-ambient: 18s;
}