/* ═══════════════════════════════════════════════════════════
   BE30 GOTAS — DESIGN TOKENS
   Single source of truth. Never hardcode these values elsewhere.
═══════════════════════════════════════════════════════════ */

:root {
  /* ── Palette ── */
  --white:        #ffffff;
  --bg:           #f4fafb;
  --bg2:          #e8f6f8;
  --navy:         #0d2d35;
  --blue:         #38A8BA;
  --blue2:        #4BBECB;
  --blue-light:   #d6f1f5;
  --blue-lighter: #eaf8fa;
  --muted:        #5a7a82;
  --border:       #c8e8ed;

  /* ── Gradient shorthands ── */
  --grad-blue: linear-gradient(135deg, #2B9EAF 0%, #38A8BA 50%, #4BBECB 100%);
  --grad-blue-soft: linear-gradient(135deg, #8dd4dc 0%, #6ac5cf 50%, #4BBECB 100%);
  --grad-card: linear-gradient(140deg, #d6f1f5 0%, #eaf8fa 100%);

  /* ── Typography ── */
  --ff: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* ── Radii ── */
  --radius:    20px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --radius-pill: 9999px;

  /* ── Shadows ── */
  --shadow:    0 4px 24px rgba(59, 91, 219, 0.08);
  --shadow-lg: 0 8px 48px rgba(59, 91, 219, 0.14);
  --shadow-xl: 0 16px 64px rgba(59, 91, 219, 0.18);

  /* ── Spacing ── */
  --container: 1140px;
  --gutter:    2rem;

  /* ── CSS easing ── */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-circ:  cubic-bezier(0, 0.55, 0.45, 1);
  --ease-out-back:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-inout:     cubic-bezier(0.45, 0, 0.55, 1);

  /* ── Durations ── */
  --dur-fast:      180ms;
  --dur-med:       350ms;
  --dur-slow:      650ms;
  --dur-cinematic: 1100ms;

  /* ── Z-index ── */
  --z-base:    1;
  --z-ui:      10;
  --z-nav:     100;
  --z-cursor:  9000;
  --z-loader:  9999;
}