/* =====================================================================
   DateTracker — design tokens
   Theme: "Fernbeziehung" – warm twilight palette with dark/light modes
   Every colour & font in app.css references a token defined here.
   ===================================================================== */

:root {
  color-scheme: light dark;

  /* ---- palette: Light Mode ---- */
  --color-bg:        oklch(0.985 0.008 280);   /* cool paper            */
  --color-bg-sunk:   oklch(0.955 0.012 280);   /* recessed areas        */
  --color-surface:   oklch(1 0 0);             /* raised cards          */
  --color-ink:       oklch(0.20 0.02 280);     /* primary text          */
  --color-ink-soft:  oklch(0.40 0.02 280);     /* secondary text        */
  --color-muted:     oklch(0.55 0.015 280);    /* tertiary / hints      */
  --color-line:      oklch(0.90 0.01 280);     /* hairline borders      */
  --color-line-strong: oklch(0.82 0.012 280);

  --color-accent:        oklch(0.55 0.22 330);   /* rose-pink: primary actions */
  --color-accent-press:  oklch(0.48 0.22 330);
  --color-accent-soft:   oklch(0.94 0.05 330);
  --color-on-accent:     oklch(0.99 0.01 330);

  --color-a:        oklch(0.60 0.18 330);      /* Person A — rose       */
  --color-a-soft:   oklch(0.94 0.05 330);
  --color-b:        oklch(0.58 0.14 250);      /* Person B — sky blue   */
  --color-b-soft:   oklch(0.94 0.04 250);

  --color-goal:     oklch(0.72 0.15 85);       /* destination — gold    */
  --color-goal-ink: oklch(0.42 0.12 85);

  --color-ok:       oklch(0.6 0.13 150);
  --color-warn:     oklch(0.62 0.17 50);
  --color-danger:   oklch(0.55 0.2 25);

  --color-heart:    oklch(0.58 0.24 15);       /* heart red             */

  /* glass/frosted bar */
  --topbar-bg:      oklch(0.985 0.008 280 / 0.88);
  --bottomnav-bg:   oklch(0.985 0.008 280 / 0.92);

  /* ---- type (sans-serif only — no serif anywhere) ---- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.83rem);
  --step-0:  clamp(0.95rem, 0.92rem + 0.15vw, 1rem);
  --step-1:  clamp(1.1rem, 1.04rem + 0.3vw, 1.25rem);
  --step-2:  clamp(1.35rem, 1.24rem + 0.55vw, 1.65rem);
  --step-3:  clamp(1.7rem, 1.5rem + 1vw, 2.3rem);
  --step-4:  clamp(2.1rem, 1.7rem + 2vw, 3.1rem);

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- spacing (4pt) ---- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */

  /* ---- radii ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 2px oklch(0.22 0.018 280 / 0.06), 0 1px 3px oklch(0.22 0.018 280 / 0.05);
  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-md: 0 2px 6px oklch(0.22 0.018 280 / 0.08), 0 6px 18px oklch(0.22 0.018 280 / 0.08);
  --shadow-lg: 0 8px 30px oklch(0.22 0.018 280 / 0.14);
  --shadow-glow: 0 0 20px oklch(0.55 0.22 330 / 0.15);

  /* ---- motion: three named easings ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.25);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-fast: 120ms;
  --dur-mid: 220ms;
  --dur-slow: 400ms;

  /* ---- layout ---- */
  --topbar-h: 3.5rem;
  --bottomnav-h: 4rem;
  --measure: 34rem;
  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent);
}

/* ---- Dark Mode ---- */
[data-theme="dark"] {
  --color-bg:        oklch(0.16 0.015 280);
  --color-bg-sunk:   oklch(0.13 0.015 280);
  --color-surface:   oklch(0.20 0.018 280);
  --color-ink:       oklch(0.92 0.01 280);
  --color-ink-soft:  oklch(0.75 0.015 280);
  --color-muted:     oklch(0.55 0.015 280);
  --color-line:      oklch(0.28 0.015 280);
  --color-line-strong: oklch(0.35 0.015 280);

  --color-accent:        oklch(0.68 0.22 330);
  --color-accent-press:  oklch(0.60 0.22 330);
  --color-accent-soft:   oklch(0.25 0.06 330);
  --color-on-accent:     oklch(0.99 0.01 330);

  --color-a:        oklch(0.72 0.20 330);
  --color-a-soft:   oklch(0.25 0.06 330);
  --color-b:        oklch(0.70 0.14 250);
  --color-b-soft:   oklch(0.25 0.04 250);

  --color-goal:     oklch(0.72 0.15 85);
  --color-goal-ink: oklch(0.82 0.10 85);

  --color-ok:       oklch(0.65 0.13 150);
  --color-warn:     oklch(0.68 0.17 50);
  --color-danger:   oklch(0.62 0.2 25);

  --color-heart:    oklch(0.65 0.24 15);

  --topbar-bg:      oklch(0.16 0.015 280 / 0.92);
  --bottomnav-bg:   oklch(0.16 0.015 280 / 0.95);

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
  --shadow-md: 0 2px 6px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.2);
  --shadow-lg: 0 8px 30px rgb(0 0 0 / 0.4);
  --shadow-glow: 0 0 20px oklch(0.68 0.22 330 / 0.2);

  --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent);
}

/* Auto dark mode if no explicit toggle */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:        oklch(0.16 0.015 280);
    --color-bg-sunk:   oklch(0.13 0.015 280);
    --color-surface:   oklch(0.20 0.018 280);
    --color-ink:       oklch(0.92 0.01 280);
    --color-ink-soft:  oklch(0.75 0.015 280);
    --color-muted:     oklch(0.55 0.015 280);
    --color-line:      oklch(0.28 0.015 280);
    --color-line-strong: oklch(0.35 0.015 280);

    --color-accent:        oklch(0.68 0.22 330);
    --color-accent-press:  oklch(0.60 0.22 330);
    --color-accent-soft:   oklch(0.25 0.06 330);
    --color-on-accent:     oklch(0.99 0.01 330);

    --color-a:        oklch(0.72 0.20 330);
    --color-a-soft:   oklch(0.25 0.06 330);
    --color-b:        oklch(0.70 0.14 250);
    --color-b-soft:   oklch(0.25 0.04 250);

    --color-goal:     oklch(0.72 0.15 85);
    --color-goal-ink: oklch(0.82 0.10 85);

    --color-ok:       oklch(0.65 0.13 150);
    --color-warn:     oklch(0.68 0.17 50);
    --color-danger:   oklch(0.62 0.2 25);

    --color-heart:    oklch(0.65 0.24 15);

    --topbar-bg:      oklch(0.16 0.015 280 / 0.92);
    --bottomnav-bg:   oklch(0.16 0.015 280 / 0.95);

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-card: 0 4px 6px -1px rgb(0 0 0 / 0.2), 0 2px 4px -2px rgb(0 0 0 / 0.15);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 0.3), 0 6px 18px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 8px 30px rgb(0 0 0 / 0.4);
    --shadow-glow: 0 0 20px oklch(0.68 0.22 330 / 0.2);

    --focus-ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-accent);
  }
}