/* Leavenly design tokens. Light theme by default, dark via prefers-color-scheme or [data-theme="dark"]. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Palette: flour, crust, rye, sage, honey */
  --flour-50: #FCFAF6;
  --flour-100: #FAF6EF;
  --flour-200: #F3ECE1;
  --flour-300: #E6DCCD;
  --flour-400: #CDBEAA;
  --crust-300: #E8A877;
  --crust-400: #D3814D;
  --crust-500: #A4532A;
  --crust-600: #8A4321;
  --crust-700: #6A3218;
  --rye-500: #6E4B3A;
  --rye-800: #2A2019;
  --sage-200: #E1ECDD;
  --sage-500: #4A7350;
  --sage-300: #8CC092;
  --honey-200: #F7EACB;
  --honey-500: #B7791F;
  --honey-700: #7A4E0E;
  --honey-300: #E2B25C;
  --berry-500: #B23F2E;

  /* Semantic, light */
  --color-bg: #FAF6EF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F3ECE1;
  --color-surface-sunken: #EFE7DA;
  --color-line: #E6DCCD;
  --color-line-strong: #CDBEAA;
  --color-text: #2A2019;
  --color-text-2: #66553F;
  --color-text-3: #75634F;
  --color-primary: #A4532A;
  --color-primary-pressed: #8A4321;
  --color-on-primary: #FFFFFF;
  --color-primary-soft: #F6E3D3;
  --color-on-primary-soft: #7A3A1A;
  --color-success: #4A7350;
  --color-success-soft: #E1ECDD;
  --color-on-success-soft: #2F5135;
  --color-warning: #B7791F;
  --color-warning-soft: #F7EACB;
  --color-on-warning-soft: #7A4E0E;
  --color-danger: #B23F2E;
  --color-danger-soft: #F8E1DC;
  --color-premium: #B7791F;
  --color-scrim: rgba(42, 32, 25, 0.38);
  --color-glass: rgba(250, 246, 239, 0.94);
  --color-bar: #FAF6EF; /* solid bar fill under Reduce Transparency */
  /* Premium card gradient; text on it uses --color-on-premium (contrast >= 4.5:1 at both ends) */
  --color-premium-from: #A4532A;
  --color-premium-to: #7A3A1A;
  --color-on-premium: #FFFFFF;
  --color-on-premium-2: #FBEFE5;
  --color-photo-overlay: rgba(20, 14, 10, 0.55);
  --color-ring-track: #EBE2D5;
  --color-chart-bar: #C0703F; /* 3.7:1 on surface; highlighted bars use --color-primary */

  /* Typography */
  --font-display: 'Fraunces', 'New York', Georgia, serif;
  --font-ui: 'Inter', -apple-system, 'SF Pro Text', Roboto, system-ui, sans-serif;
  --fs-display: 34px; --lh-display: 40px;
  --fs-title1: 28px;  --lh-title1: 34px;
  --fs-title2: 22px;  --lh-title2: 28px;
  --fs-title3: 20px;  --lh-title3: 25px;
  --fs-headline: 17px; --lh-headline: 22px;
  --fs-body: 17px;    --lh-body: 24px;
  --fs-callout: 16px; --lh-callout: 22px;
  --fs-subhead: 15px; --lh-subhead: 20px;
  --fs-footnote: 13px; --lh-footnote: 18px;
  --fs-caption: 12px; --lh-caption: 16px;
  --fs-timer: 64px;   --lh-timer: 68px;
  --fs-stat: 40px;    --lh-stat: 44px;

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing (4 pt grid) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-14: 56px;
  --gutter: 20px;
  --tap: 44px;

  /* Elevation: warm, soft */
  --shadow-1: 0 1px 2px rgba(60, 38, 20, 0.06), 0 2px 8px rgba(60, 38, 20, 0.05);
  --shadow-2: 0 2px 4px rgba(60, 38, 20, 0.05), 0 10px 28px rgba(60, 38, 20, 0.09);
  --shadow-3: 0 6px 16px rgba(60, 38, 20, 0.08), 0 24px 56px rgba(60, 38, 20, 0.14);
  --shadow-glow: 0 0 0 4px rgba(164, 83, 42, 0.12), 0 12px 32px rgba(164, 83, 42, 0.22);

  /* Motion (mirrors motion.md) */
  --dur-instant: 90ms;
  --dur-short: 120ms;
  --dur-medium: 240ms;
  --dur-long: 420ms;
  --dur-hero: 560ms;
  --ease-standard: cubic-bezier(0.20, 0.75, 0.34, 0.94);
  --ease-settle: cubic-bezier(0.00, 0.65, 0.51, 0.99);
  --ease-travel: cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --ease-exit: cubic-bezier(0.55, 0.00, 0.75, 0.40);
  --stagger: 35ms;
  --motion-distance: 12px; /* travel of enter/exit slides */
  --motion-scale: 0.96;   /* press scale */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #16110D;
    --color-surface: #211A14;
    --color-surface-2: #2C231B;
    --color-surface-sunken: #120E0A;
    --color-line: #3A2F25;
    --color-line-strong: #54463A;
    --color-text: #F4ECE1;
    --color-text-2: #CDBDAB;
    --color-text-3: #AE9D89;
    --color-primary: #E89A63;
    --color-primary-pressed: #D3814D;
    --color-on-primary: #241307;
    --color-primary-soft: #3A2518;
    --color-on-primary-soft: #F2C29E;
    --color-success: #8CC092;
    --color-success-soft: #1F2E21;
    --color-on-success-soft: #A9D4AD;
    --color-warning: #E2B25C;
    --color-warning-soft: #33270F;
    --color-on-warning-soft: #EBC57E;
    --color-danger: #EE8A78;
    --color-danger-soft: #3A1E19;
    --color-premium: #E2B25C;
    --color-scrim: rgba(0, 0, 0, 0.55);
    --color-glass: rgba(22, 17, 13, 0.94);
    --color-bar: #16110D;
    --color-premium-from: #E89A63;
    --color-premium-to: #D3814D;
    --color-on-premium: #241307;
    --color-on-premium-2: #3A1D0C;
    --color-ring-track: #3A2F25;
    --color-chart-bar: #A86A45;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.35);
    --shadow-3: 0 8px 20px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 0 4px rgba(232, 154, 99, 0.16), 0 12px 32px rgba(232, 154, 99, 0.22);
  }
}

/* Reduce Motion: durations collapse to a short crossfade; Lottie shows its static frame (see motion.md). */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-short: 0ms;
    --dur-medium: 200ms; /* crossfade only, no movement */
    --dur-long: 200ms;
    --dur-hero: 200ms;
    --stagger: 0ms;
    --motion-distance: 0px;
    --motion-scale: 1;
  }
}

/* Reduce Transparency: bars, sheets and glass buttons become solid. */
@media (prefers-reduced-transparency: reduce) {
  :root { --color-glass: var(--color-bar); --color-scrim: rgba(42, 32, 25, 0.6); }
}