/* ── Project Design Tokens ────────────────────────────────────────────
   Generated by Nodge — edit freely or regenerate from project settings
   ──────────────────────────────────────────────────────────────────── */

/* Dark mode (default) */
:root {
  --color-text:             #d4dce8;
  --color-text-muted:       #b6b7b7;
  --color-bg:               #0f1923;
  --color-surface:          #152331;
  --color-border:           #182939;
  --color-primary:          #3b82f6;
  --color-primary-hover:    #1469f4;
  --color-primary-20:       rgba(59, 130, 246, 0.2);
  --color-secondary-20:     rgba(6, 182, 212, 0.2);
  --color-secondary:        #06b6d4;
  --color-accent:           #22d3ee;
  --color-accent-20:        rgba(34, 211, 238, 0.2);
  --color-muted-20:         rgba(182, 183, 183, 0.2);
  --color-overlay:          rgba(0, 0, 0, 0.6);
  --color-on-primary:       #ffffff;
  --color-hover:            rgba(255, 255, 255, 0.06);
  --color-active:           #0f1923;
  --color-error:            #e05252;
  --color-error-bg:         rgba(224, 82, 82, 0.1);

  /* Toegevoegd voor het Vandaag-scherm (design-handoff 1d, §3). Het ontwerp
     gebruikte deze als kale hexwaarden; hardcoden is geen optie, dus staan ze
     hier in beide modes. */
  --color-nav-bg:           #0d151d;
  --color-text-subtle:      #8b98a8;
  --color-text-faint:       #3d4c5c;
  --color-on-accent:        #04222b;
  --color-primary-text:     #8fb4f8;
  /* Drie die de handoff niet noemde maar het ontwerp wel gebruikt: het gevulde
     vlak van een getrainde dag, de rand van de vandaag-cel en de rand van een
     invulveld. */
  --color-accent-55:        rgba(34, 211, 238, 0.55);
  --color-primary-50:       rgba(59, 130, 246, 0.5);
  --color-border-strong:    rgba(34, 64, 96, 0.53);

  --font-ui:   'Satoshi', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-code: 'JetBrains Mono', 'Fira Code', monospace;

  /* De schaal die het ontwerp gebruikt: 8 / 12 / 14 / 16 / 28. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius:    14px;
  --radius-lg: 16px;
  --radius-xl: 28px;
}

/* Light mode (browser preference) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --color-text:             #1e293b;
    --color-text-muted:       #535558;
    --color-bg:               #f8fafc;
    --color-surface:          #eaf0f6;
    --color-border:           #e1eaf2;
    --color-primary:          #2563eb;
    --color-primary-hover:    #1350d4;
    --color-primary-20:       rgba(37, 99, 235, 0.2);
    --color-secondary-20:     rgba(8, 145, 178, 0.2);
    --color-secondary:        #0891b2;
    --color-accent:           #0e7490;
    --color-accent-20:        rgba(14, 116, 144, 0.2);
    --color-muted-20:         rgba(83, 85, 88, 0.2);
    --color-overlay:          rgba(0, 0, 0, 0.5);
    --color-on-primary:       #ffffff;
    --color-hover:            rgba(0, 0, 0, 0.04);
    --color-active:           #f8fafc;
    --color-error:            #c0392b;
    --color-error-bg:         rgba(192, 57, 43, 0.08);

    --color-nav-bg:           #e3ebf3;
    --color-text-subtle:      #6b7787;
    --color-text-faint:       #a8b4c2;
    --color-on-accent:        #ffffff;
    --color-primary-text:     #1d4ed8;
    /* In light mode is --color-accent al donker (#0e7490). Een vlak van 55%
       daarvan zou witte tekst te weinig contrast geven, dus hier vol. */
    --color-accent-55:        #0e7490;
    --color-primary-50:       rgba(37, 99, 235, 0.5);
    --color-border-strong:    rgba(100, 116, 139, 0.35);
  }
}

/* Light mode (forced via user preference) */
:root[data-theme="light"] {
  --color-text:             #1e293b;
  --color-text-muted:       #535558;
  --color-bg:               #f8fafc;
  --color-surface:          #eaf0f6;
  --color-border:           #e1eaf2;
  --color-primary:          #2563eb;
  --color-primary-hover:    #1350d4;
  --color-primary-20:       rgba(37, 99, 235, 0.2);
  --color-secondary-20:     rgba(8, 145, 178, 0.2);
  --color-secondary:        #0891b2;
  --color-accent:           #0e7490;
  --color-accent-20:        rgba(14, 116, 144, 0.2);
  --color-muted-20:         rgba(83, 85, 88, 0.2);
  --color-overlay:          rgba(0, 0, 0, 0.5);
  --color-on-primary:       #ffffff;
  --color-hover:            rgba(0, 0, 0, 0.04);
  --color-active:           #f8fafc;
  --color-error:            #c0392b;
  --color-error-bg:         rgba(192, 57, 43, 0.08);

  --color-nav-bg:           #e3ebf3;
  --color-text-subtle:      #6b7787;
  --color-text-faint:       #a8b4c2;
  --color-on-accent:        #ffffff;
  --color-primary-text:     #1d4ed8;
  --color-accent-55:        #0e7490;
  --color-primary-50:       rgba(37, 99, 235, 0.5);
  --color-border-strong:    rgba(100, 116, 139, 0.35);
}