/**
 * Calimero's Hair Studio — Design Tokens
 * Source: docs/brand-guidelines.md → assets/design-tokens.json
 * Architecture: Primitive → Semantic → Component (ckm:design-system)
 */

/* === PRIMITIVES === */
:root {
  --color-navy-950: #0f1829;
  --color-navy-900: #1a2744;
  --color-navy-700: #2a3f6b;
  --color-gold-300: #e8d5a3;
  --color-gold-500: #c9a962;
  --color-gold-700: #a88b42;
  --color-cream-100: #faf7f2;
  --color-cream-200: #f0ebe3;
  --color-neutral-900: #1c1c1c;
  --color-neutral-600: #5c5c5c;
  --color-white: #ffffff;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-error: #dc2626;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-2xl: 1.5rem;
  --font-size-4xl: 2.25rem;
  --font-size-6xl: 3.25rem;

  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-full: 9999px;

  --shadow-sm: 0 2px 8px rgba(26, 39, 68, 0.08);
  --shadow-md: 0 8px 32px rgba(26, 39, 68, 0.12);
  --shadow-lg: 0 24px 64px rgba(26, 39, 68, 0.16);

  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --duration-slow: 700ms;
  --easing-default: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === SEMANTIC === */
:root {
  --color-background: var(--color-cream-100);
  --color-background-muted: var(--color-cream-200);
  --color-surface: var(--color-white);
  --color-foreground: var(--color-neutral-900);
  --color-foreground-muted: var(--color-neutral-600);
  --color-primary: var(--color-navy-900);
  --color-primary-hover: var(--color-navy-700);
  --color-primary-deep: var(--color-navy-950);
  --color-primary-foreground: var(--color-white);
  --color-accent: var(--color-gold-500);
  --color-accent-light: var(--color-gold-300);
  --color-accent-dark: var(--color-gold-700);
  --color-destructive: var(--color-error);
  --color-text-light: rgba(255, 255, 255, 0.88);

  --spacing-component: var(--space-6);
  --spacing-section: var(--space-24);

  --typography-font-heading: "Cormorant Garamond", Georgia, serif;
  --typography-font-body: "Outfit", system-ui, sans-serif;
  --typography-font-accent: "Pacifico", cursive;

  --slide-bg: var(--color-primary-deep);
  --slide-fg: var(--color-primary-foreground);
  --slide-accent: var(--color-accent);
}

/* === COMPONENT === */
:root {
  --button-bg: var(--color-primary);
  --button-fg: var(--color-primary-foreground);
  --button-hover-bg: var(--color-primary-hover);
  --button-accent-bg: var(--color-accent);
  --button-radius: var(--radius-sm);
  --button-min-height: 48px;

  --card-bg: var(--color-surface);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-sm);
  --card-padding: var(--space-6);

  --header-height: 80px;
  --header-bg-scrolled: rgba(250, 247, 242, 0.95);

  --transition-default: var(--duration-normal) var(--easing-default);
}

/* === LEGACY ALIASES (main.css compatibility) === */
:root {
  --navy: var(--color-primary);
  --navy-deep: var(--color-primary-deep);
  --navy-soft: var(--color-primary-hover);
  --cream: var(--color-background);
  --cream-dark: var(--color-background-muted);
  --gold: var(--color-accent);
  --gold-light: var(--color-accent-light);
  --gold-dark: var(--color-accent-dark);
  --white: var(--color-white);
  --text: var(--color-foreground);
  --text-muted: var(--color-foreground-muted);
  --text-light: var(--color-text-light);

  --font-display: var(--typography-font-heading);
  --font-body: var(--typography-font-body);
  --font-accent: var(--typography-font-accent);

  --space-xs: var(--space-2);
  --space-sm: var(--space-4);
  --space-md: var(--space-6);
  --space-lg: var(--space-10);
  --space-xl: var(--space-16);
  --space-2xl: var(--space-24);

  --transition: var(--transition-default);
  --header-h: var(--header-height);
}