/* ============================================
   PEARL INVESTMENT — DESIGN TOKENS
  Pearl Investment Corporation
   ============================================ */

:root {
  /* === COLOR PALETTE === */
  --black:        #0A192F;
  --black-soft:   #FFFFFF;
  --charcoal:     #F8F9FA;
  --charcoal-mid: #F2F4F7;
  --charcoal-lt:  #DFE5EC;

  --gold:         #C5A059;
  --gold-bright:  #D8B26A;
  --gold-dim:     #9A7A3D;
  --gold-muted:   rgba(197, 160, 89, 0.14);
  --gold-border:  rgba(197, 160, 89, 0.36);

  --pearl:        #0A192F;
  --pearl-dim:    #304A6D;
  --pearl-ghost:  rgba(10, 25, 47, 0.06);
  --pearl-subtle: rgba(10, 25, 47, 0.12);

  --white:        #FFFFFF;
  --white-80:     rgba(10, 25, 47, 0.80);
  --white-60:     rgba(10, 25, 47, 0.66);
  --white-30:     rgba(10, 25, 47, 0.42);
  --white-10:     rgba(10, 25, 47, 0.12);

  --navy:         #0A192F;
  --navy-mid:     #1A365D;

  --surface-bg:   #FFFFFF;
  --surface-soft: #F8F9FA;
  --text-main:    #0A192F;
  --text-muted:   #3A4E6B;
  --line-soft:    #DFE5EC;
  --hover-surface: #F2F6FB;
  --hover-border:  #B6C4D4;
  --hover-accent:  #1A365D;
  --hover-accent-soft: rgba(26, 54, 93, 0.1);

  /* === TYPOGRAPHY === */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-ui:      'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 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.35rem;
  --text-5xl:  3rem;
  --text-6xl:  4.5rem;
  --text-7xl:  5.5rem;

  /* === SPACING === */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* === LAYOUT === */
  --max-width: 1180px;
  --nav-height: 80px;

  /* === BORDERS === */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* === SHADOWS === */
  --shadow-gold: 0 8px 20px rgba(197, 160, 89, 0.12);
  --shadow-lg:   0 20px 40px rgba(10, 25, 47, 0.14);
  --shadow-card: 0 6px 16px rgba(10, 25, 47, 0.08);

  /* === TRANSITIONS === */
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   600ms;
  --duration-xslow:  1000ms;

  /* === Z-INDEX === */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-nav:     300;
  --z-toast:   400;
}