/* ==========================================================================
   Vision Retail Display — Design Tokens
   ========================================================================== */

:root {
  /* ---------- Brand palette ---------- */
  --brand-primary: #0a2540;        /* deep navy — main brand color */
  --brand-primary-2: #0f3a6b;      /* hover / dark accent */
  --brand-accent: #00d4a8;         /* signature teal — action / highlight */
  --brand-accent-2: #00b894;       /* teal hover */
  --brand-energy: #ffb547;         /* warm yellow — playful accent */
  --brand-rose: #ff5e7d;           /* mascot / decoration */
  --brand-violet: #7c5cff;         /* secondary accent */
  --brand-sky: #5ec6ff;            /* sky blue */

  /* ---------- Surfaces ---------- */
  --bg-page: #ffffff;
  --bg-soft: #f4f7fb;
  --bg-muted: #eef2f7;
  --bg-dark: #061629;
  --bg-gradient: linear-gradient(135deg, #0a2540 0%, #0f3a6b 50%, #143f80 100%);
  --bg-gradient-soft: linear-gradient(135deg, #eaf3ff 0%, #f4f7fb 100%);

  /* ---------- Text ---------- */
  --text-primary: #0a2540;
  --text-secondary: #425466;
  --text-tertiary: #6b7c93;
  --text-inverse: #ffffff;
  --text-link: #0f3a6b;

  /* ---------- Border / dividers ---------- */
  --border-soft: #e3e9f0;
  --border-strong: #c6d1de;

  /* ---------- Status ---------- */
  --success: #2ecc71;
  --warning: #f5a623;
  --danger: #e74c3c;
  --info: #3498db;

  /* ---------- Shadows ---------- */
  --shadow-sm: 0 1px 2px rgba(10, 37, 64, 0.06), 0 1px 3px rgba(10, 37, 64, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 37, 64, 0.08);
  --shadow-lg: 0 24px 48px rgba(10, 37, 64, 0.12);
  --shadow-glow: 0 0 32px rgba(0, 212, 168, 0.35);

  /* ---------- Radii ---------- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Layout ---------- */
  --container-max: 1240px;
  --container-pad: clamp(16px, 4vw, 32px);
  --header-h: 76px;

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
  --font-display: 'Inter', 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 28px;
  --fs-2xl: 36px;
  --fs-3xl: 48px;
  --fs-4xl: 64px;
  --fs-5xl: 88px;

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-loose: 1.8;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 200ms;
  --t-base: 400ms;
  --t-slow: 800ms;

  /* ---------- Z-layers ---------- */
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}