/* ============================================================
   BANDORA SYSTEMS — Design Tokens
   ============================================================ */

@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Light.otf') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Italic.otf') format('opentype'); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Regular.otf') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Medium.otf') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-MediumItalic.otf') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Bold.otf') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-BoldItalic.otf') format('opentype'); font-weight:700; font-style:italic; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../assets/fonts/Satoshi-Black.otf') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  /* ── BRAND ────────────────────────────────────────────── */
  --brand-gold: #ffc822;
  --brand-black: #0a0a0a;

  /* ── REFERENCE PALETTE ────────────────────────────────── */
  --canvas: #ffffff;
  --ink: #17191c;
  --graphite: #000000;
  --warm-mist: #fbe1d1;
  --terracotta: #5d2a1a;
  --fog: #f7f7f8;
  --muted-stone: #4c4c4c;
  --light-steel: #777b86;
  --hint-grey: #a3a6af;
  --dusk-link: #8b8c8d;

  /* ── NEUTRAL SCALE ────────────────────────────────────── */
  --n-50: #f7f7f8;
  --n-100: #ebebec;
  --n-200: #d4d5d7;
  --n-300: #b3b5b9;
  --n-400: #a3a6af;
  --n-500: #8b8c8d;
  --n-600: #777b86;
  --n-700: #4c4c4c;
  --n-800: #2e3035;
  --n-900: #17191c;

  /* ── GOLD SCALE ───────────────────────────────────────── */
  --g-50: #fffbeb;
  --g-100: #fff5c2;
  --g-200: #ffec85;
  --g-300: #ffe047;
  --g-400: #ffc822;
  --g-500: #e6b000;
  --g-600: #cc9900;
  --g-700: #a67800;
  --g-800: #7a5800;
  --g-900: #4d3700;

  /* ── WARM SCALE ───────────────────────────────────────── */
  --w-50: #fef8f4;
  --w-100: #fbe1d1;
  --w-200: #f5c4a8;
  --w-800: #5d2a1a;

  /* ── SEMANTIC — SUCCESS ───────────────────────────────── */
  --s-50: #f0fdf4;
  --s-100: #dcfce7;
  --s-200: #bbf7d0;
  --s-400: #4ade80;
  --s-500: #22c55e;
  --s-600: #16a34a;
  --s-700: #15803d;

  /* ── SEMANTIC — WARNING ───────────────────────────────── */
  --wa-50: #fffbeb;
  --wa-100: #fef9c3;
  --wa-400: #facc15;
  --wa-500: #eab308;
  --wa-600: #ca8a04;
  --wa-700: #a16207;

  /* ── SEMANTIC — ERROR ─────────────────────────────────── */
  --e-50: #fef2f2;
  --e-100: #fee2e2;
  --e-400: #f87171;
  --e-500: #ef4444;
  --e-600: #dc2626;
  --e-700: #b91c1c;

  /* ── SEMANTIC — INFO ──────────────────────────────────── */
  --i-50: #eff6ff;
  --i-100: #dbeafe;
  --i-400: #60a5fa;
  --i-500: #3b82f6;
  --i-600: #2563eb;
  --i-700: #1d4ed8;

  /* ── SURFACES ─────────────────────────────────────────── */
  --surf-canvas: #ffffff;
  --surf-fog: #f4f5f6;
  --surf-sidebar: #0f1012;
  --surf-sidebar-hover: rgba(255,255,255,0.06);
  --surf-sidebar-active: rgba(255,255,255,0.10);
  --surf-warm: #fbe1d1;

  /* ── TYPOGRAPHY ───────────────────────────────────────── */
  --font: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --fw-light: 300;
  --fw-reg: 400;
  --fw-med: 500;
  --fw-bold: 700;
  --fw-black: 900;

  /* ── SPACING ──────────────────────────────────────────── */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-6: 6px;
  --sp-8: 8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-13: 13px;
  --sp-14: 14px;
  --sp-15: 15px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-28: 28px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* ── LAYOUT ───────────────────────────────────────────── */
  --sidebar-w: 232px;
  --sidebar-collapsed: 56px;
  --nav-h: 54px;
  --card-pad: 20px;
  --widget-gap: 14px;
  --row-sm: 36px;
  --row-md: 44px;
  --float-gap: 12px;            /* gap from screen edges to floating nav elements */
  --float-r: var(--r-2xl);      /* border-radius on floating panels (20px) */

  /* ── BORDER RADIUS ────────────────────────────────────── */
  --r-xs: 3px;
  --r-sm: 5px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 20px;
  --r-3xl: 24px;
  --r-pill: 9999px;
  --r-card: 16px;
  --r-input: 10px;
  --r-badge: 4px;

  /* ── BORDERS ──────────────────────────────────────────── */
  --bw: 1px;
  --bc-default: #d4d5d7;
  --bc-focus: #17191c;
  --bc-subtle: #ebebec;
  --bc-sidebar: rgba(255,255,255,0.08);

  /* ── SHADOWS ──────────────────────────────────────────── */
  --sh-xs: rgba(4,23,43,.04) 0 0 0 1px, rgba(0,0,0,.04) 0 2px 4px -1px;
  --sh-sm: rgba(4,23,43,.05) 0 0 0 1px, rgba(0,0,0,.06) 0 4px 6px -2px;
  --sh-card: rgba(4,23,43,.06) 0 0 0 1px, rgba(0,0,0,.07) 0 8px 16px -4px;
  --sh-md: rgba(4,23,43,.08) 0 0 0 1px, rgba(0,0,0,.12) 0 16px 24px -6px;
  --sh-lg: rgba(4,23,43,.10) 0 0 0 1px, rgba(0,0,0,.18) 0 24px 40px -10px;

  /* ── MOTION ───────────────────────────────────────────── */
  --dur-fast: 100ms;
  --dur-norm: 150ms;
  --dur-mod: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);

  /* ── Z-INDEX ──────────────────────────────────────────── */
  --z-raised: 10;
  --z-drop: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tip: 600;
  --z-cmd: 700;

  /* ── CHART PALETTE ────────────────────────────────────── */
  --ch-1: #17191c;
  --ch-2: #ffc822;
  --ch-3: #3b82f6;
  --ch-4: #22c55e;
  --ch-5: #ef4444;
  --ch-6: #777b86;
  --ch-7: #a855f7;
  --ch-8: #f97316;

  /* ── OPERATIONAL STATUS COLORS ────────────────────────── */
  --status-online: #22c55e;
  --status-offline: #a3a6af;
  --status-warning: #eab308;
  --status-error: #ef4444;
  --status-optimizing: #3b82f6;
  --status-inactive: #777b86;
}