/* Design tokens: the only place colours, type, spacing, radii and motion are defined.
   Own palette (deep sea-green + mint + warm accents), own type (Plus Jakarta Sans, OFL). */
@font-face {
  font-family: "Jakarta";
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --bg: #F3F6F4;
  --bg-tint: #E8F1ED;
  --surface: #FFFFFF;
  --surface-2: #F7FAF8;
  --surface-sunk: #E9EFEB;
  --glass: rgba(255, 255, 255, .78);
  --line: #E1E8E4;
  --line-strong: #C3CFC8;
  --line-input: #7A8882;      /* ≥ 3:1 against surface */
  --text: #12201A;
  --text-2: #3F4E47;
  --text-3: #5A6962;          /* ≥ 4.5:1 on bg and surface */

  --accent: #0C6B5F;
  --accent-hover: #0A5C52;
  --accent-text: #0A6458;
  --accent-wash: #D7EEE7;
  --accent-soft: #EAF6F2;
  --on-accent: #FFFFFF;
  --accent-shadow: rgba(12, 107, 95, .28);
  --hero-from: #0E7A6C;
  --hero-to: #0B4F47;
  --on-hero: #FFFFFF;
  --on-hero-2: rgba(255, 255, 255, .78);
  --hero-track: rgba(255, 255, 255, .22);
  --sun: #FFC857;

  /* cleanliness levels; colour is never the only signal (labels + percentages) */
  --lvl-high: #23935A;
  --lvl-mid: #D19A12;
  --lvl-low: #E06A1F;
  --lvl-overdue: #D23B2F;
  --lvl-overdue-text: #A8291E;
  --lvl-high-wash: #DDF1E5;
  --lvl-mid-wash: #FBF0D2;
  --lvl-low-wash: #FCE6D6;
  --lvl-overdue-wash: #FBE0DD;
  --warn-wash: #FFF1DD;
  --warn-line: #F1C58F;
  --error-wash: #FBE3E0;
  --info-wash: #E0EEF8;
  --robot-wash: #ECE8FB;
  --robot: #5B48C2;
  --track: #E3EAE6;

  --av-c1: #0C6B5F; --av-c2: #8A4FB8; --av-c3: #C2552B; --av-c4: #2F6DB5; --av-c5: #8C6D0A; --av-c6: #B23A6A;
  --on-av: #FFFFFF;

  --focus: #12201A;
  --shadow-sm: 0 1px 2px rgba(18, 32, 26, .06);
  --shadow: 0 1px 2px rgba(18, 32, 26, .05), 0 6px 20px rgba(18, 32, 26, .06);
  --shadow-lg: 0 10px 30px rgba(12, 60, 50, .18);
  --shadow-tab: 0 8px 28px rgba(18, 32, 26, .14), 0 0 0 1px rgba(18, 32, 26, .05);

  --font-text: "Jakarta", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --fs-3xl: 2.5rem;
  --lh-text: 1.45; --lh-tight: 1.12;
  --fw-medium: 600; --fw-bold: 750; --fw-black: 800;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 28px; --s7: 44px;
  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;
  --gutter: 16px; --page-max: 600px; --rail: 232px;
  --tabbar-h: 64px; --tabbar-gap: 10px; --tap: 44px; --tick: 40px;
  --bar-h: 6px; --bar-h-thick: 10px; --avatar: 32px; --avatar-sm: 22px; --avatar-lg: 44px; --ring: 92px;

  --t-fast: 120ms; --t-med: 220ms; --t-slow: 420ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1412;
    --bg-tint: #10201B;
    --surface: #18201D;
    --surface-2: #1C2522;
    --surface-sunk: #222C28;
    --glass: rgba(24, 32, 29, .82);
    --line: #2A3530;
    --line-strong: #3C4943;
    --line-input: #71807A;
    --text: #E8EFEB;
    --text-2: #B9C6BF;
    --text-3: #9AA8A1;
    --accent: #4BC4B0;
    --accent-hover: #63D2C0;
    --accent-text: #72D6C4;
    --accent-wash: #17392F;
    --accent-soft: #142B25;
    --on-accent: #052019;
    --hero-from: #136B5F;
    --hero-to: #0B3B35;
    --lvl-high: #4CC07F;
    --lvl-mid: #E5B83F;
    --lvl-low: #F38D4A;
    --lvl-overdue: #F26B5E;
    --lvl-overdue-text: #F79086;
    --lvl-high-wash: #163126;
    --lvl-mid-wash: #33290F;
    --lvl-low-wash: #3A2414;
    --lvl-overdue-wash: #3C1C19;
    --warn-wash: #36280F;
    --warn-line: #6B4A22;
    --error-wash: #3D1D1A;
    --info-wash: #15303B;
    --robot-wash: #241F3F;
    --robot: #A99BF5;
    --track: #29342F;
    --av-c1: #2E9C8C; --av-c2: #A673CF; --av-c3: #D8774E; --av-c4: #5A90D3; --av-c5: #B89A2E; --av-c6: #CF5E8B;
    --on-av: #0B1210;
    --focus: #E8EFEB;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, .45);
    --shadow-tab: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .06);
  }
}

/* ---------- theme "rosa" (chosen per person under Mehr → Design) ----------
   Only the brand colours change; the clean/due/overdue colours keep their meaning. */
:root[data-theme="rosa"] {
  --bg: #FBF4F6;
  --bg-tint: #F9E3EA;
  --surface-2: #FDF8FA;
  --surface-sunk: #F3E6EB;
  --glass: rgba(255, 255, 255, .8);
  --line: #EEDFE5;
  --line-strong: #D9C2CB;
  --line-input: #8A7580;
  --text: #241A1E;
  --text-2: #4F4047;
  --text-3: #6B5A62;          /* ≥ 4.5:1 on bg and surface */
  --accent: #B8326A;
  --accent-hover: #9E2A5B;
  --accent-text: #A82D61;
  --accent-wash: #F8D9E5;
  --accent-soft: #FCEEF3;
  --accent-shadow: rgba(184, 50, 106, .28);
  --hero-from: #D9487F;
  --hero-to: #8E2352;
  --track: #F1E3E9;
  --focus: #241A1E;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="rosa"] {
    --bg: #161013;
    --bg-tint: #2A1520;
    --surface: #211A1E;
    --surface-2: #261E22;
    --surface-sunk: #2D2328;
    --glass: rgba(33, 26, 30, .82);
    --line: #3A2C33;
    --line-strong: #4E3D45;
    --line-input: #85707A;
    --text: #F4E9EE;
    --text-2: #D3C0C9;
    --text-3: #B19CA6;
    --accent: #F27BAA;
    --accent-hover: #F795BB;
    --accent-text: #F68DB6;
    --accent-wash: #46202F;
    --accent-soft: #351925;
    --on-accent: #2A0A17;
    --accent-shadow: rgba(0, 0, 0, .4);
    --hero-from: #A3285C;
    --hero-to: #5A1532;
    --track: #3A2C33;
    --focus: #F4E9EE;
  }
}