/*
 * Design tokens. Every colour, font, size, radius and easing used by the site
 * is declared here; the other stylesheets only reference these variables.
 * Rationale in docs/design.md.
 */

@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni_moda_latin.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bodoni Moda";
  src: url("../fonts/bodoni_moda_latin_ext.woff2") format("woff2");
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken_grotesk_latin.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken_grotesk_latin_ext.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Limelight";
  src: url("../fonts/limelight_latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Limelight";
  src: url("../fonts/limelight_latin_ext.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* Velvet: the theatre curtain. */
  --velvet-950: #22080d;
  --velvet-900: #2d0b12;
  --velvet-800: #3d0f17;
  --velvet-600: #5e1822;
  --velvet-400: #8a3a44;

  /* Gold: the statuette. */
  --gold-100: #f8e7b8;
  --gold-300: #e8c97f;
  --gold-500: #c9a056;
  --gold-700: #8a6a32;

  /* Marquee bulbs: warm filament, gold glass, glow. */
  --bulb-core: #fff4d6;
  --bulb-glass: #f1c96a;
  --bulb-glow: rgb(255 196 92 / 0.45);

  /* Wax: the seal, and the button that applies it. Nothing else. */
  --wax-100: #f3b3bb;
  --wax-200: #e98a96;
  --wax-300: #c8344a;
  --wax-500: #b32638;
  --wax-600: #9b1c2c;
  --wax-700: #7a1422;
  --wax-800: #5c0d18;

  /* Paper: envelopes, cards, the backstage sheets. */
  --ivory-50: #faf4e8;
  --ivory-100: #f4ebd9;
  --ivory-300: #e3d5ba;
  --ivory-500: #c9b796;
  --ink-900: #2a1a14;
  --ink-600: #6b5446;

  /* Shadows and curtain folds, all tinted with the velvet hue. */
  --shadow-deep: rgb(14 2 5 / 0.62);
  --shadow-soft: rgb(14 2 5 / 0.3);
  --fold-dark: rgb(14 2 5 / 0.42);
  --fold-light: rgb(255 214 200 / 0.05);
  /* Fabric grain over the velvet (SVG noise, tinted with the velvet hue). */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.01 0 0 0 0 0.02 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --veil: rgb(26 6 10 / 0.97);

  /* Limelight: the marquee lettering of 1930s picture palaces, for the
     logotype only. Bodoni Moda: headings and names, always heavy with a low
     optical size, because its hairlines vanish on velvet otherwise. Hanken
     Grotesk: everything you read, chosen for its large x-height. */
  --font-marquee: "Limelight", "Bodoni Moda", Didot, serif;
  --font-display: "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif;
  --font-text: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --display-weight: 700;
  --display-opsz: "opsz" 14;

  --text-s: 0.9375rem;
  --text-m: 1.0625rem;
  --text-l: 1.5rem;
  --text-xl: clamp(2rem, 6vw, 2.75rem);
  --text-display: clamp(3.4rem, 16vw, 7.5rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 4rem;

  --radius-paper: 2px;
  --radius-round: 50%;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --duration-quick: 160ms;
  --duration-base: 320ms;

  --measure: 40rem;
  --measure-wide: 64rem;
}