/* ═══════════════════════════════════════════════════════
   TOULTRA GLOBAL DESIGN TOKENS
   A scalable, centralized token system for the next 10 years.
   ═══════════════════════════════════════════════════════ */

:root {
  /* ─── SURFACES (Backgrounds) ─── */
  --surface-0:   #090909;  /* Deepest canvas */
  --surface-1:   #111111;  /* Panel bg */
  --surface-2:   #1A1A1A;  /* Card bg */
  --surface-3:   #222222;  /* Elevated card */
  --surface-4:   #2B2B2B;  /* Hover surface */

  /* ─── INK (Text & Icons) ─── */
  --ink-primary:   #FFFFFF;
  --ink-secondary: #C8C2B5;
  --ink-tertiary:  #9E988D;  /* Adjusted for better contrast */
  --ink-quaternary:#635E54;
  --ink-inverse:   #090909;  /* Text on light backgrounds (e.g. gold buttons) */

  /* ─── BRAND ACCENTS ─── */
  --gold:          #D4AF37;
  --gold-bright:   #F0C440;
  --gold-deep:     #B8962F;
  --gold-subtle:   rgba(212, 175, 55, 0.12);
  --gold-glow:     rgba(212, 175, 55, 0.07);

  /* ─── SEMANTIC (Status) ─── */
  --success:       #8FB27A;
  --success-bg:    rgba(143, 178, 122, 0.12);
  --error:         #E07060;
  --error-bg:      rgba(224, 112, 96, 0.12);
  --warning:       #F2C94C;
  --warning-bg:    rgba(242, 201, 76, 0.12);
  --info:          #56CCF2;
  --info-bg:       rgba(86, 204, 242, 0.12);

  /* ─── BORDERS ─── */
  --border-hairline: rgba(243, 239, 230, 0.04);
  --border-subtle:   rgba(243, 239, 230, 0.07);
  --border-standard: rgba(243, 239, 230, 0.10);
  --border-active:   rgba(212, 175, 55, 0.28);
  --border-gold:     rgba(212, 175, 55, 0.35);

  /* ─── RADII ─── */
  --r-xs:   6px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 9999px;

  /* ─── SHADOWS ─── */
  --shadow-card:         0 1px 0 rgba(243, 239, 230, 0.03), 0 8px 32px rgba(0,0,0,0.35);
  --shadow-elevated:     0 0 0 1px rgba(243, 239, 230, 0.06), 0 4px 24px rgba(0,0,0,0.45);
  --shadow-button:       0 2px 12px rgba(212, 175, 55, 0.12);
  --shadow-button-hover: 0 4px 24px rgba(212, 175, 55, 0.20);
  --shadow-fab:          0 12px 40px rgba(0,0,0,0.55);
  --shadow-dropdown:     0 20px 40px rgba(0,0,0,0.5);

  /* ─── SPACING (Fluid 8pt Grid based on V2 Optimizations) ─── */
  --space-xs: clamp(0.5rem, 1vw + 0.25rem, 0.75rem);   /* 8px - 12px */
  --space-sm: clamp(0.75rem, 1.5vw + 0.5rem, 1rem);    /* 12px - 16px */
  --space-md: clamp(1.25rem, 2.5vw + 1rem, 1.5rem);    /* 20px - 24px */
  --space-lg: clamp(2rem, 4vw + 1.5rem, 3rem);         /* 32px - 48px */
  --space-xl: clamp(3rem, 6vw + 2rem, 5rem);           /* 48px - 80px */
  
  /* ─── LAYOUT ─── */
  --max-w-container: 1080px;
  --pad-inline-desktop: 28px;
  --pad-inline-mobile: 20px;
  --header-height: 60px;
  --header-scrolled-height: 52px;
  --touch-min: 48px;

  /* ─── TYPOGRAPHY FAMILIES ─── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  
  /* ─── TRANSITIONS ─── */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.2, 0, 0, 1);
  --transition-fast: 0.15s var(--ease-smooth);
  --transition-standard: 0.25s var(--ease-smooth);
  --transition-slow: 0.4s var(--ease-spring);
}