/* Shared Sonaline type and color tokens. Keep aligned with Android ui/Theme.kt. */

  /* ---------- type ----------
     Nocturne's two faces, served from this same origin (/fonts/). They
     used to come from Google Fonts, which meant every page load told a
     third party who was opening the inbox and when; self-hosting also
     lets the CSP name no font host but 'self'. Latin and Latin Extended
     only — the subsets this inbox's languages use. Space Grotesk is one
     variable file covering 400–700; IBM Plex Mono is one file a weight. */
  @font-face {
    font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700;
    font-display: swap; src: url(/fonts/space-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: "Space Grotesk"; font-style: normal; font-weight: 300 700;
    font-display: swap; src: url(/fonts/space-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400;
    font-display: swap; src: url(/fonts/ibm-plex-mono-400-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: "IBM Plex Mono"; font-style: normal; font-weight: 400;
    font-display: swap; src: url(/fonts/ibm-plex-mono-400-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500;
    font-display: swap; src: url(/fonts/ibm-plex-mono-500-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: "IBM Plex Mono"; font-style: normal; font-weight: 500;
    font-display: swap; src: url(/fonts/ibm-plex-mono-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  @font-face {
    font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600;
    font-display: swap; src: url(/fonts/ibm-plex-mono-600-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: "IBM Plex Mono"; font-style: normal; font-weight: 600;
    font-display: swap; src: url(/fonts/ibm-plex-mono-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  /* Nocturne direction (matching the Sonaline canvas): a near-black
   * ground, frosted surfaces, and the Sonaline green as the one accent —
   * Space Grotesk for UI, IBM Plex Mono for labels and numbers.
   *
   * Two palettes now, one set of tokens. Dark is the committed default;
   * light is the same scene in daylight for the person whose device asks
   * for it (Appearance → System) or who asks for it outright. Every
   * surface reads its colour from a token below, so a component styled
   * once is right in both — the in-call screen and the dialer are the
   * one exception and pin the dark tokens on themselves, because a call
   * is a mode, not a page. */
  :root {
    color-scheme: dark;
    --bg: #0b0d10;
    --scene: radial-gradient(120% 80% at 50% -8%, rgba(63,211,154,.06) 0%, rgba(63,211,154,0) 42%), linear-gradient(180deg, #0d1014 0%, #0b0d10 46%);
    --surface: #0b0d10;
    --surface-2: #14171c;
    --hover: rgba(255,255,255,.07);
    --glass: rgba(255,255,255,.05);
    --glass-2: rgba(255,255,255,.08);
    --text: #eef1f5;
    --text-2: rgba(235,240,248,.70);
    --border: rgba(255,255,255,.08);
    --primary: #3fd39a;
    --on-primary: #06231a;
    --primary-soft: rgba(63,211,154,.14);
    --selected: rgba(63,211,154,.16);
    --selected-text: #bff0dd;
    --danger: #e5484d;
    --missed: #ff6b6e;
    --star: #fcc934;
    --bubble-in: rgba(255,255,255,.08);
    --bubble-in-text: #eef1f5;
    --note-bg: #3a3323;
    --note-chip: #4d4327;
    --note-text: #fdd663;
    /* The chosen pill in the tab bar and the chip row: paper on night. */
    --nav-on: #ffffff;
    --nav-on-text: #0b0d10;
    --toast-bg: #323232;
    --toast-text: #ffffff;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px 2px rgba(0,0,0,.25);
    --rail: 88px;
    --list: 360px;
    --ui: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  }
  /* The light palette: the same tokens, in daylight. Chosen so every
     pairing in use clears WCAG AA — the green darkens to #1b7f57 because
     Nocturne's mint reads on black and vanishes on white. Applied when
     the person chose Light, or chose System on a device that asks for
     light. */
  [data-theme="light"] {
    color-scheme: light;
    --bg: #f4f6f8;
    --scene: radial-gradient(120% 80% at 50% -8%, rgba(27,127,87,.08) 0%, rgba(27,127,87,0) 42%), linear-gradient(180deg, #f7f9fa 0%, #f4f6f8 46%);
    --surface: #ffffff;
    --surface-2: #eaeef2;
    --hover: rgba(15,23,32,.06);
    --glass: rgba(15,23,32,.045);
    --glass-2: rgba(15,23,32,.08);
    --text: #14181e;
    --text-2: rgba(20,24,30,.64);
    --border: rgba(15,23,32,.12);
    --primary: #1b7f57;
    --on-primary: #ffffff;
    --primary-soft: rgba(27,127,87,.12);
    --selected: rgba(27,127,87,.14);
    --selected-text: #0f5d3f;
    --danger: #c92a2a;
    --missed: #c92a2a;
    --star: #b7791f;
    --bubble-in: #e6eaee;
    --bubble-in-text: #14181e;
    --note-bg: #fbf3d5;
    --note-chip: #eddfa4;
    --note-text: #6b4f00;
    --nav-on: #14181e;
    --nav-on-text: #ffffff;
    --toast-bg: #24292f;
    --toast-text: #ffffff;
    --shadow: 0 1px 2px rgba(15,23,32,.12), 0 2px 8px 2px rgba(15,23,32,.08);
  }
  /* A device that asks for light, on a page that follows the system —
     the same values again under the media query, so the first paint is
     right before any script has run. */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) { color-scheme: light; }
    :root:not([data-theme="dark"]) {
      --bg: #f4f6f8;
      --scene: radial-gradient(120% 80% at 50% -8%, rgba(27,127,87,.08) 0%, rgba(27,127,87,0) 42%), linear-gradient(180deg, #f7f9fa 0%, #f4f6f8 46%);
      --surface: #ffffff;
      --surface-2: #eaeef2;
      --hover: rgba(15,23,32,.06);
      --glass: rgba(15,23,32,.045);
      --glass-2: rgba(15,23,32,.08);
      --text: #14181e;
      --text-2: rgba(20,24,30,.64);
      --border: rgba(15,23,32,.12);
      --primary: #1b7f57;
      --on-primary: #ffffff;
      --primary-soft: rgba(27,127,87,.12);
      --selected: rgba(27,127,87,.14);
      --selected-text: #0f5d3f;
      --danger: #c92a2a;
      --missed: #c92a2a;
      --star: #b7791f;
      --bubble-in: #e6eaee;
      --bubble-in-text: #14181e;
      --note-bg: #fbf3d5;
      --note-chip: #eddfa4;
      --note-text: #6b4f00;
      --nav-on: #14181e;
      --nav-on-text: #ffffff;
      --toast-bg: #24292f;
      --toast-text: #ffffff;
      --shadow: 0 1px 2px rgba(15,23,32,.12), 0 2px 8px 2px rgba(15,23,32,.08);
    }
  }

:root {
  --nav-surface: #1e2126;
  --accent: var(--primary);
  --line-soft: var(--border);
  --chip: var(--surface-2);
  --ok: var(--primary);
  --warn: var(--note-text);
  --ok-soft: var(--primary-soft);
  --warn-soft: var(--note-bg);
  --danger-soft: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --pop: 0 12px 36px rgba(0,0,0,.22);
  /* Distinct chart series remain independent of status colors. */
  --chart-out: #3b6fe0; --chart-in: #2e9e8f;
}
[data-theme="light"] { --nav-surface: #ffffff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --nav-surface: #ffffff; }
}