/*
 * UnlimitedModel.com — Design Tokens (single source of truth)
 *
 * Light-first, Stripe-like enterprise system:
 *  - Neutral gray scale on white surfaces
 *  - One brand accent derived from the existing logo wordmark (#1659e8)
 *  - Inter-type font stack (system fallbacks; no external font loading)
 *  - 4px spacing rhythm via --space-*
 *  - Subtle shadows. NO gradients, NO glassmorphism, NO backdrop-filter.
 *
 * Organization:
 *  1. Brand Colors
 *  2. Neutral Gray Scale
 *  3. Background Colors
 *  4. Text Colors
 *  5. Status Colors
 *  6. Border Colors
 *  7. Typography
 *  8. Spacing Scale (4px base)
 *  9. Border Radius
 * 10. Shadows
 * 11. Animation Tokens
 * 12. Focus & Accessibility
 * 13. Layout Tokens
 * 14. Z-Index Scale
 * 15. Legacy Aliases (backward compatibility for pages not yet rewritten)
 */

:root {
  /* ===========================================
     BRAND COLORS — single accent derived from the logo
     =========================================== */
  --accent: #1659e8;            /* Logo wordmark blue */
  --accent-hover: #124ad0;      /* Darker hover shade */
  --accent-active: #0f3eb5;     /* Pressed shade */
  --accent-light: rgba(22, 89, 232, 0.08);   /* Soft accent background */
  --accent-text: #ffffff;       /* Text on accent surfaces */

  /* Brand family aliases (retired gradient stops resolve to accent tones) */
  --brand-primary: var(--accent);
  --brand-start: var(--accent-hover);
  --brand-mid: var(--accent);
  --brand-end: var(--accent-hover);
  --accent-glow: var(--accent);

  /* Retired gradient tokens resolve to flat colors so unrewritten pages
     keep rendering while the dark/gradient system is phased out. */
  --gradient-brand: var(--accent);
  --gradient-subtle: var(--accent-light);
  --gradient-glow: transparent;

  /* ===========================================
     NEUTRAL GRAY SCALE
     =========================================== */
  --gray-0: #ffffff;
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;
  --gray-950: #020617;

  /* ===========================================
     BACKGROUND COLORS — light-first hierarchy
     =========================================== */
  --bg-primary: var(--gray-0);      /* Page background */
  --app-bg: #f8f9fb;                /* Backend application canvas */
  --bg-surface: var(--gray-50);     /* Cards, panels, wells */
  --bg-elevated: var(--gray-0);     /* Elevated surfaces (with shadow) */
  --bg-hover: var(--gray-100);      /* Hover states */
  --bg-active: var(--gray-200);     /* Active states */

  /* RGB triplets for alpha compositing */
  --bg-primary-rgb: 255, 255, 255;
  --bg-surface-rgb: 248, 250, 252;
  --bg-elevated-rgb: 255, 255, 255;

  /* Overlay scrims (modals, drawers) — slate-tinted, not pure black */
  --overlay-scrim: rgba(15, 23, 42, 0.4);
  --overlay-scrim-strong: rgba(15, 23, 42, 0.6);

  /* ===========================================
     TEXT COLORS
     Cool-neutral ramp: primary for headings and values, secondary for
     descriptive copy, muted strictly for hints / placeholders / labels.
     =========================================== */
  --text-primary: #101828;
  --text-secondary: #667085;
  --text-muted: #98a2b3;
  --text-subtle: #b6bdc9;
  --text-inverse: #ffffff;

  /* ===========================================
     STATUS COLORS
     =========================================== */
  --success: #16a34a;
  --success-light: #22c55e;
  --success-bg: rgba(22, 163, 74, 0.08);
  --success-border: rgba(22, 163, 74, 0.25);
  /* Darker status shades for text sitting on the matching tinted badge
     surface (the base shades fall under WCAG AA there). */
  --success-strong: #15803d;

  --warning: #d97706;
  --warning-light: #f59e0b;
  --warning-bg: rgba(217, 119, 6, 0.08);
  --warning-border: rgba(217, 119, 6, 0.25);
  --warning-strong: #b45309;

  --error: #dc2626;
  --error-light: #ef4444;
  --error-bg: rgba(220, 38, 38, 0.08);
  --error-border: rgba(220, 38, 38, 0.25);
  --error-strong: #b91c1c;

  --info: #2563eb;
  --info-light: #3b82f6;
  --info-bg: rgba(37, 99, 235, 0.08);
  --info-border: rgba(37, 99, 235, 0.25);

  /* ===========================================
     BORDER COLORS
     =========================================== */
  --border-subtle: #eef0f4;     /* hairline rules inside a card */
  --border-default: #e4e7ec;    /* every card / control / table border */
  --border-strong: var(--gray-300);
  --border-soft: #eef0f4;
  --border-focus: var(--accent);

  /* Retired glass border aliases resolve to solid borders */
  --border-glass: var(--border-default);
  --border-glass-strong: var(--border-strong);

  /* ===========================================
     TYPOGRAPHY TOKENS
     =========================================== */

  /* Font Families — Inter-type enterprise stack.
     No webfonts are loaded; the stack degrades gracefully to local
     system fonts (VAL-DS-008: zero external requests). */
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, 'Liberation Mono', monospace;

  /* Font Sizes */
  --text-xs: 0.75rem;          /* 12px */
  --text-sm: 0.8125rem;        /* 13px */
  --text-base: 0.875rem;       /* 14px */
  --text-md: 0.9375rem;        /* 15px */
  --text-lg: 1rem;             /* 16px */
  --text-xl: 1.125rem;         /* 18px */
  --text-2xl: 1.25rem;         /* 20px */
  --text-3xl: 1.5rem;          /* 24px */
  --text-4xl: 1.75rem;         /* 28px */
  --text-5xl: 2.25rem;         /* 36px */
  --text-6xl: 3rem;            /* 48px */

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

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

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

  /* ===========================================
     SPACING SCALE (4px base rhythm)
     =========================================== */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-3-5: 14px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;
  --space-32: 128px;
  --space-36: 144px;
  --space-40: 160px;
  --space-44: 176px;
  --space-48: 192px;
  --space-52: 208px;
  --space-56: 224px;
  --space-60: 240px;
  --space-64: 256px;
  --space-72: 288px;
  --space-80: 320px;
  --space-96: 384px;

  /* ===========================================
     BORDER RADIUS
     =========================================== */
  --radius-none: 0;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;

  /* Semantic radii — the ONLY radii new UI should reference.
     controls + nav items 8px · cards 12px · large modals 14px · pills 999px */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-modal: 14px;
  --radius-pill: 999px;

  /* ===========================================
     SHADOWS — subtle, light-surface depth
     =========================================== */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  /* The one card elevation used by every backend surface. */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.1), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 12px 16px -4px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 20px 24px -4px rgba(15, 23, 42, 0.08), 0 8px 8px -4px rgba(15, 23, 42, 0.04);
  --shadow-2xl: 0 32px 64px -12px rgba(15, 23, 42, 0.14);
  --shadow-inner: inset 0 2px 4px rgba(15, 23, 42, 0.05);

  /* Retired glow shadows resolve to subtle accent-tinted rings */
  --shadow-glow-sm: 0 0 0 3px rgba(22, 89, 232, 0.08);
  --shadow-glow: 0 0 0 4px rgba(22, 89, 232, 0.12);
  --shadow-glow-lg: 0 0 0 6px rgba(22, 89, 232, 0.14);
  --shadow-glow-teal: 0 0 0 4px rgba(22, 89, 232, 0.12);

  /* Retired glass tokens resolve to solid surfaces */
  --glass-bg: var(--bg-primary);
  --glass-bg-light: var(--bg-surface);
  --glass-border: var(--border-default);
  --glass-border-strong: var(--border-strong);

  /* ===========================================
     ANIMATION TOKENS
     =========================================== */

  /* Durations */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --duration-slowest: 700ms;

  /* Easing functions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out-in: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Combined timing tokens */
  --transition-fast: var(--duration-fast) var(--ease-out);
  --transition-base: var(--duration-normal) var(--ease-out);
  --transition-slow: var(--duration-slow) var(--ease-out);
  --transition-slower: var(--duration-slower) var(--ease-out);
  --transition-bounce: var(--duration-normal) var(--ease-bounce);

  /* ===========================================
     FOCUS & ACCESSIBILITY
     =========================================== */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-style: solid;
  --focus-ring-color: rgba(22, 89, 232, 0.4);
  --focus-ring: 0 0 0 3px var(--focus-ring-color);
  --focus-ring-inset: inset 0 0 0 3px var(--focus-ring-color);

  /* ===========================================
     LAYOUT TOKENS
     =========================================== */
  --sidebar-width: 232px;         /* backend app sidebar (user + admin) */
  --sidebar-collapsed-width: 64px;
  --topbar-height: 60px;          /* backend app topbar */
  --header-height: 68px;          /* public marketing navbar */
  --page-pad: 24px;               /* backend page padding (28 max on desktop) */
  --stack-gap: 24px;              /* vertical gap between page sections */
  --grid-gap: 16px;               /* gap between cards in a grid */
  --content-max-width: 1240px;
  --content-narrow-width: 720px;

  /* ===========================================
     MARKETING TOKENS — public site design system
     Aliases over the core scale so the marketing
     pages and the app stay one visual system.
     =========================================== */
  --brand: var(--accent);             /* UnlimitedModel blue */
  --brand-hover: var(--accent-hover);
  --brand-active: var(--accent-active);
  --brand-soft: var(--accent-light);
  --background: var(--gray-0);        /* #FFFFFF */
  --background-soft: var(--gray-50);  /* #F8FAFC section tint */
  --marketing-container: 1240px;
  --marketing-section-pad: clamp(64px, 8vw, 104px);
  --marketing-radius-sm: 8px;
  --marketing-radius-md: 12px;
  --marketing-radius-lg: 16px;
  --code-surface: #0f172a;            /* dark code card */
  --code-surface-header: #1e293b;
  --code-fg: #e5e7eb;
  --code-muted: #94a3b8;

  /* ===========================================
     Z-INDEX SCALE
     =========================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ===========================================
     LEGACY ALIASES (pages not yet rewritten keep resolving)
     =========================================== */
  --bg: var(--bg-primary);
  --text: var(--text-primary);
  --ui-bg: var(--bg-primary);
  --ui-surface: var(--bg-surface);
  --ui-border: var(--border-default);
  --ui-text: var(--text-primary);
  --ui-muted: var(--text-muted);
  --surface: var(--bg-surface);
  --surface-elevated: var(--bg-elevated);
  --surface-2: var(--bg-hover);
  --surface-hover: var(--bg-hover);
  --border: var(--border-default);
  --border-soft: var(--border-subtle);
  --radius: var(--radius-md);
  --shadow: var(--shadow-sm);
  --shadow-dropdown: var(--shadow-lg);
  --font-sans: var(--font-body);

  /* Aliases still referenced by the extracted marketing utility classes
     (.is-inline-*) and the code-block surfaces. They resolve to real tokens
     so no legacy palette survives on its own. */
  --blue-50: #eff6ff;
  --blue-100: #dbeafe;
  --blue-400: var(--accent-light);
  --blue-500: var(--accent);
  --blue-600: var(--accent-hover);
  --blue-700: var(--accent-active);
  --code-bg: var(--code-surface);
  --code-border: rgba(255, 255, 255, 0.14);
  --danger: var(--error);
  --danger-bg: var(--error-bg);
  /* Surface alias used by theme.css component blocks (disabled inputs,
     card footers, hover states, skeleton shimmer). */
  --workspace-alt: var(--bg-surface);
  --sidebar-muted: var(--gray-400);
  --transition-normal: var(--transition-base);
}

/* ===========================================
   REDUCED MOTION SUPPORT
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
    --duration-slowest: 0ms;
    --transition-fast: 0ms;
    --transition-base: 0ms;
    --transition-slow: 0ms;
    --transition-slower: 0ms;
    --transition-bounce: 0ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================
   HIGH CONTRAST MODE SUPPORT
   =========================================== */
@media (prefers-contrast: high) {
  :root {
    --border-subtle: var(--gray-400);
    --border-default: var(--gray-500);
    --border-strong: var(--gray-600);
    --text-muted: var(--gray-700);
    --text-subtle: var(--gray-600);
    --focus-ring-color: var(--accent-active);
    --focus-ring-offset: 3px;
  }
}