/* ============================================================
   KELLY B MULTIPURPOSE VENTURES — Design Tokens
   ============================================================ */

:root {
  /* ── Primary Brand Colors ──────────────────────────────── */
  --color-primary:        #1A1A1A;   /* Dark Grey — matching logo text and elements */
  --color-primary-light:  #333333;
  --color-primary-dark:   #000000;
  --color-primary-rgb:    26, 26, 26;

  /* ── Secondary Brand Colors ────────────────────────────── */
  --color-secondary:      #E9A930;   /* Gold / Amber — matching logo roof */
  --color-secondary-light:#F4C45D;
  --color-secondary-dark: #C6891C;
  --color-secondary-rgb:  233, 169, 48;

  /* ── Accent Colors ─────────────────────────────────────── */
  --color-accent:         #E8792B;   /* Construction Orange — energy, action */
  --color-accent-light:   #F09A57;
  --color-accent-dark:    #C45F15;

  --color-success:        #2E8B57;   /* Safety Green */
  --color-danger:         #D32F2F;
  --color-warning:        #F9A825;
  --color-info:           #1976D2;

  /* ── Neutrals ──────────────────────────────────────────── */
  --color-white:          #FFFFFF;
  --color-off-white:      #F8F9FA;
  --color-light:          #F0F2F5;
  --color-gray-100:       #E8ECF0;
  --color-gray-200:       #D1D8E0;
  --color-gray-300:       #B0BEC5;
  --color-gray-400:       #8A9BAE;
  --color-gray-500:       #6B7C8F;
  --color-gray-600:       #4A5568;
  --color-gray-700:       #334155;
  --color-gray-800:       #1E293B;
  --color-gray-900:       #0F172A;
  --color-black:          #0A0E14;

  /* ── Typography ────────────────────────────────────────── */
  --font-primary:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading:   'Outfit', 'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes (fluid) */
  --text-xs:    clamp(0.7rem,  0.65rem + 0.25vw, 0.75rem);
  --text-sm:    clamp(0.8rem,  0.75rem + 0.25vw, 0.875rem);
  --text-base:  clamp(0.9rem,  0.85rem + 0.3vw,  1rem);
  --text-md:    clamp(1rem,    0.9rem  + 0.4vw,  1.125rem);
  --text-lg:    clamp(1.1rem,  1rem    + 0.5vw,  1.25rem);
  --text-xl:    clamp(1.2rem,  1.05rem + 0.6vw,  1.5rem);
  --text-2xl:   clamp(1.4rem,  1.2rem  + 0.8vw,  1.875rem);
  --text-3xl:   clamp(1.7rem,  1.4rem  + 1.2vw,  2.25rem);
  --text-4xl:   clamp(2rem,    1.5rem  + 1.8vw,  3rem);
  --text-5xl:   clamp(2.5rem,  1.8rem  + 2.5vw,  3.75rem);
  --text-6xl:   clamp(3rem,    2rem    + 3.5vw,  4.5rem);
  --text-hero:  clamp(2.8rem,  2rem    + 3vw,    5rem);

  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  --leading-tight:    1.2;
  --leading-snug:     1.35;
  --leading-normal:   1.6;
  --leading-relaxed:  1.75;

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

  /* ── 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;

  /* ── Layout ────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1200px;
  --container-2xl: 1400px;
  --nav-height:    80px;

  /* ── Borders & Radius ──────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 50%;

  --border-thin:   1px;
  --border-medium: 2px;
  --border-thick:  3px;

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-xs:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:   0 2px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.05);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.06);
  --shadow-2xl:  0 24px 64px rgba(0,0,0,0.15), 0 12px 24px rgba(0,0,0,0.08);
  --shadow-gold: 0 4px 20px rgba(212,168,67,0.25);

  /* ── Transitions ───────────────────────────────────────── */
  --ease-out:       cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:  150ms;
  --duration-base:  250ms;
  --duration-slow:  400ms;
  --duration-slower:600ms;

  /* ── Z-Index ───────────────────────────────────────────── */
  --z-base:      1;
  --z-dropdown:  10;
  --z-sticky:    20;
  --z-overlay:   30;
  --z-modal:     40;
  --z-toast:     50;
}