/* ==========================================================================
   HabitQuest — Design tokens
   Serene, minimalistisch, tactiel. Eén accent, veel witruimte, zachte diepte.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* --- Kleur: licht ---------------------------------------------------- */
  --paper: #f7f6f3;
  --surface: #ffffff;
  --surface-2: #fbfaf8;
  --surface-sunken: #f1efea;
  --ink: #1a1c1b;
  --ink-2: #4a4f4c;
  --ink-3: #85898a;
  --hairline: rgba(26, 28, 27, 0.08);
  --hairline-strong: rgba(26, 28, 27, 0.14);

  --accent: #2f6f57;
  --accent-hover: #275c48;
  --accent-ink: #ffffff;
  --accent-tint: #e7f0eb;
  --accent-tint-2: #d6e6dd;

  --flame: #c9743f;
  --flame-tint: #fbeee4;
  --frost: #4a7fa8;
  --frost-tint: #e6eef5;
  --nano: #8a6bb0;
  --nano-tint: #efe9f7;
  --warn: #a8543f;

  /* --- Diepte ----------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(20, 24, 22, 0.04);
  --shadow-sm: 0 2px 8px rgba(20, 24, 22, 0.05), 0 1px 2px rgba(20, 24, 22, 0.04);
  --shadow-md: 0 8px 28px rgba(20, 24, 22, 0.09), 0 2px 6px rgba(20, 24, 22, 0.04);
  --shadow-lg: 0 24px 60px rgba(20, 24, 22, 0.18);

  /* --- Radii ------------------------------------------------------------ */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 18px;
  --r-lg: 24px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* --- Ruimte ----------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* --- Typografie -------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Inter,
    system-ui, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI',
    Inter, system-ui, sans-serif;

  --t-display: 30px;
  --t-title: 23px;
  --t-heading: 19px;
  --t-body: 16px;
  --t-sub: 14.5px;
  --t-caption: 13px;
  --t-micro: 11.5px;

  --lh-tight: 1.18;
  --lh-snug: 1.34;
  --lh-body: 1.5;

  /* --- Beweging (alles onder 150ms voelbaar) ----------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* --- Layout ------------------------------------------------------------ */
  --frame-max: 414px;
  --tabbar-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0d0f0e;
    --surface: #171a19;
    --surface-2: #1c201e;
    --surface-sunken: #121514;
    --ink: #f0efeb;
    --ink-2: #b6bcb8;
    --ink-3: #7e8582;
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.15);

    --accent: #6bbd97;
    --accent-hover: #7fcaa6;
    --accent-ink: #0b1310;
    --accent-tint: #1b2b24;
    --accent-tint-2: #22382e;

    --flame: #e29760;
    --flame-tint: #2c211a;
    --frost: #7fb0d4;
    --frost-tint: #1a242c;
    --nano: #b295d8;
    --nano-tint: #241d2e;
    --warn: #d98d76;

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);
  }
}

/* Gebruiker kan het thema forceren via Instellingen. */
:root[data-theme='light'] {
  color-scheme: light;
}
:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #0d0f0e;
  --surface: #171a19;
  --surface-2: #1c201e;
  --surface-sunken: #121514;
  --ink: #f0efeb;
  --ink-2: #b6bcb8;
  --ink-3: #7e8582;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.15);
  --accent: #6bbd97;
  --accent-hover: #7fcaa6;
  --accent-ink: #0b1310;
  --accent-tint: #1b2b24;
  --accent-tint-2: #22382e;
  --flame: #e29760;
  --flame-tint: #2c211a;
  --frost: #7fb0d4;
  --frost-tint: #1a242c;
  --nano: #b295d8;
  --nano-tint: #241d2e;
  --warn: #d98d76;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.7);
}