/* ══════════════════════════════════════════════════════════
   Design Token System — AI Skin Engine API Contract
   All ~80 CSS custom properties that AI can control.
   ══════════════════════════════════════════════════════════ */

/* ── Color System (14 tokens) ── */
:root {
  --color-primary:        #2563eb;
  --color-primary-hover:  #1d4ed8;
  --color-primary-light:  #dbeafe;
  --color-secondary:      #7c3aed;
  --color-accent:         #f59e0b;
  --color-bg-primary:     #ffffff;
  --color-bg-secondary:   #f8fafc;
  --color-text-primary:   #0f172a;
  --color-text-secondary: #64748b;
  --color-border:         #e2e8f0;
  --color-success:        #10b981;
  --color-warning:        #f59e0b;
  --color-error:          #ef4444;
  --color-info:           #3b82f6;

  /* ── Spacing Scale (8 tokens) ── */
  --spacing-xs:   0.25rem;
  --spacing-sm:   0.5rem;
  --spacing-md:   1rem;
  --spacing-lg:   1.5rem;
  --spacing-xl:   2rem;
  --spacing-2xl:  3rem;
  --spacing-3xl:  4rem;
  --spacing-4xl:  6rem;

  /* ── Typography (14 tokens) ── */
  --font-family-base:    'Inter', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Inter', system-ui, -apple-system, sans-serif;
  --font-size-xs:         0.75rem;
  --font-size-sm:         0.875rem;
  --font-size-base:       1rem;
  --font-size-lg:         1.125rem;
  --font-size-xl:         1.25rem;
  --font-size-2xl:        1.5rem;
  --font-size-3xl:        2rem;
  --font-size-4xl:        2.5rem;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-bold:     700;
  --line-height-tight:    1.25;
  --line-height-base:     1.5;
  --line-height-relaxed:  1.75;

  /* ── Border Radius (6 tokens) ── */
  --radius-none:   0;
  --radius-sm:     0.25rem;
  --radius-base:   0.375rem;
  --radius-lg:     0.5rem;
  --radius-xl:     1rem;
  --radius-full:   9999px;

  /* ── Shadows (4 tokens) ── */
  --shadow-sm:   0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1);
  --shadow-lg:   0 10px 15px -3px rgb(0 0 0 / 0.1);
  --shadow-xl:   0 20px 25px -5px rgb(0 0 0 / 0.1);

  /* ── Transitions & Animation (4 tokens) ── */
  --transition-fast:    150ms ease;
  --transition-base:    300ms ease;
  --transition-slow:    500ms ease;
  --animation-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── Borders (2 tokens) ── */
  --border-width: 1px;
  --border-style: solid;

  /* ── Header & Footer (6 tokens) ── */
  --header-bg:       var(--color-bg-primary);
  --header-text:     var(--color-text-primary);
  --header-height:   4rem;
  --footer-bg:       var(--color-primary);
  --footer-text:     var(--color-bg-primary);

  /* ── Layout (6 tokens) ── */
  --container-max-width: 1280px;
  --sidebar-width: 280px;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-fixed:     300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── RGB variants for opacity compositing ── */
  --color-primary-rgb:    37, 99, 235;
  --color-secondary-rgb:  124, 58, 237;
  --color-accent-rgb:     245, 158, 11;
  --color-success-rgb:    10, 185, 129;
  --color-warning-rgb:    245, 158, 11;
  --color-error-rgb:      239, 68, 68;
}