/* AshAra Phase 3 design tokens - single source of truth.
 * Premium Indian fashion/editorial direction: warm ivory + charcoal, antique brass
 * accent, with wine / emerald / plum as selective editorial accents. Accessible
 * contrast; no neon, no cheap metallic gold, no glassmorphism. */

:root {
  /* --- Brand palette --- */
  --ash-ivory: #f7f3ec;        /* warm ivory (page) */
  --ash-cream: #efe8dc;        /* soft cream (raised) */
  --ash-charcoal: #23201c;     /* deep charcoal (text) */
  --ash-charcoal-2: #3a352f;
  --ash-brass: #9a7b3f;        /* antique brass (accent, AA on ivory) */
  --ash-brass-deep: #7c6231;
  --ash-wine: #6a1f2b;         /* wine (editorial accent) */
  --ash-emerald: #24513f;      /* emerald */
  --ash-plum: #46243f;         /* plum */

  /* --- Semantic surfaces & text --- */
  --color-bg: var(--ash-ivory);
  --color-surface: #fffdf8;
  --color-surface-raised: var(--ash-cream);
  --color-text: var(--ash-charcoal);
  --color-text-muted: #6b645b;      /* AA on ivory */
  --color-text-inverse: #f7f3ec;
  --color-border: #d9d0c1;
  --color-border-strong: #b9ad99;
  --color-accent: var(--ash-brass);
  --color-accent-contrast: #ffffff;
  --color-link: var(--ash-brass-deep);

  /* --- State colors (AA text on light) --- */
  --color-success: #1f6b4a;
  --color-success-bg: #e6f1eb;
  --color-warning: #8a5a12;
  --color-warning-bg: #f6ecd9;
  --color-error: #a32330;
  --color-error-bg: #f7e5e6;
  --color-info: #2a4d6e;
  --color-info-bg: #e4edf5;
  --color-disabled-opacity: 0.55;

  /* --- Focus ring (always visible, high contrast) --- */
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--ash-brass-deep);
  --focus-ring-color: var(--ash-brass-deep);

  /* --- Typography --- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --line-tight: 1.15;
  --line-snug: 1.3;
  --line-body: 1.6;
  --tracking-tight: -0.01em;
  --tracking-wide: 0.04em;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-xs: 0.78rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-xl: clamp(1.6rem, 1.3rem + 1.4vw, 2.4rem);
  --fs-2xl: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);

  /* --- Spacing scale (4px base) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Radius --- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* --- Borders & shadows --- */
  --border-width: 1px;
  --shadow-sm: 0 1px 2px rgba(35, 32, 28, 0.06);
  --shadow-md: 0 4px 14px rgba(35, 32, 28, 0.10);
  --shadow-lg: 0 12px 32px rgba(35, 32, 28, 0.16);

  /* --- Layout --- */
  --container-narrow: 42rem;
  --container: 72rem;
  --container-wide: 88rem;

  /* --- Motion (respects reduced-motion below) --- */
  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 360ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* --- Z-index --- */
  --z-header: 100;
  --z-drawer: 200;
  --z-dialog: 300;
  --z-toast: 400;

  /* --- Touch targets --- */
  --touch-min: 44px;

  /* --- Breakpoints (for JS/reference; CSS uses @media literals) --- */
  --bp-sm: 375px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
}

/* Optional dark preference - kept subtle and accessible (not a hard requirement). */
@media (prefers-color-scheme: dark) {
  :root[data-theme='auto'] {
    --color-bg: #1c1a17;
    --color-surface: #232019;
    --color-surface-raised: #2a2620;
    --color-text: #f2ece1;
    --color-text-muted: #b6ad9f;
    --color-border: #3a352d;
    --color-accent: #c8a869;
    --color-link: #c8a869;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
    --motion-slow: 0ms;
  }
}