/* ==========================================================================
   Elevaan Network — Design Tokens
   Default = light. Dark via html[data-theme="dark"].
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Layout ---- */
  --container-max: 1240px;
  --container-pad: 20px;
  --header-height: 80px;

  /* ---- Surfaces ---- */
  --color-bg: #f2f4f7;
  --color-surface: #ffffff;
  --color-surface-2: #f5f6f7;
  --color-header-bg: #ffffff;
  --color-header-text: #1c1c1d;
  --color-header-hover: #4b5563;
  --color-dark: #16181c;
  --color-dark-2: #0d0f12;
  --color-navy: #16244d;
  --color-navy-2: #0e1a3a;

  /* ---- Text ---- */
  --color-text: #1a1d23;
  --color-text-muted: #6b7280;
  --color-text-soft: #9aa1ac;
  --color-card-title: #404145;
  --color-border: #e4e7ec;
  --color-border-strong: #c5c6c9;

  /* ---- Brand / actions ---- */
  --color-primary: #626262;
  --color-primary-dark: #1d4ed8;
  --color-orange: #ff6600;
  --color-orange-dark: #ff6600;
  --color-orange-hover: #ff6600;
  --color-green: #22c55e;
  --color-red: #e5342e;
  --color-link: #2563eb;

  /* ---- Radius ---- */
  --radius-sm: 0;
  --radius-md: 0;
  --radius-lg: 0;
  --radius-btn: 5px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 4px 14px rgba(16, 24, 40, 0.10);
  --shadow-lg: 0 16px 32px rgba(16, 24, 40, 0.14);

  /* ---- Typography ---- */
  --font-sans: "Macan", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --color-bg: #0f0f0f;
  --color-surface: #1a1a1a;
  --color-surface-2: #222224;
  --color-header-bg: #1a1a1a;
  --color-header-text: #f3f4f6;
  --color-header-hover: #d1d5db;
  --color-dark: #3a3c3e;
  --color-dark-2: #4a4c4e;
  --color-navy: #1f2937;
  --color-navy-2: #111827;

  --color-text: #f3f4f6;
  --color-text-muted: #a1a1aa;
  --color-text-soft: #8b8f96;
  --color-card-title: #a1a1aa;
  --color-border: #3a3b3c;
  --color-border-strong: #4b4c4e;

  --color-primary: #c4c4c4;
  --color-primary-dark: #60a5fa;
  --color-link: #93c5fd;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.45);
}