/* ═══════════════════════════════════════════════════════════
   THEME — Supabase-inspired Dark & Light mode variables
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Backgrounds */
  --bg: #1C1C1C;
  --s1: #171717;
  --s2: #232323;
  --s3: #2A2A2A;
  --s4: #303030;

  /* Borders */
  --bdr: #2E2E2E;
  --bdr2: #3E3E3E;
  --bdr3: #4E4E4E;

  /* Text */
  --t1: #EDEDED;
  --t2: #A1A1A1;
  --t3: #6B6B6B;
  --t4: #505050;

  /* Brand */
  --red: #E63946;
  --red2: #c5303c;
  --redD: rgba(230, 57, 70, 0.1);
  --redG: rgba(230, 57, 70, 0.25);

  /* Status / Accents */
  --grn: #3ECF8E;
  --grnD: rgba(62, 207, 142, 0.1);
  --amb: #EAB308;
  --ambD: rgba(234, 179, 8, 0.1);
  --blu: #3B82F6;
  --bluD: rgba(59, 130, 246, 0.1);
  --pur: #8B5CF6;
  --purD: rgba(139, 92, 246, 0.1);
  --pink: #EC4899;
  --pinkD: rgba(236, 72, 153, 0.1);
  --cyan: #06B6D4;
  --cyanD: rgba(6, 182, 212, 0.1);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);

  /* Fonts */
  --fm: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fd: 'Inter', -apple-system, sans-serif;
  --fs: 'Inter', -apple-system, sans-serif;
}

/* ═══ Light theme override ═══ */
.light {
  --bg: #F8F8F8;
  --s1: #FFFFFF;
  --s2: #F3F3F3;
  --s3: #EAEAEA;
  --s4: #E0E0E0;

  --bdr: #E5E5E5;
  --bdr2: #D4D4D4;
  --bdr3: #C0C0C0;

  --t1: #171717;
  --t2: #525252;
  --t3: #8A8A8A;
  --t4: #ABABAB;

  --red: #DC2626;
  --red2: #B91C1C;
  --redD: rgba(220, 38, 38, 0.08);
  --redG: rgba(220, 38, 38, 0.2);

  --grn: #16A34A;
  --grnD: rgba(22, 163, 74, 0.08);
  --amb: #CA8A04;
  --ambD: rgba(202, 138, 4, 0.08);
  --blu: #2563EB;
  --bluD: rgba(37, 99, 235, 0.08);
  --pur: #7C3AED;
  --purD: rgba(124, 58, 237, 0.08);
  --pink: #DB2777;
  --pinkD: rgba(219, 39, 119, 0.08);
  --cyan: #0891B2;
  --cyanD: rgba(8, 145, 178, 0.08);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.12);
}