/* Design tokens — όλα τα χρώματα και οι αποστάσεις σε ένα σημείο */
:root {
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bg: #ECEEF1;
  --surface: #FFFFFF;
  --surface-2: #F5F6F8;
  --surface-3: #E9ECF0;
  --ink: #1A1E23;
  --ink-2: #454C56;
  --muted: #737B86;
  --line: #DEE2E7;
  --line-strong: #C8CDD4;

  --accent: #1D4E89;
  --accent-ink: #FFFFFF;
  --accent-soft: #E2EAF4;
  --hero-tint: #DCE4EE;
  --hero-shape: #2A3442;

  --frame: #1A1E23;
  --frame-ink: #E9ECEF;
  --frame-muted: #8A929C;
  --frame-hover: #252A31;
  --frame-active: #2F363F;

  --tile-bg: #1A1E23;
  --tile-ink: #F4F5F7;
  --tile-lead: #5B636D;

  --st-ok: #2E7D4F;
  --st-ok-soft: #E1F0E7;
  --st-upcoming: #4E6A8A;
  --st-upcoming-soft: #E5EBF2;
  --st-soon: #A9620A;
  --st-soon-soft: #FAEDD9;
  --st-overdue: #BF3A2E;
  --st-overdue-soft: #FAE3E0;

  --cat-0: #1D4E89;
  --cat-1: #5C86B8;
  --cat-2: #A4BCD8;
  --cat-3: #7A6F5E;
  --cat-4: #B9AE9C;
  --cat-5: #C9CED5;

  --plate-bg: #FFFFFF;
  --plate-ink: #111111;
  --plate-eu: #1F4BA5;

  --r-xl: 24px;
  --r-lg: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-pill: 999px;

  --shadow-card: 0 1px 2px rgba(20, 24, 30, 0.05);
  --shadow-lift: 0 6px 20px rgba(20, 24, 30, 0.08);
  --shadow-sheet: 0 -12px 48px rgba(10, 14, 20, 0.22);

  --sidebar-w: 264px;
  --bottomnav-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111418;
    --surface: #181C21;
    --surface-2: #1E232A;
    --surface-3: #262C34;
    --ink: #E8EBEE;
    --ink-2: #B7BEC7;
    --muted: #858D98;
    --line: #272D35;
    --line-strong: #353C46;
    --accent: #7EAEEA;
    --accent-ink: #0B1522;
    --accent-soft: #1A2A3E;
    --hero-tint: #1F2833;
    --hero-shape: #A9BBD0;
    --frame: #0C0E11;
    --frame-ink: #E3E7EB;
    --frame-muted: #7D8590;
    --frame-hover: #171A1F;
    --frame-active: #20252C;
    --tile-bg: #0B0D10;
    --tile-ink: #F1F3F5;
    --tile-lead: #4A515A;
    --st-ok: #5DBE89;
    --st-ok-soft: #16291F;
    --st-upcoming: #93AACA;
    --st-upcoming-soft: #1B2430;
    --st-soon: #E7A34E;
    --st-soon-soft: #2F2314;
    --st-overdue: #EF6E61;
    --st-overdue-soft: #331B18;
    --cat-0: #7EAEEA;
    --cat-1: #4F7CB4;
    --cat-2: #2F4E75;
    --cat-3: #B5A88F;
    --cat-4: #7B725F;
    --cat-5: #3E4650;
    --shadow-card: 0 0 0 rgba(0, 0, 0, 0);
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #111418;
  --surface: #181C21;
  --surface-2: #1E232A;
  --surface-3: #262C34;
  --ink: #E8EBEE;
  --ink-2: #B7BEC7;
  --muted: #858D98;
  --line: #272D35;
  --line-strong: #353C46;
  --accent: #7EAEEA;
  --accent-ink: #0B1522;
  --accent-soft: #1A2A3E;
  --hero-tint: #1F2833;
  --hero-shape: #A9BBD0;
  --frame: #0C0E11;
  --frame-ink: #E3E7EB;
  --frame-muted: #7D8590;
  --frame-hover: #171A1F;
  --frame-active: #20252C;
  --tile-bg: #0B0D10;
  --tile-ink: #F1F3F5;
  --tile-lead: #4A515A;
  --st-ok: #5DBE89;
  --st-ok-soft: #16291F;
  --st-upcoming: #93AACA;
  --st-upcoming-soft: #1B2430;
  --st-soon: #E7A34E;
  --st-soon-soft: #2F2314;
  --st-overdue: #EF6E61;
  --st-overdue-soft: #331B18;
  --cat-0: #7EAEEA;
  --cat-1: #4F7CB4;
  --cat-2: #2F4E75;
  --cat-3: #B5A88F;
  --cat-4: #7B725F;
  --cat-5: #3E4650;
  --shadow-card: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}