/* ============================================================
   SMOKE LOUNGE — Brand Tokens
   Generated from: Primary #d4a439, Dark #1a1a1a, Mood: Luxury
   ============================================================ */

:root {
  /* -------------------------------------------------------
     TIER 1 — PRIMITIVES
     Raw values. Never reference directly in components.
     ------------------------------------------------------- */

  /* Gold (Primary) */
  --gold-50:  #fdf8eb;
  --gold-100: #f9ecc8;
  --gold-200: #f2d98f;
  --gold-300: #e8c255;
  --gold-400: #d4a439;
  --gold-500: #c49530;
  --gold-600: #a67b28;
  --gold-700: #836020;
  --gold-800: #654a1a;
  --gold-900: #4a3514;
  --gold-950: #2d200c;

  /* Amber (Secondary — 30deg analogous, desaturated for harmony) */
  --amber-50:  #fef7ed;
  --amber-100: #fcecd4;
  --amber-200: #f8d5a3;
  --amber-300: #f0b86a;
  --amber-400: #e69b3a;
  --amber-500: #d4872e;
  --amber-600: #b06d24;
  --amber-700: #8a541d;
  --amber-800: #6b4118;
  --amber-900: #4d2f13;
  --amber-950: #2e1c0b;

  /* Neutral (warm-tinted grays — 3% gold hue mixed in) */
  --neutral-50:  #faf9f7;
  --neutral-100: #f3f1ed;
  --neutral-200: #e5e2dc;
  --neutral-300: #d1cdc5;
  --neutral-400: #a09a8e;
  --neutral-500: #7a746a;
  --neutral-600: #5c5750;
  --neutral-700: #45413c;
  --neutral-800: #2e2b28;
  --neutral-900: #1f1d1b;
  --neutral-950: #121110;

  /* Dark (Surface scale — from input #1a1a1a) */
  --dark-50:  #2a2a28;
  --dark-100: #242422;
  --dark-200: #1e1e1c;
  --dark-300: #1a1a18;
  --dark-400: #151513;
  --dark-500: #111110;
  --dark-600: #0d0d0c;
  --dark-700: #0a0a09;
  --dark-800: #070706;
  --dark-900: #040404;
  --dark-950: #020202;

  /* Semantic status */
  --green-500:  #34d399;
  --green-600:  #10b981;
  --green-50:   #ecfdf5;
  --yellow-500: #fbbf24;
  --yellow-600: #f59e0b;
  --yellow-50:  #fffbeb;
  --red-500:    #f87171;
  --red-600:    #ef4444;
  --red-50:     #fef2f2;
  --blue-500:   #60a5fa;
  --blue-600:   #3b82f6;
  --blue-50:    #eff6ff;

  /* Spacing (4px base) */
  --space-0:    0;
  --space-0-5:  2px;
  --space-1:    4px;
  --space-1-5:  6px;
  --space-2:    8px;
  --space-3:    12px;
  --space-4:    16px;
  --space-5:    20px;
  --space-6:    24px;
  --space-8:    32px;
  --space-10:   40px;
  --space-12:   48px;
  --space-16:   64px;
  --space-20:   80px;
  --space-24:   96px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-3xl:  24px;
  --radius-full: 9999px;

  /* Shadows (gold-tinted for luxury) */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-xl:   0 16px 40px rgba(0, 0, 0, 0.3);
  --shadow-glow: 0 4px 20px rgba(212, 164, 57, 0.2);
  --shadow-glow-lg: 0 8px 40px rgba(212, 164, 57, 0.15);

  /* Duration */
  --duration-instant:   50ms;
  --duration-fast:      100ms;
  --duration-quick:     150ms;
  --duration-normal:    200ms;
  --duration-moderate:  300ms;
  --duration-slow:      400ms;
  --duration-deliberate: 500ms;

  /* Easing */
  --ease-enter:  cubic-bezier(0, 0, 0.2, 1);
  --ease-exit:   cubic-bezier(0.4, 0, 1, 1);
  --ease-move:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography primitives */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    800;

  --text-xs:   0.75rem;     /* 12px */
  --text-sm:   0.875rem;    /* 14px */
  --text-base: 1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  1.875rem;    /* 30px */
  --text-4xl:  2.25rem;     /* 36px */
  --text-5xl:  3rem;        /* 48px */
  --text-6xl:  3.75rem;     /* 60px */
  --text-7xl:  4.5rem;      /* 72px */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   1.75;

  --tracking-tight:    -0.02em;
  --tracking-normal:   0;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;
  --tracking-display:  0.2em;

  /* -------------------------------------------------------
     TIER 2 — SEMANTIC TOKENS
     Purpose-based. Used by components.
     ------------------------------------------------------- */

  /* Brand */
  --color-primary:        var(--gold-400);
  --color-primary-hover:  var(--gold-500);
  --color-primary-active: var(--gold-600);
  --color-primary-light:  var(--gold-50);
  --color-primary-muted:  var(--gold-300);

  --color-secondary:        var(--amber-400);
  --color-secondary-hover:  var(--amber-500);
  --color-secondary-light:  var(--amber-50);

  /* Surfaces (dark mode default for this luxury brand) */
  --color-background:      var(--dark-600);
  --color-surface:         var(--dark-300);
  --color-surface-raised:  var(--dark-50);
  --color-surface-overlay: rgba(10, 10, 10, 0.85);

  /* Text */
  --color-text-primary:    #f5f0e8;
  --color-text-secondary:  var(--neutral-400);
  --color-text-muted:      var(--neutral-600);
  --color-text-on-primary: var(--dark-600);
  --color-text-on-surface: #f5f0e8;

  /* Borders */
  --color-border:          var(--neutral-800);
  --color-border-strong:   var(--neutral-700);
  --color-border-accent:   rgba(212, 164, 57, 0.15);
  --color-border-focus:    var(--gold-400);

  /* Gold alpha variants */
  --gold-alpha-5:  rgba(212, 164, 57, 0.05);
  --gold-alpha-8:  rgba(212, 164, 57, 0.08);
  --gold-alpha-10: rgba(212, 164, 57, 0.10);
  --gold-alpha-15: rgba(212, 164, 57, 0.15);
  --gold-alpha-20: rgba(212, 164, 57, 0.20);
  --gold-alpha-30: rgba(212, 164, 57, 0.30);
  --gold-alpha-40: rgba(212, 164, 57, 0.40);

  /* Semantic status */
  --color-success:       var(--green-500);
  --color-success-bg:    var(--green-50);
  --color-warning:       var(--yellow-500);
  --color-warning-bg:    var(--yellow-50);
  --color-error:         var(--red-500);
  --color-error-bg:      var(--red-50);
  --color-info:          var(--blue-500);
  --color-info-bg:       var(--blue-50);

  /* Semantic spacing */
  --space-inline-xs: var(--space-1);
  --space-inline-sm: var(--space-2);
  --space-inline-md: var(--space-4);
  --space-inline-lg: var(--space-6);
  --space-stack-xs:  var(--space-1);
  --space-stack-sm:  var(--space-2);
  --space-stack-md:  var(--space-4);
  --space-stack-lg:  var(--space-8);
  --space-section:   var(--space-20);
  --space-section-sm: var(--space-16);

  /* Semantic radii */
  --radius-button:  var(--radius-full);
  --radius-input:   var(--radius-xl);
  --radius-card:    var(--radius-2xl);
  --radius-modal:   var(--radius-2xl);
  --radius-badge:   var(--radius-full);
  --radius-icon:    var(--radius-xl);

  /* -------------------------------------------------------
     TIER 3 — COMPONENT TOKENS
     Scoped to specific elements.
     ------------------------------------------------------- */

  /* Button */
  --button-height-sm:    2rem;
  --button-height-md:    2.75rem;
  --button-height-lg:    3rem;
  --button-padding-x:    var(--space-6);
  --button-padding-x-lg: var(--space-8);
  --button-font-size:    var(--text-sm);
  --button-font-weight:  var(--font-weight-semibold);
  --button-radius:       var(--radius-button);
  --button-tracking:     var(--tracking-wide);

  /* Card */
  --card-padding:      var(--space-8);
  --card-padding-sm:   var(--space-6);
  --card-radius:       var(--radius-card);
  --card-border:       1px solid var(--color-border-accent);
  --card-background:   var(--color-surface);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-glow-lg);

  /* Input */
  --input-height:      2.75rem;
  --input-padding-x:   var(--space-4);
  --input-padding-y:   var(--space-3);
  --input-radius:      var(--radius-input);
  --input-border:      1px solid var(--color-border-accent);
  --input-background:  rgba(26, 26, 26, 0.8);
  --input-focus-ring:  0 0 0 3px var(--gold-alpha-10);

  /* Avatar */
  --avatar-size-sm:    2rem;
  --avatar-size-md:    2.5rem;
  --avatar-size-lg:    3.5rem;
  --avatar-radius:     var(--radius-full);
  --avatar-background: var(--gold-alpha-20);

  /* Nav */
  --nav-height:        5rem;
  --nav-blur:          12px;
  --nav-background:    rgba(10, 10, 10, 0.95);
  --nav-border:        1px solid var(--gold-alpha-10);
}

/* -------------------------------------------------------
   LIGHT MODE OVERRIDES
   Luxury brands are dark-first, but light mode is needed
   for contexts like print, email, or day-mode preference.
   ------------------------------------------------------- */
[data-theme="light"] {
  --color-background:      var(--neutral-50);
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-surface-overlay: rgba(250, 249, 247, 0.9);

  --color-text-primary:    var(--neutral-900);
  --color-text-secondary:  var(--neutral-600);
  --color-text-muted:      var(--neutral-400);
  --color-text-on-surface: var(--neutral-900);

  --color-primary:         var(--gold-600);
  --color-primary-hover:   var(--gold-700);
  --color-text-on-primary: #ffffff;

  --color-border:          var(--neutral-200);
  --color-border-strong:   var(--neutral-300);
  --color-border-accent:   rgba(212, 164, 57, 0.2);

  --card-background:       #ffffff;
  --card-border:           1px solid var(--neutral-200);
  --card-shadow:           0 1px 3px rgba(0, 0, 0, 0.08);
  --card-shadow-hover:     0 8px 24px rgba(0, 0, 0, 0.1);

  --input-background:      #ffffff;
  --input-border:          1px solid var(--neutral-300);

  --nav-background:        rgba(255, 255, 255, 0.95);
  --nav-border:            1px solid var(--neutral-200);

  --shadow-glow:           0 4px 20px rgba(212, 164, 57, 0.15);
  --shadow-glow-lg:        0 8px 40px rgba(212, 164, 57, 0.1);
}