/* MAIDJET — Material Design 3 Expressive tokens */
:root {
  color-scheme: dark;

  /* Brand seed — violet */
  --md-ref-palette-primary-10: #1a0b2e;
  --md-ref-palette-primary-20: #381e72;
  --md-ref-palette-primary-30: #4f378b;
  --md-ref-palette-primary-40: #6750a4;
  --md-ref-palette-primary-80: #d0bcff;
  --md-ref-palette-primary-90: #eaddff;
  --md-ref-palette-primary-95: #f6edff;

  --md-ref-palette-secondary-20: #332d41;
  --md-ref-palette-secondary-30: #4a4458;
  --md-ref-palette-secondary-80: #ccc2dc;
  --md-ref-palette-secondary-90: #e8def8;

  --md-ref-palette-tertiary-20: #492532;
  --md-ref-palette-tertiary-30: #633b48;
  --md-ref-palette-tertiary-80: #efb8c8;
  --md-ref-palette-tertiary-90: #ffd8e4;

  --md-ref-palette-neutral-4: #0f0d13;
  --md-ref-palette-neutral-6: #141218;
  --md-ref-palette-neutral-10: #1c1b1f;
  --md-ref-palette-neutral-12: #211f26;
  --md-ref-palette-neutral-17: #2b2930;
  --md-ref-palette-neutral-22: #36343b;
  --md-ref-palette-neutral-90: #e6e1e5;
  --md-ref-palette-neutral-95: #f5eff7;
  --md-ref-palette-neutral-99: #fffbfe;

  --md-ref-palette-neutral-variant-30: #49454f;
  --md-ref-palette-neutral-variant-50: #79747e;
  --md-ref-palette-neutral-variant-80: #cac4d0;

  --md-ref-palette-error-80: #f2b8b5;
  --md-ref-palette-error-40: #b3261e;

  /* Dark theme system colors */
  --md-sys-color-primary: var(--md-ref-palette-primary-80);
  --md-sys-color-on-primary: var(--md-ref-palette-primary-20);
  --md-sys-color-primary-container: var(--md-ref-palette-primary-30);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary-90);
  --md-sys-color-secondary: var(--md-ref-palette-secondary-80);
  --md-sys-color-on-secondary: var(--md-ref-palette-secondary-20);
  --md-sys-color-secondary-container: var(--md-ref-palette-secondary-30);
  --md-sys-color-on-secondary-container: var(--md-ref-palette-secondary-90);
  --md-sys-color-tertiary: var(--md-ref-palette-tertiary-80);
  --md-sys-color-on-tertiary: var(--md-ref-palette-tertiary-20);
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary-30);
  --md-sys-color-on-tertiary-container: var(--md-ref-palette-tertiary-90);
  --md-sys-color-error: var(--md-ref-palette-error-80);
  --md-sys-color-on-error: #601410;
  --md-sys-color-background: var(--md-ref-palette-neutral-6);
  --md-sys-color-on-background: var(--md-ref-palette-neutral-90);
  --md-sys-color-surface: var(--md-ref-palette-neutral-6);
  --md-sys-color-on-surface: var(--md-ref-palette-neutral-90);
  --md-sys-color-surface-variant: #49454f;
  --md-sys-color-on-surface-variant: var(--md-ref-palette-neutral-variant-80);
  --md-sys-color-surface-container-lowest: var(--md-ref-palette-neutral-4);
  --md-sys-color-surface-container-low: var(--md-ref-palette-neutral-10);
  --md-sys-color-surface-container: var(--md-ref-palette-neutral-12);
  --md-sys-color-surface-container-high: var(--md-ref-palette-neutral-17);
  --md-sys-color-surface-container-highest: var(--md-ref-palette-neutral-22);
  --md-sys-color-outline: var(--md-ref-palette-neutral-variant-50);
  --md-sys-color-outline-variant: var(--md-ref-palette-neutral-variant-30);
  --md-sys-color-inverse-surface: var(--md-ref-palette-neutral-90);
  --md-sys-color-inverse-on-surface: var(--md-ref-palette-neutral-20, #313033);
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary-40);
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Shapes — M3 Expressive */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;
  --md-sys-shape-corner-hero: 40px;
  --md-sys-shape-corner-card: 32px;

  /* Type — Roboto Flex + brand display */
  --md-ref-typeface-brand: "Google Sans Flex", "Roboto Flex", "Inter", system-ui, sans-serif;
  --md-ref-typeface-plain: "Roboto Flex", "Inter", system-ui, sans-serif;

  --md-sys-typescale-display-large-size: clamp(3.5rem, 8vw, 5.5rem);
  --md-sys-typescale-display-large-line: 1.05;
  --md-sys-typescale-display-large-weight: 600;
  --md-sys-typescale-display-large-tracking: -0.04em;

  --md-sys-typescale-display-medium-size: clamp(2.75rem, 6vw, 3.75rem);
  --md-sys-typescale-display-medium-line: 1.1;
  --md-sys-typescale-display-medium-weight: 600;

  --md-sys-typescale-headline-large-size: clamp(1.75rem, 3vw, 2.25rem);
  --md-sys-typescale-headline-large-weight: 500;
  --md-sys-typescale-headline-medium-size: 1.75rem;
  --md-sys-typescale-headline-small-size: 1.5rem;

  --md-sys-typescale-title-large-size: 1.375rem;
  --md-sys-typescale-title-medium-size: 1rem;
  --md-sys-typescale-title-small-size: 0.875rem;

  --md-sys-typescale-body-large-size: 1.0625rem;
  --md-sys-typescale-body-large-line: 1.6;
  --md-sys-typescale-body-medium-size: 0.9375rem;
  --md-sys-typescale-body-small-size: 0.8125rem;

  --md-sys-typescale-label-large-size: 0.875rem;
  --md-sys-typescale-label-medium-size: 0.75rem;
  --md-sys-typescale-label-small-size: 0.6875rem;

  /* Elevation */
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);

  /* Motion */
  --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-expressive: cubic-bezier(0.34, 1.56, 0.64, 1);
  --md-sys-motion-duration-short: 200ms;
  --md-sys-motion-duration-medium: 400ms;
  --md-sys-motion-duration-long: 700ms;

  /* Layout */
  --page-gutter: clamp(1.25rem, 4vw, 3.5rem);
  --page-max: 1280px;
  --nav-height: 72px;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--md-sys-color-primary) 55%, transparent);
}

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

  --md-sys-color-primary: var(--md-ref-palette-primary-40);
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: var(--md-ref-palette-primary-90);
  --md-sys-color-on-primary-container: var(--md-ref-palette-primary-10);
  --md-sys-color-secondary: #625b71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: var(--md-ref-palette-secondary-90);
  --md-sys-color-on-secondary-container: #1d192b;
  --md-sys-color-tertiary: #7d5260;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: var(--md-ref-palette-tertiary-90);
  --md-sys-color-on-tertiary-container: #31111d;
  --md-sys-color-background: var(--md-ref-palette-neutral-99);
  --md-sys-color-on-background: var(--md-ref-palette-neutral-10);
  --md-sys-color-surface: var(--md-ref-palette-neutral-99);
  --md-sys-color-on-surface: var(--md-ref-palette-neutral-10);
  --md-sys-color-surface-variant: #e7e0ec;
  --md-sys-color-on-surface-variant: #49454f;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f7f2fa;
  --md-sys-color-surface-container: #f3edf7;
  --md-sys-color-surface-container-high: #ece6f0;
  --md-sys-color-surface-container-highest: #e6e0e9;
  --md-sys-color-outline: #79747e;
  --md-sys-color-outline-variant: #cac4d0;
  --md-sys-color-inverse-surface: #313033;
  --md-sys-color-inverse-on-surface: #f4eff4;
  --md-sys-color-inverse-primary: var(--md-ref-palette-primary-80);
  --md-sys-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.08), 0 1px 3px 1px rgba(0, 0, 0, 0.06);
  --md-sys-elevation-2: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 6px 2px rgba(0, 0, 0, 0.08);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
}