/* ==========================================================================
   Листовки — design tokens
   Day: warm bone paper, the app's ink, asphalt, forest greens and true
   road-sign red / blue / yellow. Night: the navy of the app icon.
   Every colour the world draws with is a token, so a theme is a swap.
   ========================================================================== */

@font-face {
  font-family: "Piazzolla";
  src: url("../assets/fonts/piazzolla.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans";
  src: url("../assets/fonts/sofia-sans.woff2") format("woff2");
  font-weight: 300 850;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sofia Sans Condensed";
  src: url("../assets/fonts/sofia-sans-condensed.woff2") format("woff2");
  font-weight: 500 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("../assets/fonts/caveat.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched fallbacks so the swap does not shove the layout around. */
@font-face {
  font-family: "Piazzolla Fallback";
  src: local("Georgia"), local("Times New Roman");
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 26%;
}
@font-face {
  font-family: "Sofia Fallback";
  src: local("Segoe UI"), local("Arial"), local("Helvetica");
  size-adjust: 93%;
  ascent-override: 103%;
  descent-override: 25%;
}

:root {
  color-scheme: light;

  /* ---- type ---------------------------------------------------------- */
  --font-display: "Piazzolla", "Piazzolla Fallback", Georgia, serif;
  --font-body: "Sofia Sans", "Sofia Fallback", system-ui, sans-serif;
  --font-label: "Sofia Sans Condensed", "Sofia Sans", "Sofia Fallback", sans-serif;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* fluid scale, 390px -> 1440px */
  --fs-hero: clamp(3.5rem, 2.45rem + 6.1vw, 8.4rem);
  --fs-h2: clamp(2.15rem, 1.62rem + 2.3vw, 3.85rem);
  --fs-h3: clamp(1.18rem, 1.1rem + 0.32vw, 1.42rem);
  --fs-lede: clamp(1.13rem, 1.02rem + 0.42vw, 1.42rem);
  --fs-body: clamp(1.03rem, 0.99rem + 0.2vw, 1.17rem);
  --fs-small: clamp(0.88rem, 0.86rem + 0.1vw, 0.95rem);
  --fs-label: 0.8rem;
  --fs-note: clamp(1.35rem, 1.2rem + 0.55vw, 1.75rem);
  --lh-tight: 0.94;
  --lh-head: 1.04;
  --lh-body: 1.55;
  --measure: 34rem;

  /* ---- space (4px rhythm) -------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --gutter: clamp(1rem, 0.6rem + 1.8vw, 2.5rem);
  --maxw: 82rem;

  /* ---- motion --------------------------------------------------------- */
  --ease-spring: cubic-bezier(.32, .72, 0, 1);
  --ease-settle: cubic-bezier(.4, 0, .2, 1);
  --ease-gentle: cubic-bezier(.25, .46, .45, .94);
  --ease-fade: cubic-bezier(.45, .05, .55, .95);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);

  /* ---- paper & ink ---------------------------------------------------- */
  --ground: #ede6d7;          /* the map the world sits on */
  --ground-2: #e4dbc8;
  --card: #fbf8f1;            /* card paper */
  --card-2: #f6f1e5;
  --core: #fffdf7;            /* white core of a torn edge */
  --ink: #241f1b;             /* the app's ink */
  --ink-2: #574e45;           /* secondary text: 7.9:1 on --card */
  --ink-3: #8a7e71;           /* decoration only, never text */
  --line: #241f1b;            /* ink of the drawn world */
  --fx-ink: #241f1b;          /* birds, rings, wake */
  --rule: #d9cfbd;
  --shadow: 44 32 20;         /* rgb triplet for shadows */
  --sh-a: .16;
  --kraft: #cfb48b;
  --kraft-2: #bd9c6f;
  --kraft-ink: #3a2c1c;
  --tape: rgba(236, 223, 186, .86);
  --tape-edge: rgba(214, 197, 150, .9);

  /* notebook */
  --note: #fdfbf5;
  --note-line: #b7c9df;
  --note-margin: #e3a3a0;

  /* road-map scrap */
  --map: #f3ecd6;
  --map-road: #e9b99c;
  --map-road-2: #f4dc8f;
  --map-water: #c2dadf;
  --map-line: #d9c9a4;
  --map-green: #dbe4bf;

  /* ---- road ------------------------------------------------------------ */
  --asph: #4b4643;
  --asph-2: #3f3a37;
  --asph-edge: #625b56;
  --paint: #f6f1e5;
  --curb: #d5ccbb;
  --walk: #e2d9c7;

  /* ---- nature ---------------------------------------------------------- */
  --g1: #234838;
  --g2: #2f5c46;
  --g3: #43775a;
  --g4: #6a985e;
  --g5: #9bb974;
  --g6: #c6d296;
  --wheat: #e3c781;
  --wheat-2: #d4ad5c;
  --soil: #b58c62;
  --bark: #6d4f38;
  --bloom-1: #e4574a;
  --bloom-2: #f3c64c;
  --bloom-3: #fbf7ef;
  --wool: #fbf8f0;

  --water: #6ea3b6;
  --water-2: #9cc6d1;
  --water-3: #4f8599;
  --foam: #f3f8f5;
  --cloud: #fdfcf8;
  --cloud-2: #d9dfe0;

  /* ---- signs: true road-sign colours ------------------------------- */
  --red: #c8302a;
  --blue: #1f5aa6;
  --yellow: #f3b52b;
  --sign-white: #fbfaf5;
  --sign-back: #a7a39b;
  --pole: #8e8a84;
  --pole-2: #6f6b66;

  /* ---- city ------------------------------------------------------------ */
  --b1: #e8d8bb;
  --b2: #d6b394;
  --b3: #b7c6c9;
  --b4: #c88c72;
  --b5: #ebe3d2;
  --b6: #a9b9a1;
  --roof: #9b4a36;
  --roof-2: #7c5a4a;
  --win: #5b7483;
  --win-lit: #5b7483;
  --awning: #c8302a;

  /* car */
  --car: #d23a2c;
  --car-2: #a82b21;
  --car-glass: #b9d0da;
  --car-light: #fff3c8;

  /* ---- state (the app's) ---------------------------------------------- */
  --ok: #4e6b45;
  --ok-ink: #3f5a37;
  --bad: #c2492a;
  --gold: #b3841b;

  /* lamps */
  --lamp-red: #e0402f;
  --lamp-amber: #f2a93b;
  --lamp-green: #3fae6a;
  --lamp-off: #3a3532;
  --glow: rgba(255, 214, 120, 0);   /* night only */

  /* ---- ui ---------------------------------------------------------------- */
  --focus: #1f5aa6;
  --note-ink: #1f5aa6;
  --stamp-blue: #1f5aa6;
  --stamp-red: #c8302a;
  --btn-ink: #241f1b;
  --btn-ink-text: #fbf8f1;
  --nav-bg: rgba(237, 230, 215, .86);
}

/* ---- night: the app icon's navy. Generated by build_tokens.py - edit there. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #121726;
    --ground-2: #171d2e;
    --card: #1f2537;
    --card-2: #242b3f;
    --core: #313a52;
    --ink: #f0eadf;
    --ink-2: #c3bcae;
    --ink-3: #7f8499;
    --line: #070a14;
    --fx-ink: #97a0bd;
    --rule: #343c55;
    --shadow: 2 4 10;
    --sh-a: .45;
    --kraft: #2e3a4c;
    --kraft-2: #4a4538;
    --kraft-ink: #eee7da;
    --tape: rgba(150, 140, 112, .5);
    --tape-edge: rgba(120, 110, 86, .6);
    --note: #222a3e;
    --note-line: #2f4263;
    --note-margin: #6a3c49;
    --map: #1e2537;
    --map-road: #5b4039;
    --map-road-2: #585036;
    --map-water: #243d4b;
    --map-line: #333a50;
    --map-green: #1f2f2c;
    --asph: #2a2e3a;
    --asph-2: #222631;
    --asph-edge: #353a48;
    --paint: #cfc9b9;
    --curb: #333a4b;
    --walk: #2b3243;
    --g1: #0e1e1b;
    --g2: #132722;
    --g3: #183029;
    --g4: #1d3930;
    --g5: #234237;
    --g6: #29493d;
    --wheat: #45402f;
    --wheat-2: #544d36;
    --soil: #342c28;
    --bark: #2d241e;
    --bloom-1: #9c4038;
    --bloom-2: #a8893d;
    --bloom-3: #a9a69d;
    --wool: #a9a59b;
    --water: #22404f;
    --water-2: #2c5061;
    --water-3: #1b3444;
    --foam: #7d97a0;
    --cloud: #252c43;
    --cloud-2: #1c2236;
    --red: #b9362f;
    --blue: #2c5f9f;
    --yellow: #dba633;
    --sign-white: #d9d6cc;
    --sign-back: #4d5059;
    --pole: #5c5e66;
    --pole-2: #45474e;
    --b1: #262c3d;
    --b2: #2f2a3a;
    --b3: #22303a;
    --b4: #3a2d35;
    --b5: #2b3144;
    --b6: #223330;
    --roof: #4a2a2f;
    --roof-2: #38303a;
    --win: #161b28;
    --win-lit: #f2c25e;
    --awning: #7d2a27;
    --car: #c23a2d;
    --car-2: #8f2a21;
    --car-glass: #4c6572;
    --car-light: #fff0b8;
    --ok: #7fa36f;
    --ok-ink: #9cc08a;
    --bad: #e0694a;
    --gold: #d9a940;
    --lamp-off: #1c1e27;
    --glow: rgba(255, 204, 110, .6);
    --focus: #8fb8ff;
    --note-ink: #9dbcf0;
    --stamp-blue: #8fb3e6;
    --stamp-red: #f0907e;
    --btn-ink: #f0eadf;
    --btn-ink-text: #121726;
    --nav-bg: rgba(18, 23, 38, .84);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #121726;
  --ground-2: #171d2e;
  --card: #1f2537;
  --card-2: #242b3f;
  --core: #313a52;
  --ink: #f0eadf;
  --ink-2: #c3bcae;
  --ink-3: #7f8499;
  --line: #070a14;
  --fx-ink: #97a0bd;
  --rule: #343c55;
  --shadow: 2 4 10;
  --sh-a: .45;
  --kraft: #2e3a4c;
  --kraft-2: #4a4538;
  --kraft-ink: #eee7da;
  --tape: rgba(150, 140, 112, .5);
  --tape-edge: rgba(120, 110, 86, .6);
  --note: #222a3e;
  --note-line: #2f4263;
  --note-margin: #6a3c49;
  --map: #1e2537;
  --map-road: #5b4039;
  --map-road-2: #585036;
  --map-water: #243d4b;
  --map-line: #333a50;
  --map-green: #1f2f2c;
  --asph: #2a2e3a;
  --asph-2: #222631;
  --asph-edge: #353a48;
  --paint: #cfc9b9;
  --curb: #333a4b;
  --walk: #2b3243;
  --g1: #0e1e1b;
  --g2: #132722;
  --g3: #183029;
  --g4: #1d3930;
  --g5: #234237;
  --g6: #29493d;
  --wheat: #45402f;
  --wheat-2: #544d36;
  --soil: #342c28;
  --bark: #2d241e;
  --bloom-1: #9c4038;
  --bloom-2: #a8893d;
  --bloom-3: #a9a69d;
  --wool: #a9a59b;
  --water: #22404f;
  --water-2: #2c5061;
  --water-3: #1b3444;
  --foam: #7d97a0;
  --cloud: #252c43;
  --cloud-2: #1c2236;
  --red: #b9362f;
  --blue: #2c5f9f;
  --yellow: #dba633;
  --sign-white: #d9d6cc;
  --sign-back: #4d5059;
  --pole: #5c5e66;
  --pole-2: #45474e;
  --b1: #262c3d;
  --b2: #2f2a3a;
  --b3: #22303a;
  --b4: #3a2d35;
  --b5: #2b3144;
  --b6: #223330;
  --roof: #4a2a2f;
  --roof-2: #38303a;
  --win: #161b28;
  --win-lit: #f2c25e;
  --awning: #7d2a27;
  --car: #c23a2d;
  --car-2: #8f2a21;
  --car-glass: #4c6572;
  --car-light: #fff0b8;
  --ok: #7fa36f;
  --ok-ink: #9cc08a;
  --bad: #e0694a;
  --gold: #d9a940;
  --lamp-off: #1c1e27;
  --glow: rgba(255, 204, 110, .6);
  --focus: #8fb8ff;
  --note-ink: #9dbcf0;
  --stamp-blue: #8fb3e6;
  --stamp-red: #f0907e;
  --btn-ink: #f0eadf;
  --btn-ink-text: #121726;
  --nav-bg: rgba(18, 23, 38, .84);
}