/* ==========================================================================
   GROWN Design System - Variables & Tokens
   Dark Luxury / Deep-Depth Visual System
   Strict Palette: #080808 (Near Black) & #1B1B1D (Deep Graphite)
   ========================================================================== */

:root {
  /* Core Brand Colors */
  --color-black: #080808;
  --color-graphite-dark: #121214;
  --color-graphite: #1B1B1D;
  --color-graphite-light: #242427;
  --color-graphite-elevated: #2C2C30;
  --color-graphite-border: rgba(255, 255, 255, 0.08);
  --color-graphite-border-hover: rgba(255, 255, 255, 0.18);
  --color-graphite-border-active: rgba(255, 255, 255, 0.32);

  /* Surface & Layering */
  --bg-primary: #080808;
  --bg-secondary: #0E0E10;
  --bg-card: #151517;
  --bg-card-hover: #1C1C1F;
  --bg-card-popular: #1E1E22;
  --bg-glass: rgba(27, 27, 29, 0.65);
  --bg-glass-elevated: rgba(35, 35, 39, 0.75);

  /* Typography Colors (Strictly Neutral Grays & Soft Whites) */
  --text-primary: #EDEDED;
  --text-heading: #FFFFFF;
  --text-secondary: #9E9EA4;
  --text-muted: #66666E;
  --text-faint: #3F3F46;

  /* Typography Scale */
  --font-family-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family-mono: 'JetBrains Mono', 'SF Mono', Consolas, Menlo, monospace;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Letter Spacing */
  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.12em;
  --tracking-widest: 0.2em;

  /* Elevation & Shadows (Dark luxury soft diffusion) */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.75);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.85);
  --shadow-inner-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-card-popular: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 20px 48px -8px rgba(0, 0, 0, 0.85);

  /* Border Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 600ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 450ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Layout */
  --container-max-width: 1240px;
  --nav-height: 72px;
}