/*
 * Ocak (dark) is the default per `.design/DESIGN_SYSTEM.md`; Tezgah (light) is the override, so a
 * browser with no stated preference gets the design's intended mode.
 *
 * Three values deliberately differ from the raw reference, which the design doc records as
 * superseded for failing WCAG AA: light --muted / --on-surf-muted are #746558 (not #7C6C5E),
 * --on-accent is #1A120C in both modes (not #FFF9F2 in light), and --accent-text is a separate
 * token from --accent because accent-on-surface text needs more contrast than an accent fill.
 */

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193;
}

@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/schibsted-grotesk-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-mono-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2191, U+2193;
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/dm-mono-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+1E00-1EFF, U+2020, U+20A0-20AB, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #13100e;
  --surface: #1c1815;
  --surface2: #262019;
  --nav-bg: #100d0b;
  --on-bg: #f6f1ea;
  --muted: #a0958a;
  --on-surf: #f6f1ea;
  --on-surf-muted: #a0958a;
  --line: rgb(255 255 255 / 9%);
  --line-solid: rgb(255 255 255 / 35%);
  --chip-bg: rgb(255 255 255 / 7%);
  --chip-text: #cfc5b9;
  --accent: #d9603a;
  --accent-text: #da643e;
  --on-accent: #1a120c;

  color-scheme: dark;

  --rad: 14px;
  --rad-sm: 10px;
  --pad-card: 18px 20px;
  /*
   * One spacing scale, largest to smallest. The invariant it exists to hold: a
   * gap inside a block is never larger than the gap separating blocks, so
   * `--gap-block` must stay below `--gap-section` at every breakpoint.
   */
  --gap-section: 52px;
  --gap-block: 44px;
  --gap-group: 24px;
  --gap-tight: 14px;

  --font-ui: "Schibsted Grotesk", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
}

/*
 * Light is declared twice because a media query cannot be outranked by an attribute: the
 * attribute block serves a manual choice, the media block the system — unless dark was chosen.
 * Keep the two in step.
 */
:root[data-theme="light"] {
  --bg: #f5eee3;
  --surface: #fffcf7;
  --surface2: #f0e7d9;
  --nav-bg: #f1e9dc;
  --on-bg: #241c16;
  --muted: #746558;
  --on-surf: #241c16;
  --on-surf-muted: #746558;
  --line: rgb(40 28 20 / 13%);
  --line-solid: rgb(40 28 20 / 30%);
  --chip-bg: rgb(40 28 20 / 6%);
  --chip-text: #5c4c40;
  --accent-text: #af4422;

  color-scheme: light;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f5eee3;
    --surface: #fffcf7;
    --surface2: #f0e7d9;
    --nav-bg: #f1e9dc;
    --on-bg: #241c16;
    --muted: #746558;
    --on-surf: #241c16;
    --on-surf-muted: #746558;
    --line: rgb(40 28 20 / 13%);
    --line-solid: rgb(40 28 20 / 30%);
    --chip-bg: rgb(40 28 20 / 6%);
    --chip-text: #5c4c40;
    --accent-text: #af4422;

    color-scheme: light;
  }
}