@font-face {
  font-family: "League Gothic";
  src: url("../assets/fonts/league-gothic/LeagueGothic-Variable.woff2") format("woff2");
  font-weight: 400;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: "Instrument Sans";
  src: url("../assets/fonts/instrument-sans/InstrumentSans-Italic-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {



  --noir: #000000;
  --nuit: #0a0000;
  --nuit-rvb: 10 0 0;
  --rideau: #170104;
  --coulisse: #200207;
  --bordeaux: #2e030b;
  --creme: #fffaf0;
  --rose: #eec4c9;


  --background: var(--nuit);
  --surface: var(--rideau);
  --surface-strong: var(--coulisse);
  --surface-deep: var(--noir);
  --primary: var(--bordeaux);
  --foreground: var(--creme);

  --foreground-muted: #79726c;
  --border: var(--creme);
  --focus: var(--creme);
  --paper: var(--creme);
  --hover-on-primary: var(--nuit);




  --color-black: var(--nuit);
  --color-white: var(--creme);
  --color-white-grey: var(--creme);
  --color-hairline: var(--creme);
  --color-lightbox-backdrop: var(--nuit);
  --color-social-mobile-bg: var(--creme);
  --color-social-mobile-fg: var(--nuit);


  --ph-surface: var(--rideau);
  --ph-line: var(--creme);
  --ph-label: var(--creme);




  --font-display: "League Gothic", Impact, "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", Arial, sans-serif;
  --font-ui: var(--font-body);


  --root-font-size: 0.8rem;
  --root-font-size-mobile: 4.26vw;


  --fs-text-12: 0.75em;
  --fs-text-14: 0.875em;
  --fs-text-16: 1em;
  --fs-text-18: 1.125em;
  --fs-text-20: 1.25em;
  --fs-text-24: 1.5em;
  --fs-text-30: 1.875em;

  --fs-heading-110: 5.706vw;
  --fs-heading-120: 6.225vw;
  --fs-heading-200: 10.375vw;
  --fs-h1-giant: 12.97vw;
  --fs-h2: 4em;
  --fs-h3: 2.5em;
  --fs-h3-36: 2.25em;
  --fs-h3-48: 3em;
  --fs-h4: 2em;


  --fs-form-field: 14px;
  --lh-form-field: 20px;


  --fs-heading-200-mobile: 6.875em;
  --fs-heading-120-mobile: 3.75em;
  --fs-text-24-mobile: 1.125em;
  --fs-h3-mobile: 2em;


  --fw-light: 400;
  --fw-regular: 400;
  --fw-medium: 400;
  --fw-semibold: 400;
  --fw-bold: 400;


  --lh-1: 1;
  --lh-09: 0.9;
  --lh-08: 0.8;
  --lh-11: 1.1;
  --lh-12: 1.2;
  --lh-15: 1.5;


  --ls-normal: normal;
  --ls-case-subtitle: -0.01em;




  --gap-8: 0.5em;
  --gap-12: 0.75em;
  --gap-20: 1.25em;
  --gap-30: 1.875em;
  --gap-40: 2.5em;
  --gap-60: 3.75em;
  --gap-80: 5em;
  --gap-100: 6.25em;


  --gap-80-mobile: 2.5em;
  --gap-30-mobile: 1.25em;


  --space-section-y: 6.25em;
  --space-hero-bottom: 8.125em;
  --space-footer-top: 12.5em;
  --space-footer-bottom: 2.5em;
  --space-nav-y: 1em;
  --space-formation-top: 12.5em;
  --space-formation-top-high: 20em;
  --space-formation-col-gap: 10em;
  --space-toc-right: 5.625em;
  --space-toc-bottom: 10em;



  --container-width: 95.45vw;
  --container-width-mobile: 91.6vw;
  --grid-columns: 4;
  --grid-column-gap: 0px;


  --paper-padding: 24px;


  --bp-desktop-transition: 1440px;
  --bp-tablet: 991px;
  --bp-mobile-nav: 767px;
  --bp-mobile: 479px;


  --radius-none: 0;
  --radius-circle: 100px;

  --shadow-none: none;
  --border-hairline: 1px;


  --duration-hover: 0.3s;
  --duration-hover-slow: 0.5s;
  --duration-info-fade: 0.4s;
  --duration-nav-color: 0.2s;
  --ease-hover: ease;


  --ease-reveal: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-scrub: linear;


  --duration-reveal-text: 0.45s;
  --duration-reveal-lines: 0.7s;
  --duration-reveal-blocks: 0.8s;
  --duration-reveal-rules: 1s;
  --duration-reveal: var(--duration-reveal-blocks);

  --stagger-reveal-chars: 0.035s;
  --stagger-reveal-lines: 0.1s;
  --stagger-reveal-blocks: 0.15s;


  --duration-opening-drop: 1.4s;
  --ease-opening-drop: cubic-bezier(0.165, 0.84, 0.44, 1);
  --duration-opening-mask: 1.2s;

  --ease-curtain: cubic-bezier(0.165, 0.84, 0.44, 1);
  --duration-curtain: 1.2s;
  --duration-curtain-retract: 0.6s;
  --duration-menu: 0.5s;
  --duration-parallax-base: 0.5s;
  --duration-copy-badge: 3s;


  --cta-height-base: 2.25em;

  --cta-height-lg: 3.5em;
  --cta-padding-x: 1.75em;
  --cta-padding-x-lg: 2.75em;
  --cta-corner-size: 0.5em;
  --cta-height-base-mobile: 2.875em;
}


html {
  background-color: var(--background);
  color-scheme: dark;
}

::selection {
  background: var(--rose);
  color: var(--nuit);
}