/**
 * EvoPay — High-End Design Tokens (Swiss-Fintech & Obsidian-Sapphire)
 * Built with OKLCH Color Space & Apple-Tier Micro-Aesthetics
 */

:root {
  /* ==========================================================
     1. SURFACE & BACKGROUND HIERARCHY (OKLCH Precision)
     ========================================================== */
  --bg-app: oklch(0.978 0.006 250);            /* Velvety platinum canvas (#f5f7fb) */
  --bg-surface: #ffffff;                       /* Pure optic white cards */
  --bg-surface-subtle: oklch(0.96 0.008 250);  /* Soft cool slate (#edf2f7) */
  --bg-surface-hover: oklch(0.972 0.006 250);  /* Hover surface state */
  --bg-surface-active: oklch(0.925 0.012 250); /* Pressed active state */
  --bg-input: #ffffff;                         /* Input fields background */
  --bg-overlay: rgba(11, 19, 41, 0.45);        /* Deep backdrop blur scrim */

  /* ==========================================================
     2. LUXURY JEWEL BRAND PALETTE (Deep Obsidian Cobalt)
     ========================================================== */
  --color-primary: oklch(0.48 0.19 265);        /* Royal Obsidian Cobalt (#254bda) */
  --color-primary-hover: oklch(0.42 0.21 265);  /* Deeper sapphire hover (#1e3a8a) */
  --color-primary-active: oklch(0.36 0.22 265); /* Deepest royal active (#172554) */
  --color-primary-light: oklch(0.965 0.025 265);/* Subtle sapphire tint (#eff6ff) */
  --color-primary-glow: rgba(37, 75, 218, 0.16);
  --gradient-primary: linear-gradient(135deg, oklch(0.52 0.2 265) 0%, oklch(0.42 0.22 265) 100%);
  --gradient-primary-hover: linear-gradient(135deg, oklch(0.48 0.21 265) 0%, oklch(0.38 0.23 265) 100%);

  /* Swiss Jade & Alpine Emerald (Liquidity & Paid Status) */
  --color-emerald: oklch(0.58 0.16 158);        /* Deep Alpine Emerald (#059669) */
  --color-emerald-hover: oklch(0.52 0.17 158);  /* Forest emerald (#047857) */
  --color-emerald-light: oklch(0.965 0.035 158);/* Mint ice tint (#ecfdf5) */
  --color-emerald-glow: rgba(5, 150, 105, 0.15);

  /* Deep Topaz & Royal Amber (Warning / Stock Alert) */
  --color-amber: oklch(0.68 0.16 70);          /* Deep Warm Topaz (#d97706) */
  --color-amber-hover: oklch(0.6 0.17 70);     /* Burnished amber (#b45309) */
  --color-amber-light: oklch(0.97 0.035 70);   /* Warm gold tint (#fffbeb) */
  --color-amber-glow: rgba(217, 119, 6, 0.15);

  /* Crimson Ruby & Bordeaux (Danger / Out of Stock) */
  --color-rose: oklch(0.55 0.21 25);           /* Velvet Ruby (#e11d48) */
  --color-rose-hover: oklch(0.48 0.22 25);     /* Deep bordeaux (#be123c) */
  --color-rose-light: oklch(0.97 0.035 25);    /* Rose quartz tint (#fff1f2) */
  --color-rose-glow: rgba(225, 29, 72, 0.15);

  /* Cyan & Tech Accents */
  --color-cyan: oklch(0.65 0.15 220);          /* Electric Cyan (#0284c7) */
  --color-cyan-light: oklch(0.965 0.03 220);

  /* ==========================================================
     3. HIGH-CONTRAST AUTHORITATIVE TYPOGRAPHY
     ========================================================== */
  --text-main: oklch(0.2 0.02 260);            /* Deep Obsidian Slate (#0b1329) */
  --text-body: oklch(0.38 0.02 260);           /* Slate 700 (#334155) */
  --text-muted: oklch(0.55 0.02 260);          /* Slate 500 (#64748b) */
  --text-subtle: oklch(0.7 0.015 260);         /* Slate 400 (#94a3b8) */
  --text-inverse: #ffffff;

  /* ==========================================================
     4. ARCHITECTURAL BORDERS & MICRO HAIRLINES
     ========================================================== */
  --border-hairline: oklch(0.91 0.008 250);    /* Crisp hairline border (#e2e8f0) */
  --border-subtle: rgba(11, 19, 41, 0.06);     /* Micro contrast border */
  --border-focus: oklch(0.48 0.19 265);
  --border-focus-glow: 0 0 0 3.5px rgba(37, 75, 218, 0.16);

  /* ==========================================================
     5. GEOMETRIC RADII SCALE
     ========================================================== */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;

  /* ==========================================================
     6. PHYSICAL SHADOWS & DIFFUSED ELEVATION
     ========================================================== */
  --shadow-xs: 0 1px 2px 0 rgba(11, 19, 41, 0.03);
  --shadow-sm: 0 1px 3px 0 rgba(11, 19, 41, 0.05), 0 1px 2px -1px rgba(11, 19, 41, 0.03);
  --shadow-md: 0 4px 14px -2px rgba(11, 19, 41, 0.06), 0 2px 6px -1px rgba(11, 19, 41, 0.03);
  --shadow-lg: 0 12px 32px -6px rgba(11, 19, 41, 0.08), 0 4px 12px -3px rgba(11, 19, 41, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(11, 19, 41, 0.12);
  --shadow-drawer: 0 -4px 30px rgba(11, 19, 41, 0.1);

  /* ==========================================================
     7. SPRING PHYSICS & FLUID MOTION
     ========================================================== */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: 0.15s var(--ease-spring);
  --transition-smooth: 0.25s var(--ease-spring);
  --transition-bounce: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ==========================================================
     8. LAYOUT DIMENSIONS
     ========================================================== */
  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --topbar-height: 64px;
  --bottom-nav-height: 68px;
}