/* ============================================================
   DESIGN WITH VISION LLC — Design Tokens
   Ultra-modern NYC creative agency: midnight navy + electric gold
   ============================================================ */

:root {
  /* ── Type Scale ── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    9rem);

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --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;

  /* ── Color Palette ── */
  /* Backgrounds */
  --color-bg:              #09090f;   /* near-black */
  --color-surface:         #0d0d17;
  --color-surface-2:       #11111f;
  --color-surface-offset:  #151526;
  --color-surface-card:    #0f0f1e;
  --color-border:          #1e1e38;
  --color-divider:         #1a1a30;

  /* Gold Accent — Electric Gold */
  --color-gold:            #c9a84c;
  --color-gold-bright:     #e8c96e;
  --color-gold-dim:        #9a7830;
  --color-gold-glow:       rgba(201, 168, 76, 0.15);
  --color-gold-line:       rgba(201, 168, 76, 0.4);

  /* Gradient gold */
  --gold-gradient: linear-gradient(135deg, #e8c96e 0%, #c9a84c 45%, #9a7830 100%);
  --gold-gradient-text: linear-gradient(90deg, #e8c96e 0%, #c9a84c 60%, #b89040 100%);

  /* Navy accent */
  --color-navy:            #0a0a2e;
  --color-navy-mid:        #0d0d40;
  --color-navy-bright:     #1a1a5e;

  /* Text */
  --color-text:            #e8e8f0;
  --color-text-muted:      #8888aa;
  --color-text-faint:      #444466;
  --color-text-inverse:    #09090f;

  /* Status */
  --color-success:         #4caf82;
  --color-error:           #e05c6a;

  /* ── Typography ── */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-heading: 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', sans-serif;

  /* ── Radius ── */
  --radius-sm:   0.25rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 12px 40px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 24px rgba(201,168,76,0.25);

  /* ── Transitions ── */
  --ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast:  180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-mid:   320ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:  500ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Layout ── */
  --content-narrow:  680px;
  --content-default: 1000px;
  --content-wide:    1280px;
  --nav-height:      80px;
}