/* ==========================================================================
   Meridian design tokens — generated from DESIGN.md (single source of truth)
   Re-theme a project by editing ONLY this file (+ the Google Fonts <link>).
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Fonts ---------------------------------------------------------- */
  --dm-font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --dm-font-sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --dm-font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", monospace;

  /* ---- Colors: brand --------------------------------------------------- */
  --dm-color-primary: #0e7c66;
  --dm-color-on-primary: #ffffff;
  --dm-color-primary-hover: #0a5f4e;
  --dm-color-primary-subtle: #e3f2ee;
  --dm-color-on-primary-subtle: #0a5f4e;

  /* ---- Colors: neutrals ------------------------------------------------ */
  --dm-color-background: #fafaf7;
  --dm-color-on-background: #1c1e21;
  --dm-color-surface: #ffffff;
  --dm-color-on-surface: #1c1e21;
  --dm-color-surface-variant: #f1f0eb;
  --dm-color-on-surface-variant: #5b6168;
  --dm-color-outline: #d8d6ce;
  --dm-color-outline-variant: #e8e6e0;
  --dm-color-inverse-surface: #24262b;
  --dm-color-inverse-on-surface: #f4f4f1;

  /* ---- Colors: semantic ------------------------------------------------ */
  --dm-color-success: #15803d;
  --dm-color-on-success: #ffffff;
  --dm-color-success-subtle: #e5f3ea;
  --dm-color-warning: #b45309;
  --dm-color-on-warning: #ffffff;
  --dm-color-warning-subtle: #fcf0e0;
  --dm-color-error: #b91c1c;
  --dm-color-on-error: #ffffff;
  --dm-color-error-subtle: #fbe9e9;
  --dm-color-info: #1d4ed8;
  --dm-color-on-info: #ffffff;
  --dm-color-info-subtle: #e7edfc;

  /* ---- Focus ----------------------------------------------------------- */
  --dm-color-focus-ring: #0e7c66;

  /* ---- Typography scale ------------------------------------------------ */
  --dm-type-display-xl: 700 4rem/1.05 var(--dm-font-display);
  --dm-type-display-lg: 700 3rem/1.1 var(--dm-font-display);
  --dm-type-h1: 700 2.25rem/1.15 var(--dm-font-display);
  --dm-type-h2: 600 1.75rem/1.2 var(--dm-font-display);
  --dm-type-h3: 600 1.375rem/1.3 var(--dm-font-display);
  --dm-type-h4: 600 1.125rem/1.4 var(--dm-font-sans);
  --dm-type-body-lg: 400 1.125rem/1.6 var(--dm-font-sans);
  --dm-type-body-md: 400 1rem/1.55 var(--dm-font-sans);
  --dm-type-body-sm: 400 0.875rem/1.5 var(--dm-font-sans);
  --dm-type-label-md: 600 0.875rem/1.2 var(--dm-font-sans);
  --dm-type-label-sm: 600 0.75rem/1.2 var(--dm-font-sans);
  --dm-type-mono: 400 0.875rem/1.6 var(--dm-font-mono);

  --dm-tracking-display: -0.02em;
  --dm-tracking-heading: -0.01em;
  --dm-tracking-label: 0.01em;
  --dm-tracking-label-sm: 0.04em;

  /* ---- Spacing (8px grid) ---------------------------------------------- */
  --dm-space-xs: 4px;
  --dm-space-sm: 8px;
  --dm-space-md: 16px;
  --dm-space-lg: 24px;
  --dm-space-xl: 32px;
  --dm-space-2xl: 48px;
  --dm-space-3xl: 64px;
  --dm-space-4xl: 96px;

  /* ---- Rounded ---------------------------------------------------------- */
  --dm-rounded-xs: 4px;
  --dm-rounded-sm: 6px;
  --dm-rounded-md: 10px;
  --dm-rounded-lg: 16px;
  --dm-rounded-xl: 24px;
  --dm-rounded-full: 9999px;

  /* ---- Elevation -------------------------------------------------------- */
  --dm-shadow-sm: 0 1px 2px rgba(28, 30, 33, 0.05), 0 1px 4px rgba(28, 30, 33, 0.04);
  --dm-shadow-md: 0 2px 6px rgba(28, 30, 33, 0.06), 0 8px 24px rgba(28, 30, 33, 0.08);
  --dm-shadow-lg: 0 4px 12px rgba(28, 30, 33, 0.08), 0 20px 48px rgba(28, 30, 33, 0.16);

  /* ---- Motion ------------------------------------------------------------ */
  --dm-duration-fast: 120ms;
  --dm-duration-base: 200ms;
  --dm-duration-slow: 320ms;
  --dm-duration-slower: 500ms;
  --dm-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --dm-ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1);
  --dm-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Misc -------------------------------------------------------------- */
  --dm-backdrop: rgba(20, 22, 26, 0.45);
  --dm-control-height: 44px;
  --dm-input-height: 48px;
}

/* ==========================================================================
   Dark theme — applied via <html data-theme="dark">
   ========================================================================== */

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

  --dm-color-primary: #3ecfac;
  --dm-color-on-primary: #06281f;
  --dm-color-primary-hover: #5fddbf;
  --dm-color-primary-subtle: #123b31;
  --dm-color-on-primary-subtle: #8fe8d2;

  --dm-color-background: #15171b;
  --dm-color-on-background: #ecedea;
  --dm-color-surface: #1d2025;
  --dm-color-on-surface: #ecedea;
  --dm-color-surface-variant: #262a30;
  --dm-color-on-surface-variant: #a0a6ad;
  --dm-color-outline: #3a3f46;
  --dm-color-outline-variant: #2c3037;
  --dm-color-inverse-surface: #ecedea;
  --dm-color-inverse-on-surface: #24262b;

  --dm-color-success: #4ade80;
  --dm-color-on-success: #052e16;
  --dm-color-success-subtle: #10311d;
  --dm-color-warning: #fbbf24;
  --dm-color-on-warning: #341d03;
  --dm-color-warning-subtle: #3a2a0e;
  --dm-color-error: #f87171;
  --dm-color-on-error: #3b0a0a;
  --dm-color-error-subtle: #3d1414;
  --dm-color-info: #7ba4f9;
  --dm-color-on-info: #0b1b45;
  --dm-color-info-subtle: #16234a;

  --dm-color-focus-ring: #3ecfac;

  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.25);
  --dm-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35);
  --dm-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4), 0 20px 48px rgba(0, 0, 0, 0.5);

  --dm-backdrop: rgba(0, 0, 0, 0.6);
}