/* max design system tokens, as the website uses them.
   Copied from the max design system (tokens/*.css and ios/tokens.css). The site is dark
   only, like the apps: there is no light theme to switch to. */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  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: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  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: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  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;

  /* base neutrals — warm charcoal, never pure black except for scrims */
  --warm-950: #0E0C0B;
  --warm-900: #141110;
  --warm-850: #1A1615;
  --warm-800: #221D1B;
  --warm-700: #2E2825;
  --warm-600: #3D3733;
  --warm-500: #57504B;
  --warm-400: #7C766F;
  --warm-300: #A8A29A;
  --warm-200: #C9C3BB;
  --warm-100: #E6E1DA;
  --warm-050: #F7F5F2;

  /* accent — acid lime. Signal colour, never a background wash */
  --lime-700: #7FAE07;
  --lime-600: #9AD10E;
  --lime-500: #B9F227;
  --lime-400: #CBF95A;
  --lime-300: #DDFC96;

  /* status */
  --red-500: #FF4D3D;

  /* alpha utilities on light ink */
  --ink-a04: rgba(247, 245, 242, .04);
  --ink-a08: rgba(247, 245, 242, .08);
  --ink-a12: rgba(247, 245, 242, .12);
  --ink-a20: rgba(247, 245, 242, .20);
  --ink-a40: rgba(247, 245, 242, .40);
  --ink-a45: rgba(247, 245, 242, .45);

  /* semantic aliases */
  --surface-app: var(--warm-950);
  --surface-inset: var(--warm-900);
  --surface-card: var(--warm-850);
  --surface-raised: var(--warm-800);
  --surface-tint: rgba(185, 242, 39, .12);

  --text-primary: var(--warm-050);
  --text-secondary: var(--warm-300);
  --text-muted: var(--warm-400);
  --text-on-accent: var(--warm-950);
  --text-accent: var(--lime-500);

  --border-hairline: var(--ink-a12);
  --focus-ring: var(--warm-050);
  --focus-ring-accent: var(--lime-500);
  --progress-track: var(--ink-a20);
  --progress-fill: var(--lime-500);
  --now-line: var(--red-500);
  --badge-live: var(--red-500);

  /* type */
  --font-display: "Schibsted Grotesk", "SF Pro Display", -apple-system, system-ui, sans-serif;
  --font-text: "Archivo", "SF Pro Text", -apple-system, system-ui, sans-serif;
  --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;

  /* translucency: only for chrome that floats over artwork */
  --blur-nav: saturate(180%) blur(40px);
  --glass-nav: rgba(14, 12, 11, .62);
  --ios-glass-fill: rgba(120, 120, 128, .28);
  --ios-glass-blur: blur(12px) saturate(180%);
  --ios-glass-border: .5px solid rgba(255, 255, 255, .15);
  --ios-glass-shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .2);

  /* protection gradients — artwork never carries text without one */
  --scrim-bottom: linear-gradient(to top, rgba(14, 12, 11, 1) 0%, rgba(14, 12, 11, .92) 22%, rgba(14, 12, 11, 0) 68%);
  --scrim-left: linear-gradient(to right, rgba(14, 12, 11, .96) 0%, rgba(14, 12, 11, .72) 38%, rgba(14, 12, 11, 0) 78%);
  --scrim-tile: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, 0) 62%);

  /* elevation exists only to say "this is focused" */
  --shadow-focus: 0 24px 56px -8px rgba(0, 0, 0, .72);
  --shadow-device: 0 0 0 2px rgba(247, 245, 242, .1), 0 80px 160px -40px rgba(0, 0, 0, .9);

  /* motion — fast in, no overshoot, no bounce */
  --ease-focus: cubic-bezier(.2, .8, .2, 1);
  --dur-focus: 180ms;
  --dur-base: 240ms;
  --dur-slow: 400ms;
  --dur-crossfade: 600ms;

  /* layout */
  --page-max: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --header-h: 68px;
}