/* Design tokens — Material 3 roles on top of the Ledoso brand palette.
   Every colour is declared once with light-dark(); the theme follows the OS
   unless the viewer forces one via data-theme. */

:root {
  color-scheme: light dark;

  /* Neutrals (hue-biased toward the sage/coral brand) */
  --background: light-dark(#f3f6ec, #12160f);
  --surface: light-dark(#ffffff, #1b211a);
  --surface-low: light-dark(#f7f8f1, #212820);
  --surface-high: light-dark(#eceee3, #2a3226);
  --ink: light-dark(#1e2620, #edefe6);
  --ink-muted: light-dark(#566559, #a2ad9b);
  --outline: light-dark(#dde3d1, #2f372b);
  --outline-strong: light-dark(#aab4a0, #55614f);
  --scrim: rgb(10 14 10 / 0.45);
  --shadow-color: light-dark(#1e2620, #000000);

  /* Tonal roles: solid, container, on-container */
  --primary: light-dark(#ff6f3c, #ff8659);
  --on-primary: #2b1206;
  --primary-container: light-dark(#ffe4d6, #4a2a1b);
  --on-primary-container: light-dark(#7b2e0e, #ffd2bf);

  --secondary: light-dark(#4c5fd1, #8b98ff);
  --secondary-container: light-dark(#e4e7fb, #2a3050);
  --on-secondary-container: light-dark(#2f3e9e, #c5ccff);

  --going: light-dark(#2f9e63, #4cc98a);
  --going-container: light-dark(#dff3e7, #1d3327);
  --on-going-container: light-dark(#1b6b41, #8fe3b6);

  --declined: light-dark(#c24545, #e07575);
  --declined-container: light-dark(#fbe3e1, #3f2222);
  --on-declined-container: light-dark(#9b2c2c, #ffb4ab);

  --pending-container: light-dark(#f5ecd6, #38321c);
  --on-pending-container: light-dark(#7a5f12, #ebd98f);

  --food-container: light-dark(#f1e2d8, #3a2a20);
  --on-food-container: light-dark(#8a4524, #f2b9a0);
  --games-container: light-dark(#e9e4f7, #2a2440);
  --on-games-container: light-dark(#5f43a8, #d2c5fa);
  --other-container: light-dark(#dcf1ee, #1d3330);
  --on-other-container: light-dark(#1f7a74, #9fe3db);

  /* Typography */
  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --fs-headline: 1.625rem;
  --fs-title-lg: 1.1875rem;
  --fs-title-md: 1rem;
  --fs-body: 0.90625rem;
  --fs-body-sm: 0.8125rem;
  --fs-label: 0.75rem;
  --fs-label-sm: 0.6875rem;

  /* Shape (M3) */
  --shape-xs: 4px;
  --shape-sm: 8px;
  --shape-md: 12px;
  --shape-lg: 16px;
  --shape-lg-inc: 20px;
  --shape-xl: 28px;
  --shape-full: 999px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* Elevation (tinted with the ink / primary colour) */
  --elevation-1: 0 1px 2px color-mix(in srgb, var(--shadow-color) 10%, transparent),
                 0 2px 8px -2px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  --elevation-2: 0 2px 6px -1px color-mix(in srgb, var(--shadow-color) 16%, transparent),
                 0 8px 20px -6px color-mix(in srgb, var(--shadow-color) 14%, transparent);
  --elevation-3: 0 6px 14px -3px color-mix(in srgb, var(--shadow-color) 22%, transparent),
                 0 14px 28px -8px color-mix(in srgb, var(--primary) 34%, transparent);
  --elevation-device: 0 30px 70px -28px color-mix(in srgb, var(--shadow-color) 55%, transparent);

  /* Motion (M3 emphasized / standard) */
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --duration-short: 150ms;
  --duration-medium: 280ms;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Tone utility: a component sets --tone-bg / --tone-fg through one of these. */
.tone-primary { --tone-bg: var(--primary-container); --tone-fg: var(--on-primary-container); }
.tone-secondary,
.tone-sport { --tone-bg: var(--secondary-container); --tone-fg: var(--on-secondary-container); }
.tone-going { --tone-bg: var(--going-container); --tone-fg: var(--on-going-container); }
.tone-declined { --tone-bg: var(--declined-container); --tone-fg: var(--on-declined-container); }
.tone-pending { --tone-bg: var(--pending-container); --tone-fg: var(--on-pending-container); }
.tone-food { --tone-bg: var(--food-container); --tone-fg: var(--on-food-container); }
.tone-games { --tone-bg: var(--games-container); --tone-fg: var(--on-games-container); }
.tone-other { --tone-bg: var(--other-container); --tone-fg: var(--on-other-container); }