/* SAFA design tokens, ported for the web from design-system/tokens/.
   Values are copied, not reinterpreted — the promo page and the app must not
   drift apart on colour or type.

   One deliberate change: the design system carries dark mode on a `.theme-dark`
   class, toggled by the app. This page has no toggle and no JavaScript to build
   one, so the same values hang off `prefers-color-scheme` instead. Dark mode is
   still a purpose-built scale, not an inversion. */

:root {
  /* --- Brand --- */
  --safa-green-100: #dcfce7;
  --safa-green-200: #bbf7d0;
  --safa-green-300: #86efac;
  --safa-green-400: #4ade80;
  --safa-green-500: #22c55e; /* brand accent */
  --safa-green-600: #16a34a;
  --safa-green-700: #15803d;
  --safa-green-800: #166534;
  --safa-ink: #123a35; /* deep teal of the logo mark */

  /* --- Neutrals --- */
  --n-0: #ffffff;
  --n-50: #f5f6f5;
  --n-100: #eceeed;
  --n-200: #dcdfde;
  --n-300: #bcc1bf;
  --n-400: #8f9694;
  --n-500: #6b7370;
  --n-600: #515856;
  --n-700: #3a403e;
  --n-800: #232827;
  --n-900: #141817;
  --n-950: #0b0e0d;

  /* --- Surfaces --- */
  --bg-app: var(--n-50);
  --surface: var(--n-0);
  --surface-sunken: var(--n-100);
  --surface-raised: var(--n-0);

  /* --- Text --- */
  --text-strong: var(--n-900);
  --text-body: var(--n-800);
  --text-muted: var(--n-600);
  --text-faint: var(--n-400);
  --text-on-accent: #ffffff;
  --text-link: var(--safa-green-700);
  --text-link-hover: var(--safa-green-800);

  /* --- Lines --- */
  --border: var(--n-200);
  --border-strong: var(--n-300);
  --border-focus: var(--safa-green-600);

  /* --- Accent --- */
  --accent: var(--safa-green-500);
  --accent-fill: var(--safa-green-600); /* filled controls: 4.5:1 with white */
  --accent-fill-press: var(--safa-green-700);
  --accent-quiet: var(--safa-green-100);
  --accent-text: var(--safa-green-700);

  /* --- Day / session status ---
     Deliberately unequal weight: done is the only saturated state.
     A missed day is a muted fact, never red. */
  --status-selesai: var(--safa-green-500);
  --status-bolong: var(--n-400);
  --status-shaum: var(--safa-ink);
  --status-shaum-quiet: #e2eae8;

  /* --- Type --- */
  --font-ui: "Plus Jakarta Sans", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-wordmark: "Jost", "Plus Jakarta Sans", sans-serif;
  --font-num: var(--font-ui);

  --fs-display: 40px;
  --fs-h1: 28px;
  --fs-h2: 22px;
  --fs-title: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-label: 13px;
  --fs-caption: 12px;
  --fs-micro: 11px;

  --lh-tight: 1;
  --lh-snug: 1.2;
  --lh-normal: 1.4;
  --lh-relaxed: 1.55;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --ls-tight: -0.02em;
  --ls-snug: -0.01em;
  --ls-wordmark: 0.34em;
  --ls-overline: 0.09em;

  --type-display: var(--fw-bold) var(--fs-display) / var(--lh-snug) var(--font-ui);
  --type-h1: var(--fw-bold) var(--fs-h1) / var(--lh-snug) var(--font-ui);
  --type-h2: var(--fw-bold) var(--fs-h2) / var(--lh-snug) var(--font-ui);
  --type-title: var(--fw-semibold) var(--fs-title) / var(--lh-normal) var(--font-ui);
  --type-body: var(--fw-regular) var(--fs-body) / var(--lh-relaxed) var(--font-ui);
  --type-body-strong: var(--fw-semibold) var(--fs-body) / var(--lh-normal) var(--font-ui);
  --type-body-sm: var(--fw-regular) var(--fs-body-sm) / var(--lh-normal) var(--font-ui);
  --type-label: var(--fw-semibold) var(--fs-label) / var(--lh-normal) var(--font-ui);
  --type-caption: var(--fw-regular) var(--fs-caption) / var(--lh-normal) var(--font-ui);

  /* --- Spacing: 4dp base --- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 64px;
  --gutter: var(--sp-7);
  --touch-min: 48px;

  /* --- Shape --- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px; /* card default */
  --r-xl: 20px;
  --r-2xl: 28px;
  --r-pill: 999px;
  --bw: 1px;
  --ring-focus: 0 0 0 3px rgba(34, 197, 94, 0.32);

  /* --- Motion --- */
  --dur-press: 90ms;
  --dur-fast: 140ms;
  --dur-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --press-scale: 0.98;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-app: #0b0e0d;
    --surface: #141817;
    --surface-sunken: #0b0e0d;
    --surface-raised: #1c2120;

    --text-strong: #f3f5f4;
    --text-body: #e2e6e4;
    --text-muted: #a3aaa8;
    --text-faint: #767d7b;
    --text-on-accent: #06170c; /* dark ink on green: ~9:1 */
    --text-link: var(--safa-green-400);
    --text-link-hover: var(--safa-green-300);

    --border: #2a302e;
    --border-strong: #3d4442;
    --border-focus: var(--safa-green-400);

    --accent: var(--safa-green-500);
    --accent-fill: var(--safa-green-500);
    --accent-fill-press: var(--safa-green-600);
    --accent-quiet: #16281d;
    --accent-text: var(--safa-green-400);

    --status-selesai: var(--safa-green-500);
    --status-bolong: #4a5250;
    --status-shaum: #6ea8a0;
    --status-shaum-quiet: #16211f;

    --ring-focus: 0 0 0 3px rgba(74, 222, 128, 0.34);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --press-scale: 1;
  }
}