/* ============================================
   SL Distribuidora — Portal Design Tokens
   Premium glass system inspired by Arc, Dia and Apple
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root {
  --navy: #0f1f3d;
  --navy-light: #1c3159;
  --royal: #2f62e8;
  --royal-light: #5d86f1;
  --cyan: #7cbcff;
  --cyan-light: #cfe5ff;
  --silver: #b7c4d6;
  --silver-light: #eef3fb;
  --amber: #f5b36b;
  --rose: #f7d9c9;

  --bg-primary: #eef3f8;
  --bg-secondary: rgba(255, 255, 255, 0.78);
  --bg-elevated: rgba(255, 255, 255, 0.9);
  --bg-card: rgba(255, 255, 255, 0.7);
  --bg-glass: rgba(255, 255, 255, 0.56);
  --bg-panel: rgba(242, 246, 252, 0.75);
  --bg-overlay: rgba(12, 22, 42, 0.32);

  --text-primary: #11203b;
  --text-secondary: #44536b;
  --text-muted: #71809a;
  --text-inverse: #ffffff;

  --border: rgba(155, 171, 194, 0.28);
  --border-strong: rgba(155, 171, 194, 0.44);
  --border-hover: rgba(47, 98, 232, 0.32);
  --glass-stroke: rgba(255, 255, 255, 0.72);
  --glass-highlight: rgba(255, 255, 255, 0.92);

  --success: #1f9f73;
  --success-bg: rgba(31, 159, 115, 0.12);
  --warning: #d28a25;
  --warning-bg: rgba(210, 138, 37, 0.12);
  --danger: #d84f56;
  --danger-bg: rgba(216, 79, 86, 0.12);
  --info: #2f62e8;
  --info-bg: rgba(47, 98, 232, 0.12);

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

  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-2xl: 40px;
  --radius-full: 999px;

  --shadow-sm: 0 10px 24px rgba(17, 32, 59, 0.08);
  --shadow-md: 0 18px 40px rgba(17, 32, 59, 0.12);
  --shadow-lg: 0 28px 70px rgba(17, 32, 59, 0.14);
  --shadow-xl: 0 42px 90px rgba(17, 32, 59, 0.18);
  --shadow-glass: 0 18px 42px rgba(17, 32, 59, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-float: 0 24px 60px rgba(17, 32, 59, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.86);

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 0.96rem;
  --text-lg: 1.15rem;
  --text-xl: 1.35rem;
  --text-2xl: 1.7rem;
  --text-3xl: 2.25rem;
  --text-4xl: 3rem;
  --text-display: clamp(2.8rem, 5vw, 4.8rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 160ms var(--ease);
  --transition: 280ms var(--ease);
  --transition-slow: 520ms var(--ease);

  --gradient-brand: linear-gradient(135deg, #10254f 0%, #2f62e8 45%, #95c9ff 100%);
  --gradient-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.84) 0%, rgba(245, 248, 253, 0.66) 100%);
  --gradient-panel: linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(237, 243, 251, 0.62) 100%);
  --gradient-sheen: linear-gradient(120deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.08) 55%, rgba(255, 255, 255, 0.38) 100%);
}

[data-theme='dark'] {
  --navy: #dfe9ff;
  --navy-light: #9fb8ea;
  --royal: #7ca8ff;
  --royal-light: #a4c3ff;
  --cyan: #83d0ff;
  --cyan-light: #d6ebff;
  --silver: #4f607b;
  --silver-light: #263247;
  --amber: #f2bb76;
  --rose: #b75d61;

  --bg-primary: #081120;
  --bg-secondary: rgba(15, 24, 40, 0.82);
  --bg-elevated: rgba(17, 28, 46, 0.92);
  --bg-card: rgba(17, 27, 44, 0.78);
  --bg-glass: rgba(12, 20, 34, 0.66);
  --bg-panel: rgba(15, 23, 38, 0.72);
  --bg-overlay: rgba(1, 5, 12, 0.52);

  --text-primary: #edf4ff;
  --text-secondary: #b4c0d7;
  --text-muted: #8091ad;
  --text-inverse: #06101d;

  --border: rgba(117, 140, 179, 0.18);
  --border-strong: rgba(117, 140, 179, 0.34);
  --border-hover: rgba(131, 208, 255, 0.28);
  --glass-stroke: rgba(255, 255, 255, 0.08);
  --glass-highlight: rgba(255, 255, 255, 0.12);

  --shadow-sm: 0 12px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 44px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 28px 78px rgba(0, 0, 0, 0.42);
  --shadow-xl: 0 40px 96px rgba(0, 0, 0, 0.52);
  --shadow-glass: 0 18px 44px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-float: 0 28px 72px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --gradient-brand: linear-gradient(135deg, #132241 0%, #4c84ff 45%, #8fd9ff 100%);
  --gradient-soft: linear-gradient(180deg, rgba(17, 27, 44, 0.92) 0%, rgba(12, 20, 34, 0.72) 100%);
  --gradient-panel: linear-gradient(180deg, rgba(17, 27, 44, 0.82) 0%, rgba(9, 17, 31, 0.72) 100%);
  --gradient-sheen: linear-gradient(120deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0.08) 100%);
}