/* ============================================================
   DESIGN TOKENS — Nikola Baskarad Brand
   Version: 1.0.0
   Architecture: Primitive → Semantic → Component
   Style: Modern Dark Cinema (faith/creator adapted)
   ============================================================ */

:root {
  /* ─── PRIMITIVE LAYER ─── Raw values ─── */

  /* Neutral Scale (dark-first) */
  --p-neutral-0: #000000;
  --p-neutral-50: #050506;
  --p-neutral-100: #0a0a0c;
  --p-neutral-200: #111114;
  --p-neutral-300: #161619;
  --p-neutral-400: #1c1c20;
  --p-neutral-500: #6b6b74;
  --p-neutral-600: #a0a0a8;
  --p-neutral-700: #c8c8ce;
  --p-neutral-800: #ededef;
  --p-neutral-900: #f5f5f6;
  --p-neutral-1000: #ffffff;

  /* Teal (Primary brand color) */
  --p-teal-200: #0f7d5e;
  --p-teal-300: #1a9e7a;
  --p-teal-400: #24b88e;
  --p-teal-500: #2dd4a8;
  --p-teal-600: #5ee0be;
  --p-teal-700: #a0ecd8;

  /* Gold (Secondary/warm accent) */
  --p-gold-200: #8a6428;
  --p-gold-300: #a87a34;
  --p-gold-400: #bf8d40;
  --p-gold-500: #d4a054;
  --p-gold-600: #e0b87a;
  --p-gold-700: #edd0a4;

  /* Violet (Tertiary accent) */
  --p-violet-400: #6e4ccc;
  --p-violet-500: #8a64ff;
  --p-violet-600: #a88aff;

  /* Status */
  --p-red-500: #ef4444;
  --p-red-600: #dc2626;
  --p-green-500: #22c55e;

  /* Spacing (4px base) */
  --p-space-0: 0;
  --p-space-1: 0.25rem;
  --p-space-2: 0.5rem;
  --p-space-3: 0.75rem;
  --p-space-4: 1rem;
  --p-space-5: 1.25rem;
  --p-space-6: 1.5rem;
  --p-space-8: 2rem;
  --p-space-10: 2.5rem;
  --p-space-12: 3rem;
  --p-space-16: 4rem;
  --p-space-20: 5rem;
  --p-space-24: 6rem;

  /* Typography */
  --p-font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --p-font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --p-font-size-xs: 0.72rem;
  --p-font-size-sm: 0.82rem;
  --p-font-size-base: 0.95rem;
  --p-font-size-md: 1.05rem;
  --p-font-size-lg: 1.25rem;
  --p-font-size-xl: 1.5rem;
  --p-font-size-2xl: 2rem;
  --p-font-size-3xl: 2.6rem;
  --p-font-size-4xl: 3.2rem;
  --p-line-height-tight: 1.1;
  --p-line-height-snug: 1.35;
  --p-line-height-normal: 1.7;
  --p-line-height-relaxed: 1.85;

  /* Radius */
  --p-radius-sm: 8px;
  --p-radius-md: 14px;
  --p-radius-lg: 20px;
  --p-radius-xl: 28px;
  --p-radius-full: 9999px;

  /* Motion */
  --p-duration-fast: 150ms;
  --p-duration-normal: 300ms;
  --p-duration-slow: 600ms;
  --p-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --p-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Shadows */
  --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --p-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --p-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.4);
  --p-shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.5);


  /* ─── SEMANTIC LAYER ─── Purpose-based aliases ─── */

  /* Backgrounds */
  --color-background: var(--p-neutral-50);
  --color-background-base: var(--p-neutral-100);
  --color-background-elevated: var(--p-neutral-200);
  --color-foreground: var(--p-neutral-800);
  --color-foreground-muted: var(--p-neutral-600);
  --color-foreground-subtle: var(--p-neutral-500);

  /* Primary (Teal) */
  --color-primary: var(--p-teal-500);
  --color-primary-hover: var(--p-teal-400);
  --color-primary-dim: var(--p-teal-300);
  --color-primary-foreground: var(--p-neutral-50);

  /* Secondary (Gold) */
  --color-secondary: var(--p-gold-500);
  --color-secondary-hover: var(--p-gold-400);

  /* Accent (Violet) */
  --color-accent: var(--p-violet-500);

  /* Cards */
  --color-card: var(--p-neutral-300);
  --color-card-hover: var(--p-neutral-400);
  --color-card-foreground: var(--p-neutral-800);

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.06);
  --color-border-hover: rgba(255, 255, 255, 0.12);

  /* Status */
  --color-destructive: var(--p-red-600);
  --color-success: var(--p-green-500);

  /* Glow effects */
  --glow-primary: rgba(45, 212, 168, 0.12);
  --glow-primary-strong: rgba(45, 212, 168, 0.25);
  --glow-secondary: rgba(212, 160, 84, 0.10);
  --glow-secondary-strong: rgba(212, 160, 84, 0.20);
  --glow-accent: rgba(138, 100, 255, 0.10);

  /* Semantic typography */
  --font-display: var(--p-font-display);
  --font-body: var(--p-font-body);

  /* Semantic spacing */
  --spacing-section: var(--p-space-24);
  --spacing-section-inner: var(--p-space-16);
  --spacing-component: var(--p-space-6);
  --spacing-element: var(--p-space-4);

  /* Semantic radius */
  --radius-interactive: var(--p-radius-full);
  --radius-container: var(--p-radius-lg);
  --radius-card: var(--p-radius-lg);

  /* Semantic motion */
  --transition-fast: var(--p-duration-fast) var(--p-ease-smooth);
  --transition-normal: var(--p-duration-normal) var(--p-ease-out);
  --transition-slow: var(--p-duration-slow) var(--p-ease-out);


  /* ─── COMPONENT LAYER ─── Per-component overrides ─── */

  /* Nav */
  --nav-bg: transparent;
  --nav-bg-scrolled: rgba(5, 5, 6, 0.82);
  --nav-blur: 24px;
  --nav-padding: var(--p-space-5);
  --nav-padding-scrolled: var(--p-space-4);

  /* Button Primary */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-text: var(--color-primary-foreground);
  --btn-primary-radius: var(--radius-interactive);
  --btn-primary-shadow-hover: 0 8px 32px var(--glow-primary-strong), 0 0 0 1px var(--color-primary);

  /* Button Ghost */
  --btn-ghost-bg: transparent;
  --btn-ghost-text: var(--color-foreground-muted);
  --btn-ghost-border: var(--color-border);
  --btn-ghost-radius: var(--radius-interactive);

  /* Card */
  --card-bg: var(--color-card);
  --card-border: var(--color-border);
  --card-radius: var(--radius-card);
  --card-shadow-hover: var(--p-shadow-xl);

  /* Social Button */
  --social-size: 54px;
  --social-bg: var(--color-card);
  --social-border: var(--color-border);
  --social-radius: var(--p-radius-full);

  /* Passion Icon */
  --icon-teal-bg: var(--glow-primary);
  --icon-teal-color: var(--color-primary);
  --icon-warm-bg: var(--glow-secondary);
  --icon-warm-color: var(--color-secondary);
  --icon-violet-bg: var(--glow-accent);
  --icon-violet-color: var(--color-accent);
}