/* ==========================================================================
   SolidW Design System Tokens - Pastel Dream Edition
   Brand Color Palette: user-supplied pastel set (pure/soft white, powder
   blue, periwinkle, lavender, cotton pink, soft blush) + one deeper
   indigo-violet derived from the same family for button/text contrast,
   since the pastels themselves are too light to use as solid fills
   behind white text.
   ========================================================================== */

:root {
  /* ---- Exact user palette ---- */
  --color-pastel-bg: #FCFBFC;         /* Pure background */
  --color-pastel-bg-soft: #F7F4F7;    /* Soft white */
  --color-pastel-powder-blue: #C1C1F8;
  --color-pastel-periwinkle: #91A4FA;
  --color-pastel-lavender: #D5CCFC;
  --color-pastel-pink: #F3C0EA;
  --color-pastel-blush: #F8D8EE;

  /* ---- Derived deep accent (for buttons/links/text needing contrast) ---- */
  --color-brand-cyan: var(--color-pastel-periwinkle);
  --color-brand-primary: #4C5FD6;       /* matte darker indigo-blue */
  --color-brand-primary-hover: #3E4FBD;
  --color-brand-deep: #4B3AA8;
  --color-brand-navy: #24223B;
  --color-brand-navy-dark: #17162A;
  --color-brand-navy-light: #4B4A66;

  /* Extended Palette Scales */
  --color-cyan-50: #F5F6FE;
  --color-cyan-100: #EBEDFD;
  --color-cyan-200: var(--color-pastel-powder-blue);
  --color-cyan-500: var(--color-pastel-periwinkle);
  --color-cyan-600: #6D5AE0;

  --color-blue-50: #F5F5FE;
  --color-blue-100: #ECEBFD;
  --color-blue-200: var(--color-pastel-lavender);
  --color-blue-500: #6D5AE0;
  --color-blue-600: #5A48C9;
  --color-blue-700: #4B3AA8;

  --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;

  /* Semantic Application Surfaces — pure/soft white, no more Arctic blue tint */
  --bg-app: var(--color-pastel-bg);
  --bg-surface: #FFFFFF;
  --bg-surface-subtle: var(--color-pastel-bg-soft);
  --bg-surface-elevated: #FFFFFF;
  --bg-dark-surface: #24223B;
  --bg-dark-elevated: #4B4A66;

  /* Typography Colors */
  --text-primary: #201F33;
  --text-secondary: #5C5A75;
  --text-muted: #7A7891;
  --text-inverse: #FFFFFF;
  --text-brand: #6D5AE0;

  /* Border Tokens */
  --border-subtle: rgba(36, 34, 59, 0.08);
  --border-medium: rgba(36, 34, 59, 0.14);
  --border-strong: rgba(36, 34, 59, 0.22);
  --border-brand: rgba(109, 90, 224, 0.28);
  --border-cyan: rgba(145, 164, 250, 0.35);

  /* ---- Pastel gradients — the palette-in-motion for hero/CTA/feature washes ---- */
  --gradient-pastel: linear-gradient(135deg, var(--color-pastel-periwinkle) 0%, var(--color-pastel-powder-blue) 33%, var(--color-pastel-lavender) 66%, var(--color-pastel-pink) 100%);
  --gradient-pastel-soft: linear-gradient(135deg, color-mix(in srgb, var(--color-pastel-periwinkle) 45%, white) 0%, color-mix(in srgb, var(--color-pastel-lavender) 45%, white) 50%, color-mix(in srgb, var(--color-pastel-blush) 45%, white) 100%);
  --gradient-pastel-solid: linear-gradient(120deg, var(--color-pastel-periwinkle) 0%, var(--color-brand-primary) 100%);

  /* Glassmorphism & Liquid Overlay Specs */
  --glass-surface: rgba(255, 255, 255, 0.78);
  --glass-surface-dark: rgba(36, 34, 59, 0.88);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: blur(20px) saturate(180%);
  --glass-shadow: 0 12px 40px 0 rgba(36, 34, 59, 0.06);

  /* Multi-Layered Depth Shadows */
  --shadow-xs: 0 1px 2px 0 rgba(36, 34, 59, 0.04);
  --shadow-sm: 0 2px 8px -2px rgba(36, 34, 59, 0.06);
  --shadow-md: 0 12px 28px -6px rgba(36, 34, 59, 0.08);
  --shadow-lg: 0 24px 48px -12px rgba(36, 34, 59, 0.12);
  --shadow-xl: 0 40px 80px -20px rgba(36, 34, 59, 0.16);
  --shadow-cyan-glow: 0 8px 30px rgba(145, 164, 250, 0.35);
  --shadow-blue-glow: 0 8px 30px rgba(109, 90, 224, 0.25);

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Spacing Grid (4px Base Rhythm) */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* Typography System */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Transitions */
  --ease-out-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease-out-smooth);
  --transition-normal: 250ms var(--ease-out-smooth);
  --transition-slow: 400ms var(--ease-out-smooth);

  /* ========================================================================
     COMPATIBILITY LAYER
     base.css / components.css / dashboard.css / auth.css / admin.css /
     liquid-glass.css were written against an older "gold / ink / paper"
     token set that this file no longer defined — every var() below was
     previously resolving to nothing. Every alias here maps to a REAL
     Arctic Depths value. No new colors are introduced; "gold" tokens are
     redirected to the brand blue/cyan since gold isn't in the palette.
     ======================================================================== */

  /* Core aliases */
  --color-primary: var(--color-brand-primary);
  --color-secondary: var(--color-brand-deep);
  --color-accent: var(--color-brand-cyan);
  --color-accent-hover: var(--color-brand-primary-hover);
  --color-accent-line: rgba(145, 164, 250, 0.35);
  --gradient-accent: var(--gradient-pastel-solid);

  /* Links — was previously undefined, which silently made every <a> in the
     app inherit surrounding text color (invisible-looking links) */
  --color-link: var(--color-brand-primary);
  --color-link-hover: var(--color-brand-primary-hover);

  --color-bg: var(--bg-app);
  --color-paper: var(--bg-app);
  --color-surface: var(--bg-surface);
  --color-surface-alt: var(--bg-surface-subtle);
  --color-white: #FFFFFF;

  --color-border: var(--border-subtle);
  --color-border-strong: var(--border-strong);

  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-text-faint: var(--text-muted);
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.7);

  /* "Ink" / navy family (dark surfaces + dark text) */
  --color-ink: var(--color-brand-navy);
  --color-ink-hover: var(--color-brand-navy-dark);
  --color-ink-soft: var(--color-brand-navy-light);
  --color-navy-1: var(--color-brand-navy);
  --color-navy-2: var(--color-brand-navy-dark);
  --color-navy-text: var(--text-inverse);
  --color-navy-text-muted: rgba(255, 255, 255, 0.72);
  --color-navy-border: rgba(36, 34, 59, 0.16);
  --color-navy-glass: rgba(36, 34, 59, 0.88);

  /* "Gold" family → redirected to the pastel gradient (no gold in the new palette) */
  --color-gold: var(--color-brand-primary);
  --color-gold-hover: var(--color-brand-primary-hover);
  --color-gold-soft: rgba(109, 90, 224, 0.12);
  --color-gold-line: rgba(109, 90, 224, 0.28);
  --hairline-gold: rgba(109, 90, 224, 0.35);
  --gold-edge: rgba(109, 90, 224, 0.4);
  --gradient-gold: var(--gradient-pastel-solid);
  --gradient-ink: linear-gradient(135deg, var(--color-brand-navy), var(--color-brand-navy-dark));
  --gradient-navy: linear-gradient(160deg, var(--color-brand-navy-dark), var(--color-brand-navy));
  --shadow-glow-gold: var(--shadow-blue-glow);
  --shadow-glow-primary: var(--shadow-blue-glow);
  --shadow-glow-accent: var(--shadow-cyan-glow);

  /* Status colors — muted/desaturated so they never fight the brand palette */
  --color-danger: #E5342E;
  --error: var(--color-danger);
  --color-success: #1F8B5C;
  --success: var(--color-success);
  --color-warning: #B9822E;
  --warning: var(--color-warning);

  /* Typography scale */
  --font-body: var(--font-sans);
  --font-heading: var(--font-sans);
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 2.75rem;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --lh-tight: 1.15;
  --lh-normal: 1.5;
  --lh-loose: 1.7;

  /* Motion aliases */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-glass: 500ms;
  --ease-standard: var(--ease-out-smooth);
  --ease-glass: var(--ease-out-smooth);

  /* Glass system aliases */
  --glass-blur-sm: blur(12px) saturate(160%);
  --glass-blur-lg: blur(28px) saturate(200%);
  --glass-saturate: saturate(180%);
  --glass-light-bg: rgba(255, 255, 255, 0.72);
  --glass-light-border: rgba(255, 255, 255, 0.6);
  --glass-light-highlight: rgba(255, 255, 255, 0.9);
  --glass-dark-bg: rgba(36, 34, 59, 0.85);
  --glass-dark-border: rgba(255, 255, 255, 0.12);
  --glass-dark-highlight: rgba(255, 255, 255, 0.18);
  --sheen-light: rgba(255, 255, 255, 0.5);
  --sheen-dim: rgba(255, 255, 255, 0.15);
  --sheen-shadow: rgba(15, 35, 48, 0.25);

  /* Layout */
  --container-max: 1240px;
  --container-narrow: 760px;
  --header-height: 72px;
  --sidebar-width: 264px;
  --sidebar-width-collapsed: 76px;
  --space-7: 28px;

  /* Z-index scale */
  --z-dropdown: 500;
  --z-sidebar: 800;
  --z-modal: 1200;
  --z-toast: 1400;

  /* ========================================================================
     PREMIUM PASS — soft canvas + ambient accent glows
     Canvas is a hair off pure white so cards read as raised, not just
     outlined. Accent glows are decorative-only (background auras, focus
     rings, empty-state art) — pulled from the gradient-orb reference.
     Never used as solid fills on text or primary UI chrome.
     ======================================================================== */
  --bg-canvas: var(--color-pastel-bg-soft);
  --bg-canvas-alt: #F1EEF9;

  --accent-glow-blue: var(--color-pastel-powder-blue);
  --accent-glow-violet: var(--color-pastel-lavender);
  --accent-glow-pink: var(--color-pastel-pink);

  --shadow-soft-xs: 0 1px 2px rgba(36, 34, 59, 0.05);
  --shadow-soft-sm: 0 4px 12px -4px rgba(36, 34, 59, 0.08), 0 1px 2px rgba(36, 34, 59, 0.04);
  --shadow-soft-md: 0 10px 30px -8px rgba(36, 34, 59, 0.12), 0 2px 6px -2px rgba(36, 34, 59, 0.06);
  --shadow-soft-lg: 0 24px 60px -16px rgba(36, 34, 59, 0.18), 0 4px 12px -4px rgba(36, 34, 59, 0.08);
  --shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --radius-2xl: 24px;
}