/* ==========================================================================
   Meeow Design System v1.1 — tokens and base (ADR-0023)
   Soft UI Evolution × brand coral/teal (ui-ux-pro-max + frontend-design).
   Source of truth: docs/design/design-system-v1/tokens.json
   Loaded by app-v1.css into @layer ds. Every text pair here is WCAG AA;
   ratios are in the docs. Names: --ds-{group}-{role}.
   ========================================================================== */

:root {
  /* primitive — brand book palette, refined for premium contrast */
  --ds-navy-950: #0a1220;
  --ds-navy-900: #132238;
  --ds-navy-800: #1a2d48;
  --ds-navy-700: #1a2740;
  --ds-navy-600: #455066;
  --ds-navy-500: #5c6578;
  --ds-coral-50: #fff5f2;
  --ds-coral-100: #ffe6df;
  --ds-coral-300: #ff8f82;
  --ds-coral-500: #ff6b5e;
  --ds-coral-600: #d2402f;
  --ds-coral-700: #b93424;
  --ds-coral-800: #a83428;
  --ds-teal-50: #eefbf8;
  --ds-teal-100: #d5f4ee;
  --ds-teal-300: #5fd9c8;
  --ds-teal-500: #1bbfad;
  --ds-teal-600: #149987;
  --ds-teal-700: #0a7166;
  --ds-sky-100: #e4f1fb;
  --ds-sky-400: #5bb4e4;
  --ds-sky-500: #2f9fdc;
  --ds-sky-600: #2a6ba8;
  --ds-sky-700: #1d5a92;
  --ds-amber-100: #fff0c2;
  --ds-amber-400: #ffc23d;
  --ds-amber-600: #b06f00;
  --ds-amber-700: #855600;
  --ds-red-50: #fff1f0;
  --ds-red-500: #d63a4a;
  --ds-red-700: #b42318;
  --ds-cream-50: #f7f5f2;
  --ds-cream-100: #f0ebe4;
  --ds-cream-200: #e8e3dc;
  --ds-cream-300: #ddd6cc;
  --ds-violet-600: #6d4fa8;

  /* semantic — light: warm stone + cool mist (dual-temperature Soft UI) */
  --ds-bg: #f5f3ef;
  --ds-bg-tint: radial-gradient(980px 540px at 92% -6%, rgba(255, 107, 94, .10), transparent 58%), radial-gradient(860px 480px at -4% 0%, rgba(27, 191, 173, .09), transparent 55%);
  --ds-surface-1: #ffffff;
  --ds-surface-2: #eef1f6;
  --ds-surface-3: #e2e7f0;
  --ds-surface-glass: rgba(255, 255, 255, .86);

  /* joy tints — muted, cohesive; never compete with ink */
  --ds-joy-sun: #fff3d0;
  --ds-joy-mint: #d4f2eb;
  --ds-joy-sky: #dcecf8;
  --ds-joy-peach: #ffe3d9;
  --ds-joy-lilac: #e7e2f6;
  --ds-joy-pink: #fce4ee;
  --ds-joy-grad: linear-gradient(118deg, #fff6df 0%, #ffe8df 48%, #d9f3ec 100%);
  --ds-joy-stage: linear-gradient(180deg, #fff2d4 0%, #ffe4d6 58%, #ffd4c4 100%);
  --ds-ink-1: var(--ds-navy-700);
  --ds-ink-2: var(--ds-navy-600);
  --ds-ink-3: var(--ds-navy-500);
  --ds-ink-inverse: #ffffff;
  --ds-line: rgba(26, 39, 64, .10);
  --ds-line-2: rgba(26, 39, 64, .16);
  --ds-action: var(--ds-coral-600);
  --ds-action-hover: var(--ds-coral-700);
  --ds-action-soft: var(--ds-coral-100);
  --ds-action-ink: var(--ds-coral-800);
  --ds-on-action: #ffffff;
  --ds-secondary: var(--ds-navy-900);
  --ds-secondary-hover: var(--ds-navy-800);
  --ds-on-secondary: #ffffff;
  --ds-success: var(--ds-teal-700);
  --ds-success-soft: var(--ds-teal-100);
  --ds-success-mark: var(--ds-teal-600);
  --ds-warning: var(--ds-amber-700);
  --ds-warning-soft: var(--ds-amber-100);
  --ds-warning-mark: var(--ds-amber-600);
  --ds-danger: var(--ds-red-700);
  --ds-danger-soft: var(--ds-red-50);
  --ds-danger-solid: var(--ds-red-700);
  --ds-info: var(--ds-sky-700);
  --ds-info-soft: var(--ds-sky-100);
  --ds-pet: var(--ds-coral-800);
  --ds-pet-soft: var(--ds-coral-100);
  --ds-ai: #0a5f72;
  --ds-ai-soft: #e6f6f7;
  --ds-ai-line: rgba(10, 95, 114, .18);
  --ds-ai-grad: linear-gradient(135deg, var(--ds-teal-500) 0%, var(--ds-sky-500) 100%);
  --ds-ai-grad-soft: linear-gradient(135deg, rgba(27, 191, 173, .12) 0%, rgba(47, 159, 220, .12) 100%);
  --ds-ai-glow: 0 0 0 1px rgba(27, 191, 173, .22), 0 10px 28px -12px rgba(27, 160, 190, .42);
  --ds-focus: var(--ds-teal-700);
  --ds-focus-ring: 0 0 0 3px rgba(10, 113, 102, .26);
  --ds-scrim: rgba(10, 18, 32, .44);

  /* type */
  --ds-font-sans: "Vazirmatn", Tahoma, Arial, sans-serif;
  --ds-font-display: "Estedad", "Vazirmatn", Tahoma, Arial, sans-serif;
  --ds-text-xs: 13px;
  --ds-text-sm: 14px;
  --ds-text-md: 16px;
  --ds-text-lg: 18px;
  --ds-text-xl: 22px;
  --ds-text-2xl: clamp(24px, 3.2vw, 28px);
  --ds-text-3xl: clamp(28px, 4.4vw, 36px);
  --ds-text-4xl: clamp(32px, 5.6vw, 46px);
  --ds-leading-body: 1.75;
  --ds-leading-tight: 1.3;
  --ds-weight-regular: 400;
  --ds-weight-medium: 550;
  --ds-weight-bold: 700;
  --ds-weight-display: 750;

  /* space — 4px grid */
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;

  /* radius — Soft UI Evolution: controls ~10–14, cards ~18–22 */
  --ds-radius-xs: 8px;
  --ds-radius-sm: 10px;
  --ds-radius-md: 14px;
  --ds-radius-lg: 18px;
  --ds-radius-xl: 22px;
  --ds-radius-2xl: 28px;
  --ds-radius-pill: 999px;

  /* elevation — clearer hierarchy, navy-tinted, less floaty */
  --ds-elev-0: 0 0 0 1px var(--ds-line);
  --ds-elev-1: 0 1px 2px rgba(26, 39, 64, .04), 0 4px 12px -4px rgba(26, 39, 64, .08);
  --ds-elev-2: 0 2px 4px rgba(26, 39, 64, .04), 0 12px 28px -10px rgba(26, 39, 64, .16);
  --ds-elev-3: 0 4px 8px rgba(26, 39, 64, .05), 0 20px 40px -16px rgba(26, 39, 64, .22);
  --ds-elev-4: 0 24px 64px -20px rgba(19, 34, 56, .36);

  /* motion — 150–300ms Soft UI Evolution */
  --ds-dur-1: 140ms;
  --ds-dur-2: 200ms;
  --ds-dur-3: 260ms;
  --ds-dur-4: 360ms;
  --ds-ease-out: cubic-bezier(.22, 1, .36, 1);
  --ds-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ds-spring: cubic-bezier(.34, 1.4, .64, 1);

  /* layers */
  --ds-z-nav: 50;
  --ds-z-header: 60;
  --ds-z-sheet: 80;
  --ds-z-ask: 90;
  --ds-z-toast: 95;

  /* chart hues (≥ 3:1 on surface-1) */
  --ds-chart-1: #0f7f73;
  --ds-chart-2: #2a6ba8;
  --ds-chart-3: #b06f00;
  --ds-chart-4: var(--ds-violet-600);

  color-scheme: light;
}

/* semantic — dark */
:root[data-theme="dark"] {
  --ds-bg: #0b1422;
  --ds-bg-tint: radial-gradient(1100px 560px at 88% -8%, rgba(27, 191, 173, .11), transparent 58%), radial-gradient(820px 480px at 0% 0%, rgba(255, 107, 94, .08), transparent 52%);
  --ds-surface-1: #15233a;
  --ds-surface-2: #1b2c46;
  --ds-surface-3: #243552;
  --ds-surface-glass: rgba(18, 30, 48, .80);
  --ds-ink-1: #eef2f8;
  --ds-ink-2: #c0c9d8;
  --ds-ink-3: #94a0b5;
  --ds-ink-inverse: #0b1422;
  --ds-line: rgba(226, 234, 246, .10);
  --ds-line-2: rgba(226, 234, 246, .18);
  --ds-action-hover: #e2513f;
  --ds-action-soft: rgba(255, 107, 94, .16);
  --ds-action-ink: #ffa196;
  --ds-secondary: #e8eef8;
  --ds-secondary-hover: #ffffff;
  --ds-on-secondary: #0b1422;
  --ds-success: #6fe3d1;
  --ds-success-soft: rgba(27, 191, 173, .15);
  --ds-success-mark: #3fd3bf;
  --ds-warning: #ffd27a;
  --ds-warning-soft: rgba(255, 194, 61, .15);
  --ds-warning-mark: #f0b53a;
  --ds-danger: #ff8f86;
  --ds-danger-soft: rgba(255, 99, 88, .15);
  --ds-danger-solid: #c42e22;
  --ds-info: #93cbff;
  --ds-info-soft: rgba(91, 180, 228, .15);
  --ds-pet: #ffab9f;
  --ds-pet-soft: rgba(255, 107, 94, .15);
  --ds-ai: #86e6e4;
  --ds-ai-soft: rgba(27, 191, 173, .12);
  --ds-ai-line: rgba(134, 230, 228, .24);
  --ds-ai-grad-soft: linear-gradient(135deg, rgba(27, 191, 173, .18) 0%, rgba(47, 159, 220, .16) 100%);
  --ds-ai-glow: 0 0 0 1px rgba(134, 230, 228, .22), 0 12px 32px -14px rgba(27, 191, 173, .5);
  --ds-focus: #6fe3d1;
  --ds-focus-ring: 0 0 0 3px rgba(111, 227, 209, .32);
  --ds-scrim: rgba(3, 8, 16, .64);
  --ds-elev-0: 0 0 0 1px var(--ds-line);
  --ds-elev-1: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .28), 0 4px 12px -4px rgba(0, 0, 0, .36);
  --ds-elev-2: inset 0 1px 0 rgba(255, 255, 255, .05), 0 2px 4px rgba(0, 0, 0, .28), 0 14px 32px -14px rgba(0, 0, 0, .55);
  --ds-elev-3: inset 0 1px 0 rgba(255, 255, 255, .05), 0 4px 8px rgba(0, 0, 0, .28), 0 22px 44px -18px rgba(0, 0, 0, .65);
  --ds-elev-4: 0 28px 72px -24px rgba(0, 0, 0, .78);
  --ds-joy-sun: rgba(255, 194, 61, .15);
  --ds-joy-mint: rgba(27, 191, 173, .15);
  --ds-joy-sky: rgba(91, 180, 228, .16);
  --ds-joy-peach: rgba(255, 128, 110, .16);
  --ds-joy-lilac: rgba(180, 155, 240, .16);
  --ds-joy-pink: rgba(255, 128, 176, .15);
  --ds-chart-1: #3fd3bf;
  --ds-chart-2: #7ab8f5;
  --ds-chart-3: #f0b53a;
  --ds-chart-4: #b49bf0;
  color-scheme: dark;
}

/* base */
:focus-visible {
  outline: 2px solid var(--ds-focus);
  outline-offset: 2px;
}

::selection {
  background: rgba(27, 191, 173, .28);
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-1: .01ms;
    --ds-dur-2: .01ms;
    --ds-dur-3: .01ms;
    --ds-dur-4: .01ms;
  }
}