/* ============================================================
   TOKENS — PayPal Classic
   Poore panel me koi hard-coded color nahi. Sirf ye variables.
   Naya theme = sirf in values ko badal dein.
   ============================================================ */

:root {
  /* --- Brand / surfaces (light) --- */
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-2: #f7f9fd;
  --sidebar: #ffffff;
  --border: #e2e8f2;
  --text: #0d1b2a;
  --muted: #66748c;

  --primary: #0070ba;
  --primary-hover: #005a96;
  --primary-soft: #e6f2fb;
  --on-primary: #ffffff;
  --brand-deep: #003087;
  --accent: #009cde;

  --success: #0f9d58;
  --success-soft: #e5f5ec;
  --warning: #c77700;
  --warning-soft: #fdf1e0;
  --danger: #d5323c;
  --danger-soft: #fdeaec;
  --info: #0070ba;
  --info-soft: #e6f2fb;

  --grad: linear-gradient(135deg, #003087 0%, #0070ba 55%, #009cde 100%);

  /* --- Shape --- */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --shadow-lg: 0 18px 40px -12px rgba(16, 24, 40, .22);
  --shadow-pop: 0 12px 28px -8px rgba(16, 24, 40, .18);
  --ring: 0 0 0 3px rgba(0, 112, 186, .22);

  /* --- Rhythm --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 22px;
  --space-6: 28px;

  /* --- Layout --- */
  --sidebar-w: 252px;
  --sidebar-w-mini: 76px;
  --topbar-h: 66px;

  /* --- Motion --- */
  --t-fast: .14s ease;
  --t: .2s ease;

  /* --- Layers --- */
  --z-drawer: 40;
  --z-sidebar: 50;
  --z-dropdown: 60;
  --z-modal: 70;
  --z-toast: 80;

  --font: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;

  color-scheme: light;
}

/* --- Dark mode (same brand, adjusted surfaces) --- */
:root[data-mode="dark"] {
  --bg: #0a1526;
  --surface: #101f33;
  --surface-2: #16273e;
  --sidebar: #0c1a2c;
  --border: #1e3350;
  --text: #e8eefa;
  --muted: #8ea3c0;

  --primary: #2f9fe0;
  --primary-hover: #54b4ea;
  --primary-soft: #12314b;
  --on-primary: #06121f;
  --accent: #35b6ef;

  --success: #3ecf8e;
  --success-soft: #123326;
  --warning: #f0b445;
  --warning-soft: #3a2c12;
  --danger: #f4737d;
  --danger-soft: #3a1a1e;
  --info: #2f9fe0;
  --info-soft: #12314b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, .38);
  --shadow-lg: 0 20px 44px -14px rgba(0, 0, 0, .6);
  --shadow-pop: 0 14px 32px -10px rgba(0, 0, 0, .55);
  --ring: 0 0 0 3px rgba(47, 159, 224, .26);

  color-scheme: dark;
}