/* pb_public/css/tokens.css
   Design tokens only: no selectors that style elements. 4px base unit. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/CormorantGaramond-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-VariableFont_opsz%2Cwght.woff2") format("woff2");
  font-weight: 100 1000; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("/assets/fonts/DMSans-Italic-VariableFont_opsz%2Cwght.woff2") format("woff2");
  font-weight: 100 1000; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/SpaceMono-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  color-scheme: light dark;

  --mint: #69D09D;
  --forest-teal: #235451;
  --almond: #E1D2C1;
  --coral: #FF6600;
  --amber: #F2B04A;

  --soft-white: #FAFAFA;
  --warm-white: #FCFEFF;
  --panther: #1F2227;
  --obsidian: #0F1111;
  --night: #050505;
  --graphite: #353A3E;
  --gray: #808080;
  --ash: #BFBFBF;
  --french: #ADACB5;
  --platinum: #E0E8E0;

  --slate: #5F646A;

  --hairline: light-dark(rgb(31 34 39 / 0.12), rgb(250 250 250 / 0.14));

  --font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-hand: "MFO Hand", "Cormorant Garamond", Georgia, serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-md:   1rem;
  --text-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-xl:   clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
  --text-2xl:  clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem);
  --text-3xl:  clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --text-hero: min(clamp(3rem, 1.8rem + 6vw, 7.5rem), 18vh);

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --measure: 68ch;

  --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-24: 96px; --space-32: 128px;

  --gutter: var(--space-4);
  --page-max: 1440px;

  --content-inset: max(
    var(--gutter),
    calc((100vw - var(--page-max)) / 2 + var(--gutter))
  );

  --section-space: clamp(4rem, 5.25vw + 2.75rem, 7.5rem);
  --column: 880px;

  --radius-sm: 4px;
  --radius-md: 8px;

  --ease-calm: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 600ms;

  --z-base: 0;
  --z-dock: 50;
  --z-nav: 100;
  --z-sheet: 200;
  --z-toast: 300;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --logomark: url("/assets/logomark.svg");

  /* Semantic colour */
  --bg:             light-dark(var(--soft-white), var(--panther));
  --surface:        light-dark(var(--warm-white), color-mix(in srgb, var(--panther), var(--soft-white) 6%));
  --surface-sunken: light-dark(var(--platinum), var(--obsidian));
  --ambient:        var(--bg);

  --text:        light-dark(var(--panther), var(--soft-white));
  --text-muted:  light-dark(var(--slate), var(--french));
  --text-faint:  var(--gray);

  --border:        light-dark(var(--platinum), var(--graphite));
  --border-strong: light-dark(var(--ash), var(--gray));

  --cta:              var(--forest-teal);
  --cta-text:         var(--warm-white);
  --cta-on-dark:      var(--mint);
  --cta-on-dark-text: var(--obsidian);
  --cta-print:        var(--almond);
  --cta-print-text:   var(--panther);
  --accent:           var(--coral);
  --shop-active:      var(--amber);   /* Shop: active menu text, bar and outline */

  --focus:          light-dark(var(--forest-teal), var(--mint));
  --nav-active:     light-dark(var(--forest-teal), var(--mint));
  --nav-active-bar: var(--mint);

  --success: light-dark(#2E7D5B, #69D09D);
  --error:   light-dark(#C0392B, #FF7A6B);
  --warning: light-dark(#B26A00, #F2B04A);
  --info:    light-dark(#2F6F8F, #7FB8D6);
  --neutral: light-dark(var(--graphite), var(--ash));

  --btn-filled-bg:   var(--warm-white);
  --btn-filled-text: var(--panther);

  --hero-scrim: light-dark(rgb(250 250 250 / 0.5), rgb(15 17 17 / 0.45));
  --hero-text:  light-dark(var(--panther), var(--soft-white));

  --mat:          #FFFFFF;
  --viewer-bg:    var(--obsidian);
  --viewer-text:  var(--soft-white);
  --viewer-muted: var(--gray);

  --footer-bg:          light-dark(var(--panther), var(--obsidian));
  --footer-card:        var(--night);
  --footer-card-border: light-dark(transparent, var(--graphite));
  --footer-text:        var(--soft-white);
  --footer-muted:       var(--ash);
  --footer-line:        var(--graphite);

  --overlay:  light-dark(rgb(15 17 17 / 0.5), rgb(0 0 0 / 0.65));
  /* light-dark() only accepts colours, so it wraps just the colour part. */
  --shadow-1: 0 1px 2px light-dark(rgb(15 17 17 / 0.08), rgb(0 0 0 / 0.4));
  --shadow-2: 0 8px 24px light-dark(rgb(15 17 17 / 0.12), rgb(0 0 0 / 0.5));
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

@media (min-width: 600px) { :root { --gutter: var(--space-6); } }
@media (min-width: 960px) { :root { --gutter: var(--space-10); } }

@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --text-hero: clamp(2rem, 1.5rem + 3vh, 3.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
}