/* ==========================================================================
   PONKOIN — Design Tokens
   Material Design 3 (Material You) token system, tuned to the Ponkoin brand
   Source palette derived from the Ponkoin mark:
     Green  #2E9E3E / #6ED06B   (frog)
     Amber  #F5A315            (sticker ground)
     Red    #E0342B            (exclamation marks)
     Cream  #FBF3DF            (sticker border / lip band)
   ========================================================================== */

:root {
  /* ---------- Brand seeds ---------- */
  --ponk-green: #2e9e3e;
  --ponk-green-light: #6ed06b;
  --ponk-amber: #f5a315;
  --ponk-red: #e0342b;
  --ponk-cream: #fbf3df;
  --ponk-ink: #0d0f0a;

  /* ---------- Shape scale (M3) ---------- */
  --md-shape-none: 0;
  --md-shape-xs: 4px;
  --md-shape-sm: 8px;
  --md-shape-md: 12px;
  --md-shape-lg: 16px;
  --md-shape-xl: 28px;
  --md-shape-2xl: 40px;
  --md-shape-full: 999px;

  /* ---------- Type scale (M3) ---------- */
  --md-font-brand: "Bricolage Grotesque", "Roboto", system-ui, sans-serif;
  --md-font-plain: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --md-font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", monospace;

  --type-display-lg: 700 clamp(3rem, 8vw, 4.75rem) / 1.06 var(--md-font-brand);
  --type-display-md: 700 clamp(2.5rem, 6vw, 3.75rem) / 1.1 var(--md-font-brand);
  --type-display-sm: 700 clamp(2rem, 4.6vw, 3rem) / 1.14 var(--md-font-brand);
  --type-headline-lg: 700 clamp(1.75rem, 3.4vw, 2.4rem) / 1.2 var(--md-font-brand);
  --type-headline-md: 700 clamp(1.5rem, 2.6vw, 1.9rem) / 1.25 var(--md-font-brand);
  --type-headline-sm: 600 clamp(1.3rem, 2vw, 1.55rem) / 1.3 var(--md-font-brand);
  --type-title-lg: 600 1.375rem/1.5 var(--md-font-plain);
  --type-title-md: 600 1rem/1.5 var(--md-font-plain);
  --type-title-sm: 600 0.875rem/1.43 var(--md-font-plain);
  --type-body-lg: 400 1.0625rem/1.65 var(--md-font-plain);
  --type-body-md: 400 0.9375rem/1.6 var(--md-font-plain);
  --type-body-sm: 400 0.8125rem/1.5 var(--md-font-plain);
  --type-label-lg: 600 0.875rem/1.43 var(--md-font-plain);
  --type-label-md: 600 0.75rem/1.33 var(--md-font-plain);
  --type-label-sm: 600 0.6875rem/1.45 var(--md-font-plain);

  /* ---------- Motion (M3 expressive) ---------- */
  --md-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-dur-short: 150ms;
  --md-dur-medium: 300ms;
  --md-dur-long: 500ms;
  --md-dur-xlong: 800ms;

  /* ---------- State layer opacities (M3) ---------- */
  --md-state-hover: 0.08;
  --md-state-focus: 0.10;
  --md-state-pressed: 0.10;

  /* ---------- Layout ---------- */
  --page-max: 1200px;
  --page-gutter: clamp(1rem, 4vw, 2.5rem);
  --appbar-h: 68px;
  --section-y: clamp(3.25rem, 7vw, 6rem);
}

/* ==========================================================================
   LIGHT THEME (default)
   Bare :root carries the light palette, so a page with no data-theme
   attribute renders light. The dark block below must stay last: both
   selectors have equal specificity, so source order decides the winner.
   ========================================================================== */
:root,
[data-theme="light"] {
  /* "only light" also opts out of Chrome Android's forced auto-dark */
  color-scheme: only light;

  --md-primary: #16702e;
  --md-on-primary: #ffffff;
  --md-primary-container: #b6f8b6;
  --md-on-primary-container: #00210a;

  --md-secondary: #7a4f00;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #ffdeb4;
  --md-on-secondary-container: #281800;

  --md-tertiary: #a4231c;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffdad5;
  --md-on-tertiary-container: #410001;

  --md-error: #ba1a1a;
  --md-on-error: #ffffff;

  --md-surface: #fcfaef;
  --md-on-surface: #1a1c14;
  --md-on-surface-variant: #434b3d;
  --md-surface-dim: #dcdbcf;
  --md-surface-bright: #fcfaef;

  --md-surface-container-lowest: #ffffff;
  --md-surface-container-low: #f6f4e9;
  --md-surface-container: #f0efe3;
  --md-surface-container-high: #eae9de;
  --md-surface-container-highest: #e5e3d8;

  --md-outline: #73796c;
  --md-outline-variant: #c3c8ba;

  --md-inverse-surface: #2f3128;
  --md-inverse-on-surface: #f1f1e5;
  --md-inverse-primary: #7ee085;

  --md-scrim: #000000;
  --md-shadow: #000000;

  /* Brand-specific derived tokens */
  --ponk-glow-a: rgba(22, 112, 46, 0.16);
  --ponk-glow-b: rgba(245, 163, 21, 0.22);
  --ponk-hairline: rgba(26, 28, 20, 0.1);
  --ponk-glass: rgba(252, 250, 239, 0.78);
  --ponk-grid: rgba(26, 28, 20, 0.05);
  --ponk-hero-ground: radial-gradient(120% 90% at 78% 6%, #ffe9bd 0%, #fdf3dd 46%, #fcfaef 78%);

  /* Display gradient — deepened so it clears large-text contrast on cream */
  --ponk-grad-a: #1c7a2d;
  --ponk-grad-b: #b87404;
  --ponk-grad-c: #bc2a21;

  --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px 1px rgba(0, 0, 0, 0.07);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.07);
  --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.09), 0 1px 3px rgba(0, 0, 0, 0.1);
  --md-elev-4: 0 6px 10px 4px rgba(0, 0, 0, 0.09), 0 2px 3px rgba(0, 0, 0, 0.1);
  --md-elev-5: 0 8px 12px 6px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   DARK THEME (opt-in — must remain the last theme block)
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --md-primary: #7ee085;
  --md-on-primary: #003910;
  --md-primary-container: #0e6a2a;
  --md-on-primary-container: #b6f8b6;

  --md-secondary: #ffc06a;
  --md-on-secondary: #452b00;
  --md-secondary-container: #7a4f00;
  --md-on-secondary-container: #ffdeb4;

  --md-tertiary: #ffb4a8;
  --md-on-tertiary: #690004;
  --md-tertiary-container: #a4231c;
  --md-on-tertiary-container: #ffdad5;

  --md-error: #ffb4ab;
  --md-on-error: #690005;

  --md-surface: #101208;
  --md-on-surface: #e6e5da;
  --md-on-surface-variant: #b4c0ac;
  --md-surface-dim: #0b0d05;
  --md-surface-bright: #33362b;

  --md-surface-container-lowest: #070903;
  --md-surface-container-low: #191c11;
  --md-surface-container: #1d2015;
  --md-surface-container-high: #282b1f;
  --md-surface-container-highest: #333629;

  --md-outline: #8c9a86;
  --md-outline-variant: #424b3d;

  --md-inverse-surface: #e6e5da;
  --md-inverse-on-surface: #2f3128;
  --md-inverse-primary: #16702e;

  --md-scrim: #000000;
  --md-shadow: #000000;

  --ponk-glow-a: rgba(126, 224, 133, 0.28);
  --ponk-glow-b: rgba(245, 163, 21, 0.24);
  --ponk-hairline: rgba(230, 229, 218, 0.09);
  --ponk-glass: rgba(29, 32, 21, 0.72);
  --ponk-grid: rgba(180, 192, 172, 0.055);
  --ponk-hero-ground: radial-gradient(120% 90% at 78% 6%, #3a2a05 0%, #1b1a09 46%, #101208 78%);

  --ponk-grad-a: #9cf5a0;
  --ponk-grad-b: #ffc24a;
  --ponk-grad-c: #ff9e8f;

  --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
  --md-elev-3: 0 4px 8px 3px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.5);
  --md-elev-4: 0 6px 10px 4px rgba(0, 0, 0, 0.32), 0 2px 3px rgba(0, 0, 0, 0.5);
  --md-elev-5: 0 8px 12px 6px rgba(0, 0, 0, 0.34), 0 4px 4px rgba(0, 0, 0, 0.5);
}