/* ==========================================================================
   Resin Art Memories × Vistāra Krafts Studio
   Design Token System — Section 2 Compliant (tokens.css)
   4px Spacing Grid • WCAG 2.2 AA/AAA • Fluid Motion & Typographic Scale
   ========================================================================== */

:root {
  /* Colors — 60/30/10 High-RT Galleried Palette */
  --color-bg: #faf8f5;
  --color-surface: #faf8f5;
  --color-surface-2: #f4f2ed;
  --color-surface-container: #efece6;
  --color-surface-high: #e8e4dc;
  --color-border: #e4e0d8;

  --color-text-primary: #031a38;
  --color-text-secondary: #484f5c;
  --color-text-muted: #59606d;

  --color-accent: #9e3322;
  --color-accent-hover: #b83d2a;
  --color-accent-contrast: #ffffff;
  --color-secondary-gold: #775928;
  --color-secondary-brass: #b08d57;

  --color-success: #266b4e;
  --color-warning: #704600;
  --color-error: #ba1a1a;
  --color-info: #031a38;

  /* Typography Scales */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  --text-xs: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);       /* 11px - 12px */
  --text-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);      /* 13px - 14px */
  --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);   /* 15px - 17px */
  --text-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);         /* 17px - 20px */
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);          /* 20px - 24px */
  --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);       /* 24px - 30px */
  --text-3xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);        /* 28px - 36px */
  --text-4xl: clamp(2rem, 1.7rem + 1.75vw, 3rem);              /* 32px - 48px */

  /* 4px Rhythm Grid (R2.4) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;

  /* Radii per Context (Soft Luxury Lifestyle: 8-16px, Generous 20-32px) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Elevation Shadows */
  --shadow-sm: 0 1px 2px rgba(3, 26, 56, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(3, 26, 56, 0.06), 0 2px 4px -2px rgba(3, 26, 56, 0.04);
  --shadow-lg: 0 12px 24px -4px rgba(27, 47, 78, 0.09), 0 4px 6px -2px rgba(176, 141, 87, 0.05);
  --shadow-xl: 0 24px 48px -12px rgba(3, 26, 56, 0.22);

  /* Easing */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);

  /* Duration */
  --duration-instant: 100ms;
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* Blur */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 24px;
}

/* Dark Mode (R2.3 & T-410) */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0d141e;
    --color-surface: #101926;
    --color-surface-2: #162233;
    --color-surface-container: #1b293d;
    --color-surface-high: #24354c;
    --color-border: #2c3e56;

    --color-text-primary: #f5f4f0;
    --color-text-secondary: #c2c9d6;
    --color-text-muted: #8b96a8;

    --color-accent: #e05b45;
    --color-accent-hover: #ff7057;
    --color-accent-contrast: #0d141e;
    --color-secondary-gold: #ffd79b;
    --color-secondary-brass: #d4b47c;

    --color-success: #4ade80;
    --color-warning: #fbbf24;
    --color-error: #f87171;
    --color-info: #93c5fd;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 12px 24px -4px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.7);
  }
}