:root {
  color-scheme: light dark;

  --md-sys-color-primary: oklch(0.47 0.083 42);
  --md-sys-color-on-primary: oklch(0.99 0.006 76);
  --md-sys-color-primary-container: oklch(0.9 0.047 62);
  --md-sys-color-on-primary-container: oklch(0.29 0.053 38);
  --md-sys-color-secondary: oklch(0.45 0.038 92);
  --md-sys-color-on-secondary: oklch(0.99 0.006 76);
  --md-sys-color-secondary-container: oklch(0.9 0.033 92);
  --md-sys-color-on-secondary-container: oklch(0.29 0.03 88);
  --md-sys-color-tertiary: oklch(0.46 0.055 205);
  --md-sys-color-tertiary-container: oklch(0.9 0.04 205);
  --md-sys-color-on-tertiary-container: oklch(0.27 0.043 205);
  --md-sys-color-surface: oklch(1 0 0);
  --md-sys-color-surface-dim: oklch(1 0 0);
  --md-sys-color-surface-bright: oklch(1 0 0);
  --md-sys-color-surface-container-lowest: oklch(1 0 0);
  --md-sys-color-surface-container-low: oklch(0.97 0.009 78);
  --md-sys-color-surface-container: oklch(0.948 0.012 76);
  --md-sys-color-surface-container-high: oklch(0.928 0.014 76);
  --md-sys-color-surface-container-highest: oklch(0.902 0.016 76);
  --md-sys-color-on-surface: oklch(0.26 0.024 54);
  --md-sys-color-on-surface-variant: oklch(0.44 0.024 66);
  --md-sys-color-outline: oklch(0.62 0.021 72);
  --md-sys-color-outline-variant: oklch(0.84 0.018 76);
  --md-sys-color-scrim: oklch(0.2 0.02 54);

  --md-sys-state-hover: 0.08;
  --md-sys-state-focus: 0.12;
  --md-sys-state-pressed: 0.12;

  --bg-canvas: var(--md-sys-color-surface);
  --bg-surface: var(--md-sys-color-surface-container-lowest);
  --bg-elevated: var(--md-sys-color-surface-container-low);

  --fg-primary: var(--md-sys-color-on-surface);
  --fg-secondary: var(--md-sys-color-on-surface-variant);
  --fg-muted: color-mix(in oklch, var(--md-sys-color-on-surface-variant) 72%, var(--md-sys-color-surface) 28%);

  --border-soft: var(--md-sys-color-outline-variant);
  --border-strong: var(--md-sys-color-outline);

  --accent-peach: var(--md-sys-color-primary-container);
  --accent-sage: oklch(0.82 0.052 132);
  --accent-blue: var(--md-sys-color-tertiary-container);
  --accent-oat: var(--md-sys-color-secondary-container);
  --accent-brick: var(--md-sys-color-primary);

  --event-eat: oklch(0.82 0.065 76);
  --event-drink: oklch(0.82 0.048 205);
  --event-elimination: oklch(0.82 0.05 108);
  --event-outdoor: oklch(0.78 0.063 142);
  --event-vaccine: oklch(0.82 0.052 250);

  --timeline-card-surface: var(--md-sys-color-surface-container-lowest);
  --timeline-card-border: var(--md-sys-color-outline-variant);
  --timeline-card-shadow: 0 2px 6px oklch(0.28 0.018 54 / 0.08);
  --timeline-tone-feed: color-mix(in oklch, var(--event-eat) 22%, var(--md-sys-color-surface-container-lowest));
  --timeline-tone-sleep: color-mix(in oklch, var(--event-drink) 18%, var(--md-sys-color-surface-container-lowest));
  --timeline-tone-care: color-mix(in oklch, var(--event-elimination) 18%, var(--md-sys-color-surface-container-lowest));
  --timeline-tone-outdoor: color-mix(in oklch, var(--event-outdoor) 18%, var(--md-sys-color-surface-container-lowest));
  --timeline-tone-health: color-mix(in oklch, var(--event-vaccine) 18%, var(--md-sys-color-surface-container-lowest));

  --shadow-soft: 0 2px 8px oklch(0.28 0.018 54 / 0.09);
  --shadow-card: 0 1px 3px oklch(0.28 0.018 54 / 0.12);
  --shadow-floating: 0 8px 24px oklch(0.28 0.018 54 / 0.18);
  --shadow-focus: 0 0 0 4px color-mix(in oklch, var(--md-sys-color-primary) 22%, transparent);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;

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

  --motion-fast: 160ms;
  --motion-base: 240ms;
  --motion-slow: 360ms;
  --motion-voice: 520ms;

  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft-out: cubic-bezier(0.17, 0.84, 0.44, 1);
  --ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-sys-color-primary: oklch(0.78 0.07 58);
    --md-sys-color-on-primary: oklch(0.2 0.04 40);
    --md-sys-color-primary-container: oklch(0.32 0.052 42);
    --md-sys-color-on-primary-container: oklch(0.92 0.04 62);
    --md-sys-color-secondary: oklch(0.78 0.035 92);
    --md-sys-color-on-secondary: oklch(0.2 0.03 88);
    --md-sys-color-secondary-container: oklch(0.3 0.026 88);
    --md-sys-color-on-secondary-container: oklch(0.9 0.032 92);
    --md-sys-color-tertiary: oklch(0.78 0.048 205);
    --md-sys-color-tertiary-container: oklch(0.31 0.04 205);
    --md-sys-color-on-tertiary-container: oklch(0.9 0.035 205);
    --md-sys-color-surface: oklch(0 0 0);
    --md-sys-color-surface-dim: oklch(0 0 0);
    --md-sys-color-surface-bright: oklch(0 0 0);
    --md-sys-color-surface-container-lowest: oklch(0.12 0.006 58);
    --md-sys-color-surface-container-low: oklch(0.16 0.008 58);
    --md-sys-color-surface-container: oklch(0.2 0.01 58);
    --md-sys-color-surface-container-high: oklch(0.24 0.012 58);
    --md-sys-color-surface-container-highest: oklch(0.29 0.014 58);
    --md-sys-color-on-surface: oklch(0.94 0.006 76);
    --md-sys-color-on-surface-variant: oklch(0.76 0.014 76);
    --md-sys-color-outline: oklch(0.55 0.016 76);
    --md-sys-color-outline-variant: oklch(0.34 0.014 76);
    --md-sys-color-scrim: oklch(0 0 0);

    --event-eat: oklch(0.72 0.07 76);
    --event-drink: oklch(0.72 0.05 205);
    --event-elimination: oklch(0.72 0.05 108);
    --event-outdoor: oklch(0.68 0.058 142);
    --event-vaccine: oklch(0.72 0.052 250);

    --shadow-soft: none;
    --shadow-card: none;
    --shadow-floating: 0 8px 28px oklch(0 0 0 / 0.52);
    --shadow-focus: 0 0 0 4px color-mix(in oklch, var(--md-sys-color-primary) 24%, transparent);
  }
}