/* Self-hosted, latin subset, OFL-1.1. font-display:swap so text paints in the
   fallback immediately rather than blocking. Newsreader and Karla are variable
   across 200-800, so one file covers every weight the app uses. */

@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/newsreader-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Karla Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/assets/fonts/karla-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

/* ---------------------------------------------------------------------------
   Bethany — design tokens. Three modes on :root[data-mode].

   Accent colours are FILL/BORDER/ICON colours. They fail WCAG AA as text on
   the light canvases (gold ~2.0:1, coral ~2.3:1, sage ~2.4:1) — use the
   *-text variants for any text, link, or small label.
   --------------------------------------------------------------------------- */

:root {
  --radius:      12px;
  --radius-sm:   8px;
  --font-display: 'Newsreader Variable', Newsreader, Georgia, 'Times New Roman', serif;
  --font-body:    'Karla Variable', Karla, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --- DAY  06:00–17:00 ---------------------------------------------------- */
:root[data-mode="day"] {
  --ink:                 #2B2630;
  --muted:               #6E6478;
  --canvas:              #FBF8F2;
  --surface:             #FFFFFF;
  --surface-locked:      #F2EDE4;
  --border:              #E5DED2;

  --zone-yesterday:      #EFE9F5;
  --zone-today:          #FFFDF7;
  --zone-tomorrow:       #F7E6C8;

  --accent-primary:      #E8A64C;   /* dawn gold  */
  --accent-improve:      #E88C7D;   /* bloom coral */
  --accent-done:         #8FA888;   /* sage        */
  --danger:              #C0453B;

  --accent-primary-text: #8A5A12;
  --accent-improve-text: #A63D2C;
  --accent-done-text:    #43603C;

  --on-accent:           #2B2630;
  --focus-ring:          #2B2630;
  --shadow:              0 1px 2px rgba(43, 38, 48, .06), 0 4px 14px rgba(43, 38, 48, .05);
}

/* --- DUSK  17:00–21:00 --------------------------------------------------- */
:root[data-mode="dusk"] {
  --ink:                 #453B54;
  --muted:               #685978;
  --canvas:              #F8DCE3;
  --surface:             #FDEFF3;
  --surface-locked:      #EFD7DE;
  --border:              #E3C3CD;

  --zone-yesterday:      #CAD7E4;
  --zone-today:          #FDEFF3;
  --zone-tomorrow:       #CAAECC;

  --accent-primary:      #8C5A7A;
  --accent-improve:      #C4626F;
  --accent-done:         #5E7F63;
  --danger:              #B03A46;

  --accent-primary-text: #6E4260;
  --accent-improve-text: #983845;
  --accent-done-text:    #3F5C43;

  --on-accent:           #FDEFF3;
  --focus-ring:          #453B54;
  --shadow:              0 1px 2px rgba(69, 59, 84, .07), 0 4px 14px rgba(69, 59, 84, .06);
}

/* --- NIGHT  21:00–06:00 -------------------------------------------------- */
:root[data-mode="night"] {
  --ink:                 #EDE6F0;
  --muted:               #9A8FA8;
  --canvas:              #1C1826;
  --surface:             #262032;
  --surface-locked:      #211C2B;
  --border:              #383044;

  --zone-yesterday:      #232B38;
  --zone-today:          #2B2438;
  --zone-tomorrow:       #33283A;

  --accent-primary:      #E8A64C;
  --accent-improve:      #E88C7D;
  --accent-done:         #8FA888;
  --danger:              #E4737B;

  /* On a dark canvas the fills are already AA as text. */
  --accent-primary-text: #EFB767;
  --accent-improve-text: #F0A294;
  --accent-done-text:    #A3BC9C;

  --on-accent:           #1C1826;
  --focus-ring:          #E8A64C;
  --shadow:              0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);
}

*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}