/* ============================================================
   CIVALENT DESIGN TOKENS
   Product: Civalent — Regulatory Intelligence for Construction

   Brand: Indigo + Copper (LOCKED)
   Style: Style C "Stripe" — premium, gradients, layered shadows
   Typography: Inter (UI) + JetBrains Mono (codes/data)

   Three palette options (Indigo+Copper is primary):
     A. Indigo + Copper (PRIMARY — LOCKED)
     B. Teal + Violet (alternative)
     C. Slate + Amber (alternative)

   Dark-first design. Light mode overrides via [data-theme="light"].
   WCAG AA compliant: 4.5:1 text, 3:1 large text / UI elements.
   ============================================================ */

/* ----------------------------------------------------------
   SHARED FOUNDATIONS
   ---------------------------------------------------------- */

:root {
  /* Typography Scale */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.875rem;  /* 14px */
  --text-md: 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 — editorial display */
  --text-6xl: 3.75rem;    /* 60px — hero display */

  --leading-tight: 1.15;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --tracking-tighter: -0.04em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-mono: 0.05em;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* Spacing */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;  /* 2px */
  --space-1: 0.25rem;     /* 4px */
  --space-1-5: 0.375rem;  /* 6px */
  --space-2: 0.5rem;      /* 8px */
  --space-2-5: 0.625rem;  /* 10px */
  --space-3: 0.75rem;     /* 12px */
  --space-3-5: 0.875rem;  /* 14px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-7: 1.75rem;     /* 28px */
  --space-8: 2rem;        /* 32px */
  --space-9: 2.25rem;     /* 36px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */
  --space-14: 3.5rem;     /* 56px */
  --space-16: 4rem;       /* 64px */
  --space-20: 5rem;       /* 80px */
  --space-24: 6rem;       /* 96px */
  --space-32: 8rem;       /* 128px */

  /* Radii */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  --radius-3xl: 1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* Shadows — Style C layered depth (dark mode defaults) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-glow-primary: 0 0 24px rgba(212, 132, 94, 0.15);
  --shadow-glow-secondary: 0 0 24px rgba(134, 144, 248, 0.15);
  --shadow-button-inset: inset 0 1px 0 rgba(255, 255, 255, 0.15);

  /* Touch targets (field-ready: 56px minimum) */
  --touch-min: 3.5rem;        /* 56px */
  --touch-comfortable: 3rem;  /* 48px — desktop */

  /* Transitions & Animation */
  --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-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-instant: 50ms;
  --duration-fast: 100ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --duration-slowest: 700ms;

  /* Borders */
  --border-width: 1px;
  --border-width-2: 2px;
  --border-width-3: 3px;

  /* Style C Gradients (dark mode defaults — overridden in light) */
  --gradient-primary: linear-gradient(135deg, #d4845e 0%, #e29a78 50%, #d4845e 100%);
  --gradient-hero: linear-gradient(135deg, #d4845e 0%, #8690f8 100%);
  --gradient-surface: linear-gradient(180deg, #10152b 0%, #0b0f22 100%);
  --gradient-border: linear-gradient(135deg, #d4845e 0%, #8690f8 100%);
  --gradient-skeleton: linear-gradient(90deg, transparent 0%, #1b223e 50%, transparent 100%);

  /* Z-Index Scale */
  --z-base: 0;
  --z-dropdown: 50;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
  --z-tooltip: 500;

  /* Layout Widths */
  --page-max: 1120px;
  --page-wide: 1440px;
  --sidebar-width: 240px;
  --sidebar-collapsed: 56px;
  --topbar-height: 56px;

  /* Civalent Logo Sizing */
  --logo-favicon: 32px;
  --logo-nav: 120px;
  --logo-hero: 280px;
  --logo-icon-nav: 24px;
  --logo-icon-hero: 48px;
  --logo-monogram-sm: 28px;
  --logo-monogram-md: 48px;
  --logo-monogram-lg: 72px;

  /* Component Tokens */
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --input-height: 40px;
  --search-height: 52px;
  --badge-height: 22px;
  --avatar-sm: 28px;
  --avatar-md: 32px;
  --avatar-lg: 40px;
  --avatar-xl: 56px;
  --card-padding: var(--space-6);
  --card-radius: var(--radius-2xl);
  --focus-ring-width: 3px;
  --focus-ring-offset: 0px;

  /* Skeleton Animation */
  --skeleton-duration: 1.5s;
}


/* ----------------------------------------------------------
   PALETTE A: INDIGO + COPPER (Primary — User Preference)
   "The regulatory standard — established, trusted"
   Deep indigo = institutional depth. Copper = earned authority.
   ---------------------------------------------------------- */

[data-palette="indigo-copper"] {
  /* Backgrounds — refined with slightly warmer indigo tones */
  --bg-root: #07091a;
  --bg-surface: #0b0f22;
  --bg-elevated: #10152b;
  --bg-overlay: #161c34;
  --bg-hover: #1b223e;
  --bg-active: #222a4c;

  /* Borders */
  --border-default: #1d2548;
  --border-subtle: #141a38;
  --border-strong: #2c3462;
  --border-focus: #d4845e;

  /* Primary accent — Copper (refined: slightly warmer, more saturated) */
  --accent-primary: #d4845e;
  --accent-primary-hover: #e29a78;
  --accent-primary-muted: #5a3020;
  --accent-primary-subtle: #3a1f14;
  --accent-primary-text: #07091a;

  /* Secondary accent — Soft indigo / periwinkle */
  --accent-secondary: #8690f8;
  --accent-secondary-hover: #a8b0fc;
  --accent-secondary-muted: #2e2c80;
  --accent-secondary-subtle: #1c1a4e;
  --accent-secondary-text: #07091a;

  /* Text */
  --text-primary: #e6ebf5;
  --text-secondary: #8892b0;
  --text-muted: #586380;
  --text-inverse: #07091a;
  --text-link: #d4845e;
  --text-link-hover: #e29a78;

  /* Status — Compliance */
  --status-compliant: #34d399;
  --status-compliant-bg: #04261a;
  --status-compliant-border: #065f38;
  --status-compliant-text: #6ee7b7;

  /* Status — Warning */
  --status-warning: #fbbf24;
  --status-warning-bg: #2d1f04;
  --status-warning-border: #78560d;
  --status-warning-text: #fcd34d;

  /* Status — Violation */
  --status-violation: #f87171;
  --status-violation-bg: #2d0808;
  --status-violation-border: #7f1d1d;
  --status-violation-text: #fca5a5;

  /* Status — Neutral */
  --status-neutral: #586380;
  --status-neutral-bg: #10152b;
  --status-neutral-border: #2c3462;
  --status-neutral-text: #8892b0;

  /* Status — Info */
  --status-info: #60a5fa;
  --status-info-bg: #0a1a35;
  --status-info-border: #1e3a5f;
  --status-info-text: #93c5fd;

  --scrollbar-thumb: #2c3462;
  --scrollbar-track: #0b0f22;
}

/* Palette A — Light Mode Override */
[data-palette="indigo-copper"][data-theme="light"] {
  --bg-root: #f7f8fc;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #eceef6;
  --bg-hover: #dde0ed;
  --bg-active: #c5cade;

  --border-default: #dde0ed;
  --border-subtle: #eceef6;
  --border-strong: #c5cade;
  --border-focus: #b45e3a;

  --accent-primary: #b45e3a;
  --accent-primary-hover: #9a4f30;
  --accent-primary-muted: #fde8db;
  --accent-primary-subtle: #fef5ef;
  --accent-primary-text: #ffffff;

  --accent-secondary: #4f46e5;
  --accent-secondary-hover: #4338ca;
  --accent-secondary-muted: #e0e7ff;
  --accent-secondary-subtle: #eef2ff;
  --accent-secondary-text: #ffffff;

  --text-primary: #0f1629;
  --text-secondary: #4a5066;
  --text-muted: #8892b0;
  --text-inverse: #ffffff;
  --text-link: #b45e3a;
  --text-link-hover: #9a4f30;

  --status-compliant: #059669;
  --status-compliant-bg: #ecfdf5;
  --status-compliant-border: #a7f3d0;
  --status-compliant-text: #065f46;

  --status-warning: #d97706;
  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;
  --status-warning-text: #92400e;

  --status-violation: #dc2626;
  --status-violation-bg: #fef2f2;
  --status-violation-border: #fecaca;
  --status-violation-text: #991b1b;

  --status-neutral: #64748b;
  --status-neutral-bg: #f7f8fc;
  --status-neutral-border: #dde0ed;
  --status-neutral-text: #4a5066;

  --status-info: #2563eb;
  --status-info-bg: #eff6ff;
  --status-info-border: #bfdbfe;
  --status-info-text: #1e40af;

  /* Light mode shadows — Style C */
  --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 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-inner: inset 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-glow-primary: 0 0 24px rgba(180, 94, 58, 0.1);
  --shadow-glow-secondary: 0 0 24px rgba(79, 70, 229, 0.1);
  --shadow-button-inset: inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* Light mode gradients */
  --gradient-primary: linear-gradient(135deg, #b45e3a 0%, #d4845e 50%, #b45e3a 100%);
  --gradient-hero: linear-gradient(135deg, #b45e3a 0%, #4f46e5 100%);
  --gradient-surface: linear-gradient(180deg, #ffffff 0%, #f7f8fc 100%);
  --gradient-border: linear-gradient(135deg, #b45e3a 0%, #4f46e5 100%);
  --gradient-skeleton: linear-gradient(90deg, transparent 0%, #dde0ed 50%, transparent 100%);

  --scrollbar-thumb: #c5cade;
  --scrollbar-track: #eceef6;
}


/* ----------------------------------------------------------
   PALETTE B: TEAL + VIOLET (Alternative)
   "Regulatory precision meets modern intelligence"
   Teal = compliance/trust. Violet = intelligence/insight.
   ---------------------------------------------------------- */

[data-palette="teal-violet"] {
  --bg-root: #0a0d12;
  --bg-surface: #0f1318;
  --bg-elevated: #151a21;
  --bg-overlay: #1a2029;
  --bg-hover: #1e2530;
  --bg-active: #232b38;

  --border-default: #1e2736;
  --border-subtle: #171e2a;
  --border-strong: #2a3548;
  --border-focus: #2dd4bf;

  --accent-primary: #2dd4bf;
  --accent-primary-hover: #5eead4;
  --accent-primary-muted: #134e4a;
  --accent-primary-subtle: #0d3330;
  --accent-primary-text: #0a0d12;

  --accent-secondary: #a78bfa;
  --accent-secondary-hover: #c4b5fd;
  --accent-secondary-muted: #3b2e6e;
  --accent-secondary-subtle: #251e45;
  --accent-secondary-text: #0a0d12;

  --text-primary: #edf2f7;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0a0d12;
  --text-link: #2dd4bf;
  --text-link-hover: #5eead4;

  --status-compliant: #34d399;
  --status-compliant-bg: #052e1c;
  --status-compliant-border: #065f38;
  --status-compliant-text: #6ee7b7;

  --status-warning: #fbbf24;
  --status-warning-bg: #2d1f04;
  --status-warning-border: #78560d;
  --status-warning-text: #fcd34d;

  --status-violation: #f87171;
  --status-violation-bg: #2d0808;
  --status-violation-border: #7f1d1d;
  --status-violation-text: #fca5a5;

  --status-neutral: #64748b;
  --status-neutral-bg: #1a1f27;
  --status-neutral-border: #334155;
  --status-neutral-text: #94a3b8;

  --status-info: #38bdf8;
  --status-info-bg: #082237;
  --status-info-border: #0c4a6e;
  --status-info-text: #7dd3fc;

  --scrollbar-thumb: #2a3548;
  --scrollbar-track: #0f1318;
}

/* Palette B — Light Mode Override */
[data-palette="teal-violet"][data-theme="light"] {
  --bg-root: #f8fafc;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #f1f5f9;
  --bg-hover: #e2e8f0;
  --bg-active: #cbd5e1;

  --border-default: #e2e8f0;
  --border-subtle: #f1f5f9;
  --border-strong: #cbd5e1;
  --border-focus: #0d9488;

  --accent-primary: #0d9488;
  --accent-primary-hover: #0f766e;
  --accent-primary-muted: #ccfbf1;
  --accent-primary-subtle: #f0fdfa;
  --accent-primary-text: #ffffff;

  --accent-secondary: #7c3aed;
  --accent-secondary-hover: #6d28d9;
  --accent-secondary-muted: #ede9fe;
  --accent-secondary-subtle: #f5f3ff;
  --accent-secondary-text: #ffffff;

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --text-link: #0d9488;
  --text-link-hover: #0f766e;

  --status-compliant: #059669;
  --status-compliant-bg: #ecfdf5;
  --status-compliant-border: #a7f3d0;
  --status-compliant-text: #065f46;

  --status-warning: #d97706;
  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;
  --status-warning-text: #92400e;

  --status-violation: #dc2626;
  --status-violation-bg: #fef2f2;
  --status-violation-border: #fecaca;
  --status-violation-text: #991b1b;

  --status-neutral: #64748b;
  --status-neutral-bg: #f8fafc;
  --status-neutral-border: #e2e8f0;
  --status-neutral-text: #475569;

  --status-info: #0284c7;
  --status-info-bg: #f0f9ff;
  --status-info-border: #bae6fd;
  --status-info-text: #075985;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  --scrollbar-thumb: #cbd5e1;
  --scrollbar-track: #f1f5f9;
}


/* ----------------------------------------------------------
   PALETTE C: SLATE + AMBER (Alternative)
   "Blueprint-grade tools for the built world"
   Slate = structural authority. Amber = actionable signal.
   ---------------------------------------------------------- */

[data-palette="slate-amber"] {
  --bg-root: #09090b;
  --bg-surface: #111114;
  --bg-elevated: #18181b;
  --bg-overlay: #1f1f23;
  --bg-hover: #27272a;
  --bg-active: #2e2e33;

  --border-default: #27272a;
  --border-subtle: #1c1c1f;
  --border-strong: #3f3f46;
  --border-focus: #f59e0b;

  --accent-primary: #f59e0b;
  --accent-primary-hover: #fbbf24;
  --accent-primary-muted: #5c3a08;
  --accent-primary-subtle: #3d2506;
  --accent-primary-text: #09090b;

  --accent-secondary: #818cf8;
  --accent-secondary-hover: #a5b4fc;
  --accent-secondary-muted: #312e81;
  --accent-secondary-subtle: #1e1b4b;
  --accent-secondary-text: #09090b;

  --text-primary: #fafafa;
  --text-secondary: #a1a1aa;
  --text-muted: #71717a;
  --text-inverse: #09090b;
  --text-link: #f59e0b;
  --text-link-hover: #fbbf24;

  --status-compliant: #22c55e;
  --status-compliant-bg: #052e16;
  --status-compliant-border: #166534;
  --status-compliant-text: #86efac;

  --status-warning: #eab308;
  --status-warning-bg: #2d2305;
  --status-warning-border: #854d0e;
  --status-warning-text: #fde047;

  --status-violation: #ef4444;
  --status-violation-bg: #2d0606;
  --status-violation-border: #991b1b;
  --status-violation-text: #fca5a5;

  --status-neutral: #71717a;
  --status-neutral-bg: #1a1a1d;
  --status-neutral-border: #3f3f46;
  --status-neutral-text: #a1a1aa;

  --status-info: #38bdf8;
  --status-info-bg: #082237;
  --status-info-border: #0c4a6e;
  --status-info-text: #7dd3fc;

  --scrollbar-thumb: #3f3f46;
  --scrollbar-track: #111114;
}

/* Palette C — Light Mode Override */
[data-palette="slate-amber"][data-theme="light"] {
  --bg-root: #fafafa;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-overlay: #f4f4f5;
  --bg-hover: #e4e4e7;
  --bg-active: #d4d4d8;

  --border-default: #e4e4e7;
  --border-subtle: #f4f4f5;
  --border-strong: #d4d4d8;
  --border-focus: #d97706;

  --accent-primary: #d97706;
  --accent-primary-hover: #b45309;
  --accent-primary-muted: #fef3c7;
  --accent-primary-subtle: #fffbeb;
  --accent-primary-text: #ffffff;

  --accent-secondary: #4f46e5;
  --accent-secondary-hover: #4338ca;
  --accent-secondary-muted: #e0e7ff;
  --accent-secondary-subtle: #eef2ff;
  --accent-secondary-text: #ffffff;

  --text-primary: #09090b;
  --text-secondary: #52525b;
  --text-muted: #a1a1aa;
  --text-inverse: #fafafa;
  --text-link: #d97706;
  --text-link-hover: #b45309;

  --status-compliant: #16a34a;
  --status-compliant-bg: #f0fdf4;
  --status-compliant-border: #bbf7d0;
  --status-compliant-text: #166534;

  --status-warning: #ca8a04;
  --status-warning-bg: #fefce8;
  --status-warning-border: #fef08a;
  --status-warning-text: #854d0e;

  --status-violation: #dc2626;
  --status-violation-bg: #fef2f2;
  --status-violation-border: #fecaca;
  --status-violation-text: #991b1b;

  --status-neutral: #71717a;
  --status-neutral-bg: #fafafa;
  --status-neutral-border: #e4e4e7;
  --status-neutral-text: #52525b;

  --status-info: #0284c7;
  --status-info-bg: #f0f9ff;
  --status-info-border: #bae6fd;
  --status-info-text: #075985;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

  --scrollbar-thumb: #d4d4d8;
  --scrollbar-track: #f4f4f5;
}