/* ============================================
   BuildSheet Design System — CSS Custom Properties
   ============================================ */

:root {
  /* ── Brand Colors ─────────────────────────── */
  --color-navy-950: #020617;
  --color-navy-900: #0F172A;
  --color-navy-800: #1E293B;
  --color-navy-700: #334155;
  --color-navy-600: #475569;
  --color-navy-500: #64748B;
  --color-navy-400: #94A3B8;
  --color-navy-300: #CBD5E1;
  --color-navy-200: #E2E8F0;
  --color-navy-100: #F1F5F9;
  --color-navy-50:  #F8FAFC;

  /* Accent — Teal / Cyan gradient endpoints */
  --color-accent-teal: #06B6D4;
  --color-accent-cyan: #0EA5E9;
  --color-accent-teal-dark: #0891B2;
  --color-accent-cyan-light: #38BDF8;
  --color-accent-glow: rgba(6, 182, 212, 0.25);
  --color-accent-glow-strong: rgba(6, 182, 212, 0.45);

  /* Semantic */
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-error: #EF4444;

  /* ── Gradients ────────────────────────────── */
  --gradient-accent: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-cyan));
  --gradient-accent-hover: linear-gradient(135deg, var(--color-accent-teal-dark), var(--color-accent-teal));
  --gradient-hero: linear-gradient(180deg, var(--color-navy-950) 0%, var(--color-navy-900) 50%, var(--color-navy-800) 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-border: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-cyan), var(--color-accent-teal));
  --gradient-text: linear-gradient(135deg, var(--color-accent-teal), var(--color-accent-cyan-light));

  /* ── Dark Mode (Default) ──────────────────── */
  --bg-primary: var(--color-navy-950);
  --bg-secondary: var(--color-navy-900);
  --bg-surface: var(--color-navy-800);
  --bg-surface-hover: var(--color-navy-700);
  --bg-glass: rgba(15, 23, 42, 0.75);
  --bg-glass-strong: rgba(15, 23, 42, 0.9);

  --text-primary: var(--color-navy-50);
  --text-secondary: var(--color-navy-300);
  --text-tertiary: var(--color-navy-400);
  --text-muted: var(--color-navy-500);

  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.15);

  --divider: rgba(255, 255, 255, 0.06);

  /* ── Typography ───────────────────────────── */
  --font-heading: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Type Scale (1.25 ratio — Major Third) */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Line Heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;
  --leading-loose:   2;

  /* Font Weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-extrabold: 800;

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* ── Spacing ──────────────────────────────── */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

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

  /* ── Border Radius ────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px var(--color-accent-glow), 0 0 60px var(--color-accent-glow);
  --shadow-glow-strong: 0 0 30px var(--color-accent-glow-strong), 0 0 80px var(--color-accent-glow);

  /* ── Transitions ──────────────────────────── */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower:  600ms;

  --transition-colors: color var(--duration-normal) var(--ease-default),
                        background-color var(--duration-normal) var(--ease-default),
                        border-color var(--duration-normal) var(--ease-default);
  --transition-transform: transform var(--duration-normal) var(--ease-default);
  --transition-shadow: box-shadow var(--duration-normal) var(--ease-default);
  --transition-all: all var(--duration-normal) var(--ease-default);

  /* ── Z-Index Scale ────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-navbar:   500;
  --z-overlay:  600;
  --z-modal:    700;
  --z-toast:    800;
  --z-tooltip:  900;
}

/* ── Light Mode Overrides ─────────────────── */
[data-theme="light"] {
  --bg-primary: #FFFFFF;
  --bg-secondary: var(--color-navy-50);
  --bg-surface: #FFFFFF;
  --bg-surface-hover: var(--color-navy-100);
  --bg-glass: rgba(255, 255, 255, 0.75);
  --bg-glass-strong: rgba(255, 255, 255, 0.9);

  --text-primary: var(--color-navy-900);
  --text-secondary: var(--color-navy-600);
  --text-tertiary: var(--color-navy-500);
  --text-muted: var(--color-navy-400);

  --border-subtle: rgba(0, 0, 0, 0.04);
  --border-default: rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.12);

  --divider: rgba(0, 0, 0, 0.06);

  --gradient-hero: linear-gradient(180deg, var(--color-navy-50) 0%, #FFFFFF 50%, var(--color-navy-50) 100%);
  --gradient-card: linear-gradient(145deg, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 100%);

  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}