/* Design tokens for the perfume collection app.
 *
 * Everything visual reads from here: app.css and detail.css name tokens and
 * never a raw colour. Dark is the identity — there is no light theme, and
 * `color-scheme: dark` tells the browser so (form controls, scrollbars).
 *
 * Contrast, measured against --bg and --surface: --text 16.9:1, --muted 7.1:1,
 * --faint 5.3:1. Nothing renders below --t-xs (12px).
 */
:root {
  color-scheme: dark;

  /* surface */
  --bg: #0b0d12;
  --surface: #14181f;
  --surface-2: #1b212b;
  --line: #2a3140;

  /* text */
  --text: #eef1f6;
  --muted: #a3abba;
  --faint: #8b93a3;

  /* accents. --accent is the single brand colour; a bottle's own accord colours
     are the only other chroma on screen. */
  --accent: #c9a227;
  --accent-ink: #0b0d12;
  --danger: #e0736f;
  /* status, not decoration: the photo-verification notice and success messages */
  --warn: #d7a13a;
  --ok: #4bbd82;

  /* geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-pill: 999px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --shadow-1: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px -12px rgb(0 0 0 / .55);
  --shadow-2: 0 24px 64px -24px rgb(0 0 0 / .75);
  --tap: 44px;                       /* minimum hit area */

  /* type */
  --font-ui: "Inter var", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;
  --font-display: "Fraunces var", Georgia, "Times New Roman", serif;
  --t-xs: 12px;
  --t-sm: 13px;
  --t-base: 16px;
  --t-lg: 18px;
  --t-xl: clamp(20px, 5vw, 24px);
  --t-2xl: clamp(26px, 7vw, 34px);

  /* motion */
  --dur-1: 120ms;
  --dur-2: 180ms;
  --dur-3: 240ms;
  --ease: cubic-bezier(.2, 0, 0, 1);

  /* derived surfaces and state tints. Kept here so app.css names tokens and
     never a raw colour value. */
  --scrim: rgb(11 13 18 / 85%);          /* the sticky app bar over content */
  --scrim-strong: rgb(11 13 18 / 76%);   /* the favourite button's disc */
  --track: rgb(255 255 255 / 9%);        /* aspect-bar track */
  --ring: rgb(255 255 255 / 7%);         /* icon and swatch outlines */
  --accent-soft: #e8c860;
  --accent-line: rgb(201 162 39 / 40%);
  --danger-fill: rgb(224 115 111 / 12%);
  --danger-line: rgb(224 115 111 / 45%);
  --danger-text: #ffb4b6;
  --warn-fill: rgb(215 161 58 / 12%);
  --warn-line: rgb(215 161 58 / 38%);
  --warn-text: #e8cf9a;
  --ok-fill: rgb(75 189 130 / 10%);
  --ok-line: rgb(75 189 130 / 45%);
  --note-top: #7cc4ff;                   /* the olfactory pyramid's layer accents */
  --note-heart: #e0a2d8;
}

/* Vendored, latin-subset variable fonts: CSP allows no font CDN (font-src
   'self'), and the service worker precaches these two files. */
@font-face {
  font-family: "Inter var";
  src: url("../fonts/inter-var-latin.woff2") format("woff2-variations"),
       url("../fonts/inter-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces var";
  src: url("../fonts/fraunces-var-latin.woff2") format("woff2-variations"),
       url("../fonts/fraunces-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}