/*
 * Ironpipe CRM — Design Tokens
 * Based on Steel & Spark design system (Lundahl Custom Welding)
 *
 * Architecture:
 *   1. Primitives — Raw color scales (6 hues × 10 shades)
 *   2. Semantics — Purpose-driven aliases
 *   3. Structural — Spacing, typography, shadows, radii, z-index, transitions
 *   4. Dark mode — Overrides via [data-theme="dark"]
 *
 * RULE: Components NEVER reference hex values. Always use var(--token-name).
 * To rebrand: edit primitives → semantics auto-cascade → done.
 */

:root {
  /* ============================================================
     PRIMITIVES — Color Scales
     ============================================================ */

  /* Sky Blue */
  --sky-50: #F0F7FC;
  --sky-100: #DCEDF8;
  --sky-200: #ACD1ED;
  --sky-300: #84B8DF;
  --sky-400: #5C9FD1;
  --sky-500: #3786C2;
  --sky-600: #296DA0;
  --sky-700: #1E547D;
  --sky-800: #143C5B;
  --sky-900: #0B253C;

  /* Spark Amber */
  --spark-50: #FDF6EE;
  --spark-100: #FAEBD6;
  --spark-200: #F2D1A8;
  --spark-300: #E5B577;
  --spark-400: #D2984F;
  --spark-500: #B8813C;
  --spark-600: #9A6B2F;
  --spark-700: #7C5624;
  --spark-800: #5E411A;
  --spark-900: #402D12;

  /* Forge Black */
  --forge-50: #F0F1F3;
  --forge-100: #D8DADE;
  --forge-200: #B3B7BF;
  --forge-300: #8A909A;
  --forge-400: #636A76;
  --forge-500: #3E4553;
  --forge-600: #2E3441;
  --forge-700: #222831;
  --forge-800: #181C23;
  --forge-900: #0E1117;

  /* Weld Green */
  --green-50: #ECFDF5;
  --green-100: #D1FAE5;
  --green-200: #A7F3D0;
  --green-300: #6EE7B7;
  --green-400: #34D399;
  --green-500: #278A6C;
  --green-600: #1F7359;
  --green-700: #185C47;
  --green-800: #124536;
  --green-900: #0C2E24;

  /* Heat Red */
  --red-50: #FFF1F2;
  --red-100: #FFE4E6;
  --red-200: #FECDD3;
  --red-300: #FDA4AF;
  --red-400: #FB7185;
  --red-500: #E11D48;
  --red-600: #BE123C;
  --red-700: #9F1239;
  --red-800: #881337;
  --red-900: #4C0519;

  /* Iron Slate */
  --iron-50: #F5F7FA;
  --iron-100: #EDF0F5;
  --iron-200: #E2E7EF;
  --iron-300: #CDD5E0;
  --iron-400: #9DAAB8;
  --iron-500: #6B7A8D;
  --iron-600: #4F5D6E;
  --iron-700: #3A4554;
  --iron-800: #252E3A;
  --iron-900: #141B24;

  /* ============================================================
     SEMANTICS — Purpose-Driven Aliases
     ============================================================ */

  /* Text */
  --text-primary: var(--forge-900);
  --text-secondary: var(--iron-600);
  --text-tertiary: var(--iron-400);
  --text-inverse: #FFFFFF;

  /* Backgrounds */
  --bg-page: var(--iron-50);
  --bg-card: #FFFFFF;
  --bg-sidebar: var(--forge-900);
  --bg-input: #FFFFFF;
  --bg-hover: var(--iron-100);

  /* Borders */
  --border-default: var(--iron-200);
  --border-strong: var(--iron-300);

  /* Buttons — Primary CTA */
  --btn-primary-bg: var(--spark-500);
  --btn-primary-bg-hover: var(--spark-400);
  --btn-primary-text: #FFFFFF;

  /* Buttons — Info / Navigation */
  --btn-info-bg: var(--sky-500);
  --btn-info-bg-hover: var(--sky-400);
  --btn-info-text: #FFFFFF;

  /* Buttons — Success */
  --btn-success-bg: var(--green-500);
  --btn-success-bg-hover: var(--green-400);
  --btn-success-text: #FFFFFF;

  /* Buttons — Danger */
  --btn-danger-bg: var(--red-500);
  --btn-danger-bg-hover: var(--red-400);
  --btn-danger-text: #FFFFFF;

  /* Buttons — Secondary */
  --btn-secondary-bg: #FFFFFF;
  --btn-secondary-bg-hover: var(--iron-200);
  --btn-secondary-text: var(--forge-900);
  --btn-secondary-border: var(--iron-300);

  /* Bid Status Badges */
  --bid-draft-bg: var(--iron-100);
  --bid-draft-text: var(--iron-600);
  --bid-review-bg: var(--spark-50);
  --bid-review-text: var(--spark-700);
  --bid-sent-bg: var(--sky-50);
  --bid-sent-text: var(--sky-700);
  --bid-pending-bg: var(--spark-50);
  --bid-pending-text: var(--spark-600);
  --bid-won-bg: var(--green-50);
  --bid-won-text: var(--green-700);
  --bid-lost-bg: var(--red-50);
  --bid-lost-text: var(--red-700);
  --bid-withdrawn-bg: var(--iron-100);
  --bid-withdrawn-text: var(--iron-600);
  --bid-expired-bg: var(--iron-100);
  --bid-expired-text: var(--iron-500);

  /* Follow-Up Urgency */
  --followup-done-bg: var(--green-50);
  --followup-done-text: var(--green-700);
  --followup-due-bg: var(--spark-50);
  --followup-due-text: var(--spark-700);
  --followup-overdue-bg: var(--red-50);
  --followup-overdue-text: var(--red-700);

  /* Touch Type Colors (Activity Log) */
  --touch-phone: var(--sky-500);
  --touch-email: var(--spark-500);
  --touch-meeting: var(--green-500);
  --touch-bid: var(--spark-400);
  --touch-site-visit: var(--iron-500);
  --touch-note: var(--iron-400);

  /* Data Visualization */
  --chart-1: var(--sky-500);
  --chart-2: var(--spark-400);
  --chart-3: var(--green-500);
  --chart-4: var(--red-400);
  --chart-5: var(--iron-500);

  /* Sidebar */
  --sidebar-bg: var(--forge-900);
  --sidebar-text: rgba(255, 255, 255, 0.6);
  --sidebar-text-hover: rgba(255, 255, 255, 0.9);
  --sidebar-text-active: #FFFFFF;
  --sidebar-active-indicator: var(--sky-500);
  --sidebar-icon: rgba(255, 255, 255, 0.4);

  /* ============================================================
     STRUCTURAL — Spacing, Typography, Shadows, etc.
     ============================================================ */

  /* Font Family — uses CSS vars from Next.js font optimization */
  --font-family-sans: var(--font-inter), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-mono: var(--font-jetbrains), 'Fira Code', monospace;

  /* Type Scale */
  --text-3xl: 2rem;       /* 32px — Page titles */
  --text-2xl: 1.75rem;    /* 28px — Section headers */
  --text-xl: 1.5rem;      /* 24px — Card headers */
  --text-lg: 1.25rem;     /* 20px — Sub-headers */
  --text-md: 1rem;        /* 16px — Prominent body */
  --text-base: 0.875rem;  /* 14px — Default body */
  --text-sm: 0.8125rem;   /* 13px — Secondary, table cells */
  --text-xs: 0.6875rem;   /* 11px — Captions, timestamps */

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

  /* Spacing Scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);
  --shadow-glow-spark: 0 0 12px rgba(210, 152, 79, 0.5);
  --shadow-glow-sky: 0 0 0 3px rgba(55, 134, 194, 0.12);

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-base: 0.15s ease;
  --transition-medium: 0.2s ease;
  --transition-slow: 0.3s ease;
  --transition-spring: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --sidebar-width: 220px;
  --sidebar-expanded: 260px;
  --topbar-height: 52px;
  --content-max: 1400px;
  --page-padding: 24px;

  /* Breakpoints (for reference — use in @media queries) */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;

  /* Z-Index */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-sidebar: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 2000;
}

/* ============================================================
   DARK MODE
   Activated by setting data-theme="dark" on <html> or <body>.
   Sidebar remains dark in both modes.
   ============================================================ */

[data-theme="dark"] {
  --text-primary: var(--iron-100);
  --text-secondary: var(--iron-300);
  --text-tertiary: var(--iron-500);

  --bg-page: var(--forge-900);
  --bg-card: var(--forge-800);
  --bg-input: var(--forge-700);
  --bg-hover: var(--forge-700);

  --border-default: var(--forge-600);
  --border-strong: var(--forge-500);

  --btn-secondary-bg: var(--forge-700);
  --btn-secondary-bg-hover: var(--forge-600);
  --btn-secondary-text: var(--iron-100);
  --btn-secondary-border: var(--forge-500);

  /* Badges use slightly different tints in dark mode */
  --bid-draft-bg: var(--forge-700);
  --bid-draft-text: var(--iron-300);
  --bid-sent-bg: rgba(55, 134, 194, 0.15);
  --bid-won-bg: rgba(39, 138, 108, 0.15);
  --bid-lost-bg: rgba(225, 29, 72, 0.15);
}