/* css/abstracts/variables.css */
/* Design System v2 — Indigo Primary, Slate Grays, Premium Flat */

:root {
  /* ── Primary colors (Indigo) ──────────────────────────────────────── */
  --color-primary: #4F46E5;
  --color-primary-light: #6366F1;
  --color-primary-dark: #4338CA;
  --color-primary-soft: #EEF2FF;

  /* ── Premium (gold crown convention) ─────────────────────────────── */
  --color-premium-gold: #F59E0B;
  --color-premium-gold-soft: #FEF3C7;

  /* ── Brand Accent (Original Red — logo, YouTube, brand moments) ─── */
  --color-brand-red: #E41515;
  --color-brand-red-light: #f04848;
  --color-brand-red-dark: #c10d0d;

  /* ── Neutrals (Slate-tinted grays) ────────────────────────────────── */
  --color-white: #fff;
  --color-gray-50: #f8fafc;
  --color-gray-100: #f1f5f9;
  --color-gray-200: #e2e8f0;
  --color-gray-300: #cbd5e1;
  --color-gray-400: #94a3b8;
  --color-gray-500: #64748b;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1e293b;
  --color-gray-900: #0f172a;
  --color-black: #000;

  /* ── State colors ─────────────────────────────────────────────────── */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #059669;
  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #b45309;
  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #b91c1c;
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /* Credit-specific colors */
  --color-credit-positive: var(--color-success-dark);
  --color-credit-negative: var(--color-danger-dark);

  /* ── Status badge colors ──────────────────────────────────────────── */
  --color-status-open: #10b981;
  --color-status-assigned: #3b82f6;
  --color-status-completed: #8b5cf6;
  --color-status-cancelled: #ef4444;
  --color-status-expired: #64748b;

  /* ── Typography ───────────────────────────────────────────────────── */
  --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-display: 'Plus Jakarta Sans', var(--font-family-base);
  --font-body: 'Inter', var(--font-family-base);
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Font Sizes
     Minimum for readable body/description text: --font-size-sm (14px).
     --font-size-xs (12px) is ONLY for: badges, count indicators, timestamps,
     and small labels inside compact UI (e.g., badge text, tab count badges).
     NEVER use xs for paragraphs, descriptions, or help text. */
  --font-size-xs: 0.75rem;    /* 12px — labels/badges only */
  --font-size-sm: 0.875rem;   /* 14px — minimum readable body text */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-base: 1.5;
  --line-height-loose: 1.75;

  /* ── Spacing Scale ────────────────────────────────────────────────── */
  --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 */

  /* ── Border Radius (bumped for premium feel) ──────────────────────── */
  --radius-sm: 0.125rem;   /* 2px */
  --radius-base: 0.25rem;  /* 4px */
  --radius-md: 0.375rem;   /* 6px */
  --radius-lg: 0.625rem;   /* 10px — was 8px */
  --radius-xl: 1rem;       /* 16px — was 12px */
  --radius-2xl: 1.25rem;   /* 20px — was 16px */
  --radius-full: 9999px;   /* Circular */

  /* ── Shadows (Slate-tinted — no pure black) ───────────────────────── */
  --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -1px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(15, 23, 42, 0.08), 0 10px 10px -5px rgba(15, 23, 42, 0.03);
  --shadow-inner: inset 0 2px 4px 0 rgba(15, 23, 42, 0.05);

  /* ── Z-index layers ───────────────────────────────────────────────── */
  --z-index-dropdown: 1000;
  --z-index-sticky: 1020;
  --z-index-fixed: 1030;
  --z-index-modal-backdrop: 1040;
  --z-index-modal: 1050;
  --z-index-popover: 1060;
  --z-index-tooltip: 12050;

  /* ── Breakpoints ──────────────────────────────────────────────────── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ── Transitions ──────────────────────────────────────────────────── */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;

  /* ── Animation easing curves ──────────────────────────────────────── */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* ── RGB helpers for translucent usage ─────────────────────────────── */
  --color-primary-rgb: 79, 70, 229;
  --color-primary-dark-rgb: 67, 56, 202;
  --color-brand-red-rgb: 228, 21, 21;
  --color-success-rgb: 16, 185, 129;
  --color-warning-rgb: 245, 158, 11;
  --color-danger-rgb: 239, 68, 68;
  --color-info-rgb: 59, 130, 246;
  --color-gray-900-rgb: 15, 23, 42;

  /* ── Container ────────────────────────────────────────────────────── */
  --container-max: 1200px;
}

/* ── Slate aliases (backward compat for homepage) ────────────────────── */
:root {
  --color-primary-rgb-v2: 79, 70, 229;
  --color-blue-rgb-v2: 59, 130, 246;
  --color-slate-50: #f8fafc;
  --color-slate-100: #f1f5f9;
  --color-slate-200: #e2e8f0;
  --color-slate-300: #cbd5e1;
  --color-slate-400: #94a3b8;
  --color-slate-500: #64748b;
  --color-slate-600: #475569;
  --color-slate-700: #334155;
  --color-slate-800: #1e293b;
  --color-slate-900: #0f172a;

  --color-brand-blue: #2563eb;
  --color-brand-blue-light: #dbeafe;
  --color-brand-green: #059669;
  --color-brand-green-light: #d1fae5;
  --color-brand-purple: #7c3aed;
  --color-brand-purple-light: #ede9fe;
}

/* ── Surface hierarchy tokens ────────────────────────────────────────── */
:root {
  --surface-indigo-subtle: #f5f3ff;
  --surface-indigo-light: #ede9fe;
  --surface-indigo-medium: #ddd6fe;
  --surface-indigo-dark: #1e1b4b;
  --surface-indigo-deep: #0f0d2e;

  /* Purposeful Density — Surface System (v3) */
  --surface-primary: #ffffff;
  --surface-secondary: #f8f9fb;
  --surface-tertiary: #f1f3f6;
  --surface-elevated: #ffffff;
}

/* ── Purposeful Density — Border System ──────────────────────────────── */
:root {
  --border-default: #e2e5ea;
  --border-subtle: #eceef2;
  --border-strong: #d0d4db;
  --border-active: var(--color-primary);
}

/* ── Page Layout Tokens ──────────────────────────────────────────────── */
:root {
  --page-width-default: 1200px;
  --page-width-narrow: 800px;
  --page-gutter: var(--space-6);          /* 24px */
  --page-gutter-mobile: var(--space-4);   /* 16px */
  --section-gap: var(--space-6);          /* 24px */
  --section-gap-mobile: var(--space-5);   /* 20px */
}

/* ── Layout Tokens ────────────────────────────────────────────────────── */
:root {
  --header-height: 60px;
  --header-height-mobile: 60px;
  --sidebar-width: 256px;
  --sidebar-width-collapsed: 56px;
  --sidebar-width-mobile: 280px;
  --sidebar-transition: 200ms ease;

  /* Sidebar light surface */
  --sidebar-bg: #ffffff;
  --sidebar-bg-hover: rgba(79, 70, 229, 0.06);
  --sidebar-bg-active: rgba(79, 70, 229, 0.1);
  --sidebar-text: #6b7280;
  --sidebar-text-active: #111827;
  --sidebar-text-heading: #9ca3af;
  --sidebar-accent: #6366f1;
  --sidebar-border: #e5e7eb;
}

/* ── Purposeful Density — Typography Additions ───────────────────────── */
:root {
  --font-size-2xs: 0.6875rem;         /* 11px */
  --letter-spacing-tight: -0.025em;   /* Headings */
  --letter-spacing-label: 0.04em;     /* Uppercase section labels */
}

/* ── Night surface tokens (the premium dark "cockpit" surface) ───────── */
/* Origin: the Channel Audit cockpit. Any premium dark moment (landing heroes,
   consoles, final CTAs, upsell blocks) composes THESE tokens so every dark
   surface on the site is the same night. See components/night.css. */
:root {
  --surface-night: #0a0e1a;            /* deep navy base */
  --surface-night-bloom: #182042;      /* indigo bloom at the top of the surface */
  --surface-night-raised: #141a30;     /* cards/wells sitting ON the night surface */
  --night-border: rgba(255, 255, 255, 0.09);
  --night-text: #eef0fb;               /* primary text on night */
  --night-text-dim: rgba(255, 255, 255, 0.55);
  --night-text-faint: rgba(255, 255, 255, 0.38);
  --color-gold-bright: #f5c451;        /* warm gold for eyebrows/accents on night */
  --shadow-cta: 0 8px 24px rgba(79, 70, 229, 0.35); /* indigo lift under primary CTAs on night */
}

/* ── Premium experience tokens ───────────────────────────────────────── */
:root {
  /* Gradients allowed for hierarchy — hero sections, sidebar, premium surfaces */

  /* Glow Effects */
  --glow-primary: 0 0 40px rgba(79, 70, 229, 0.3);
  --glow-success: 0 0 40px rgba(16, 185, 129, 0.3);
  --glow-gold: 0 0 40px rgba(245, 158, 11, 0.3);

  /* Animation Timings */
  --spring-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --smooth-snap: cubic-bezier(0.4, 0, 0.2, 1);

  /* Premium Shadows */
  --shadow-premium: 0 20px 40px rgba(15, 23, 42, 0.1), 0 0 0 1px rgba(15, 23, 42, 0.02);
  --shadow-hover: 0 30px 60px rgba(15, 23, 42, 0.15), 0 0 0 1px rgba(15, 23, 42, 0.03);
  --shadow-glow: 0 0 100px rgba(79, 70, 229, 0.1);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.15);
  --backdrop-blur: 20px;
}