/* when’s best?: Design-Tokens "Papier & Tinte". Hell ist Papier, dunkel ist die Tinte der Marke.
   Folgt dem System-Schema (prefers-color-scheme); der Schalter in der Kopfzeile setzt [data-scheme] (js/theme-boot.js, ui.js). */
@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 600; font-display: swap; src: url('/fonts/fraunces-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 600; font-display: swap; src: url('/fonts/fraunces-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-normal-latin.woff2') format('woff2'); }

:root {
  color-scheme: light;
  /* Paper */
  --ground: #F2F0EA;
  --raised: #FDFCF9;        /* one tone step up: option rows, inputs */
  --sunk: #E7E3DA;          /* one tone step down: tracks, idle controls */
  --ink: #12110F;
  --ink-soft: #3B3832;
  --quiet: #6E675B;
  --accent: #1E3A8A;        /* the brand navy: actions only */
  --accent-press: #172D6B;
  --on-accent: #FDFCF9;
  --yes: #2F7A56;  --yes-tint: #DDEADF;  --on-yes: #F6FBF8;
  --maybe: #B7811A; --maybe-tint: #F1E5C8; --on-maybe: #1E1503;
  --no: #8B8478;   --on-no: #FDFCF9;
  --field: #1E3A8A; --on-field: #F2F0EA; --field-quiet: #AFC0EA; --field-action: #F2F0EA; --on-field-action: #1E3A8A;
  --drop: #1E3A8A;          /* the apostrophe of the wordmark: one drop of navy ink */
  /* Intro-Tinte (Gast- und Beitrittsseite): in beiden Schemata Marken-Navy mit Papierschrift, nie ein heller Vollbild-Blitz. */
  --intro-ink: #1E3A8A; --intro-on-ink: #F2F0EA; --intro-quiet: #AFC0EA;
  /* Kalenderblätter im Intro: Papier auf der Tinte, in beiden Schemata gleich (die Tinte ist es auch). */
  --intro-card: #F2F0EA; --intro-card-ink: #12110F; --intro-card-quiet: #6E675B; --intro-pen: #1E3A8A;
  --scrim: rgba(18, 17, 15, 0.42);
  --float-shadow: 0 -12px 40px rgba(18, 17, 15, 0.16);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --r: 6px;                 /* surfaces: nearly square */
  --pill: 999px;            /* controls: fully round */
}
/* Ink: the brand navy as night ground, paper as text. Not a grey inversion. */
:root[data-scheme="dark"] {
  color-scheme: dark;
  --ground: #0C1222;
  --raised: #131B30;
  --sunk: #1B2540;
  --ink: #F2F0EA;
  --ink-soft: #CFCBC1;
  --quiet: #8F96AB;
  --accent: #F2F0EA;        /* in ink, the action is paper */
  --accent-press: #DAD6CC;
  --on-accent: #0C1222;
  --yes: #6CC79A;  --yes-tint: #16362C;  --on-yes: #06150E;
  --maybe: #E4B556; --maybe-tint: #3A3018; --on-maybe: #1E1503;
  --no: #59617A;   --on-no: #F2F0EA;
  --field: #F2F0EA; --on-field: #0C1222; --field-quiet: #5D6478; --field-action: #1E3A8A; --on-field-action: #F2F0EA;
  --drop: #8EA6EC;          /* navy would vanish on night ground: the same ink, lit */
  --intro-ink: #1E3A8A; --intro-on-ink: #F2F0EA; --intro-quiet: #AFC0EA;
  --scrim: rgba(4, 7, 14, 0.6);
  --float-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    color-scheme: dark;
    --ground: #0C1222; --raised: #131B30; --sunk: #1B2540;
    --ink: #F2F0EA; --ink-soft: #CFCBC1; --quiet: #8F96AB;
    --accent: #F2F0EA; --accent-press: #DAD6CC; --on-accent: #0C1222;
    --yes: #6CC79A; --yes-tint: #16362C; --on-yes: #06150E;
    --maybe: #E4B556; --maybe-tint: #3A3018; --on-maybe: #1E1503;
    --no: #59617A; --on-no: #F2F0EA;
    --field: #F2F0EA; --on-field: #0C1222; --field-quiet: #5D6478; --field-action: #1E3A8A; --on-field-action: #F2F0EA;
    --drop: #8EA6EC;
    --intro-ink: #1E3A8A; --intro-on-ink: #F2F0EA; --intro-quiet: #AFC0EA;
    --scrim: rgba(4, 7, 14, 0.6); --float-shadow: 0 -12px 40px rgba(0, 0, 0, 0.45);
  }
}