/* ============================================================
   ROMAN CREATIVE STUDIO — DESIGN TOKENS v2.0
   Dark-gold brand theme. One source of truth.
   ============================================================ */

:root {

  /* ════════════════════════════════════════════════
     BRAND IDENTITY
     ════════════════════════════════════════════════ */

  --color-gold:           #D4AF37;
  --color-gold-light:     #E8CC6A;
  --color-gold-dark:      #A88920;
  --color-gold-subtle:    rgba(212,175,55,0.12);
  --color-gold-border:    rgba(212,175,55,0.28);

  --color-gold-50:   #FBF7EC;
  --color-gold-100:  #F5EAC8;
  --color-gold-200:  #EBCF8A;
  --color-gold-300:  #E0B84D;
  --color-gold-400:  #D4AF37;
  --color-gold-500:  #C49A20;
  --color-gold-600:  #A88920;
  --color-gold-700:  #886D18;
  --color-gold-800:  #6A5313;
  --color-gold-900:  #4C3B0D;
  --color-gold-950:  #2E2208;

  --color-brand:        var(--color-gold-400);
  --color-brand-dark:   var(--color-gold-600);
  --color-brand-light:  var(--color-gold-300);
  --color-brand-subtle: rgba(212,175,55,0.12);
  --color-brand-border: rgba(212,175,55,0.28);

  --shadow-brand:    0 4px 20px rgba(212,175,55,0.28);
  --shadow-brand-lg: 0 8px 40px rgba(212,175,55,0.40);

  /* ════════════════════════════════════════════════
     DARK SURFACE PALETTE
     ════════════════════════════════════════════════ */

  --color-charcoal-950: #0C0E11;
  --color-charcoal-900: #121417;
  --color-charcoal-800: #1B1E23;
  --color-charcoal-700: #24282F;
  --color-charcoal-600: #2E333C;
  --color-charcoal-500: #3D4452;
  --color-charcoal-400: #525C6E;
  --color-charcoal-300: #6B7585;
  --color-charcoal-200: #8E97A5;
  --color-charcoal-100: #B4BAC5;
  --color-charcoal-50:  #D8DCE3;

  --color-navy-950: #0C0E11;
  --color-navy-900: #121417;
  --color-navy-800: #1B1E23;
  --color-navy-700: #24282F;
  --color-navy-600: #2E333C;
  --color-navy-500: #3D4452;
  --color-navy-400: #525C6E;

  /* ════════════════════════════════════════════════
     ACCENT COLORS
     ════════════════════════════════════════════════ */

  --color-blue-50:  #EFF6FF;
  --color-blue-500: #3B82F6;
  --color-blue-600: #2563EB;

  --color-green-50:  #F0FDF4;
  --color-green-400: #4ADE80;
  --color-green-500: #22C55E;
  --color-green-600: #16A34A;

  --color-red-50:  #FFF5F5;
  --color-red-500: #EF4444;

  --color-amber-400: #FBBF24;
  --color-amber-500: #F59E0B;

  --color-success:        var(--color-green-400);
  --color-success-subtle: rgba(74,222,128,0.12);
  --color-error:          var(--color-red-500);
  --color-error-subtle:   rgba(239,68,68,0.12);
  --color-warning:        var(--color-amber-400);

  /* ════════════════════════════════════════════════
     NEUTRAL SCALE
     ════════════════════════════════════════════════ */

  --color-gray-50:  #F8F9FA;
  --color-gray-100: #F1F3F5;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-400: #CED4DA;
  --color-gray-500: #ADB5BD;
  --color-gray-600: #868E96;
  --color-gray-700: #495057;
  --color-gray-800: #343A40;
  --color-gray-900: #212529;
  --color-gray-950: #101214;

  /* ════════════════════════════════════════════════
     SEMANTIC UI COLORS — DARK THEME
     ════════════════════════════════════════════════ */

  --color-white:   #FFFFFF;
  --color-black:   #000000;

  /* Backgrounds */
  --color-bg:           #0C0E11;
  --color-bg-subtle:    #121417;
  --color-bg-muted:     #1B1E23;
  --color-surface:      #151719;
  --color-surface-dark: #0C0E11;

  /* Text */
  --color-text:            #F0EFE9;
  --color-text-secondary:  rgba(240,239,233,0.68);
  --color-text-muted:      rgba(240,239,233,0.42);
  --color-text-inverse:    var(--color-white);
  --color-text-dark-muted: rgba(255,255,255,0.60);

  /* Borders */
  --color-border:       rgba(255,255,255,0.09);
  --color-border-muted: rgba(255,255,255,0.05);
  --color-border-dark:  rgba(255,255,255,0.09);

  /* ════════════════════════════════════════════════
     SHORTHAND ALIASES
     ════════════════════════════════════════════════ */

  --brand-50:  var(--color-gold-50);
  --brand-100: var(--color-gold-100);
  --brand-200: var(--color-gold-200);
  --brand-300: var(--color-gold-300);
  --brand-400: var(--color-gold-400);
  --brand-500: var(--color-gold-500);
  --brand-600: var(--color-gold-600);
  --brand-700: var(--color-gold-700);

  --neutral-50:  var(--color-charcoal-50);
  --neutral-100: var(--color-charcoal-100);
  --neutral-200: var(--color-charcoal-200);
  --neutral-300: var(--color-charcoal-300);
  --neutral-400: var(--color-charcoal-400);
  --neutral-500: var(--color-charcoal-500);
  --neutral-600: var(--color-charcoal-600);
  --neutral-700: var(--color-charcoal-700);
  --neutral-800: var(--color-charcoal-800);
  --neutral-900: var(--color-charcoal-900);

  --navy-600:  var(--color-charcoal-600);
  --navy-700:  var(--color-charcoal-700);
  --navy-800:  var(--color-charcoal-800);
  --navy-900:  var(--color-charcoal-900);
  --navy-950:  var(--color-charcoal-950);

  /* ════════════════════════════════════════════════
     TYPOGRAPHY SYSTEM
     ════════════════════════════════════════════════ */

  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
  --font-serif:   'Georgia', 'Times New Roman', serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --leading-none:    1;
  --leading-tight:   1.25;
  --leading-snug:    1.375;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.025em;
  --tracking-wider:    0.05em;
  --tracking-widest:   0.1em;

  /* ════════════════════════════════════════════════
     SPACING SYSTEM
     ════════════════════════════════════════════════ */

  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --space-2:   0.5rem;
  --space-2-5: 0.625rem;
  --space-3:   0.75rem;
  --space-3-5: 0.875rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-9:   2.25rem;
  --space-10:  2.5rem;
  --space-11:  2.75rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-28:  7rem;
  --space-32:  8rem;
  --space-36:  9rem;
  --space-40:  10rem;
  --space-48:  12rem;
  --space-56:  14rem;
  --space-64:  16rem;

  --section-xs:  var(--space-12);
  --section-sm:  var(--space-16);
  --section-md:  var(--space-20);
  --section-lg:  var(--space-24);
  --section-xl:  var(--space-32);
  --section-2xl: var(--space-40);

  /* ════════════════════════════════════════════════
     BORDER RADIUS
     ════════════════════════════════════════════════ */

  --radius-none:  0;
  --radius-sm:    0.125rem;
  --radius-md:    0.375rem;
  --radius-lg:    0.5rem;
  --radius-xl:    0.75rem;
  --radius-2xl:   1rem;
  --radius-3xl:   1.5rem;
  --radius-4xl:   2rem;
  --radius-full:  9999px;

  /* ════════════════════════════════════════════════
     SHADOWS
     ════════════════════════════════════════════════ */

  --shadow-xs:   0 1px 2px rgba(0,0,0,0.20);
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.20);
  --shadow-md:   0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.15);
  --shadow-lg:   0 10px 15px rgba(0,0,0,0.30), 0 4px 6px rgba(0,0,0,0.15);
  --shadow-xl:   0 20px 25px rgba(0,0,0,0.35), 0 10px 10px rgba(0,0,0,0.15);
  --shadow-2xl:  0 25px 50px rgba(0,0,0,0.50);
  --shadow-dark: 0 25px 50px rgba(0,0,0,0.60);
  --shadow-card:       0 2px 8px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px rgba(212,175,55,0.25);

  /* ════════════════════════════════════════════════
     ANIMATION & MOTION
     ════════════════════════════════════════════════ */

  --duration-instant: 0ms;
  --duration-75:      75ms;
  --duration-100:     100ms;
  --duration-150:     150ms;
  --duration-200:     200ms;
  --duration-300:     300ms;
  --duration-500:     500ms;
  --duration-700:     700ms;
  --duration-1000:    1000ms;

  --duration-fast:   var(--duration-150);
  --duration-base:   var(--duration-200);
  --duration-slow:   var(--duration-300);
  --duration-enter:  var(--duration-500);
  --duration-lazy:   var(--duration-700);

  --ease-linear:  linear;
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);

  --transition-fast:  var(--duration-fast) var(--ease-out);
  --transition-base:  var(--duration-base) var(--ease-out);
  --transition-slow:  var(--duration-slow) var(--ease-out);

  /* ════════════════════════════════════════════════
     LAYOUT & GRID
     ════════════════════════════════════════════════ */

  --nav-height:     68px;
  --container-px:   clamp(1rem, 5vw, 2rem);
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1400px;

  /* ════════════════════════════════════════════════
     Z-INDEX
     ════════════════════════════════════════════════ */

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
  --z-tooltip:   600;

}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:  0ms;
    --duration-base:  0ms;
    --duration-slow:  0ms;
    --duration-enter: 0ms;
    --duration-lazy:  0ms;
  }
}