/* ============================================================
   tokens.css — Green Bharat design tokens (neo-brutalism, light)
   ============================================================ */
@import url("../fonts/fonts.css");

:root {
  /* Fonts (self-hosted, offline-safe) */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  /* Core neo-brutal surface + ink */
  --color-bg: #FAF4E6;         /* cream canvas */
  --color-surface: #FFFFFF;     /* card white */
  --color-surface-2: #FFF6DC;   /* soft panel */
  --color-surface-3: #FDECC8;   /* deeper panel */
  --ink: #111111;               /* black borders + text */
  --color-text: #111111;
  --color-text-muted: #4B4B4B;
  --color-text-faint: #8A8A8A;
  --color-border: #111111;

  /* Flat accent palette (no gradients anywhere) */
  --color-green: #22C55E;
  --color-green-dark: #15803D;
  --color-blue: #3B82F6;
  --color-blue-dark: #1D4ED8;
  --color-yellow: #FACC15;
  --color-yellow-dark: #CA8A04;
  --color-red: #EF4444;
  --color-red-dark: #B91C1C;
  --color-orange: #F97316;
  --color-purple: #A855F7;
  --color-gold: #F59E0B;
  --color-silver: #9CA3AF;
  --color-bronze: #B45309;

  /* Neo-brutal borders (thick, black) */
  --bd: 3px solid var(--ink);
  --bd-thin: 2px solid var(--ink);
  --bd-thick: 4px solid var(--ink);

  /* Hard offset shadows — NO blur */
  --shadow-sm: 3px 3px 0 var(--ink);
  --shadow-md: 5px 5px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  --shadow-press: 1px 1px 0 var(--ink);

  /* Colored hard shadows for accent cards */
  --shadow-green: 5px 5px 0 var(--color-green-dark);
  --shadow-blue: 5px 5px 0 var(--color-blue-dark);
  --shadow-gold: 5px 5px 0 var(--color-yellow-dark);

  /* Squared-off radii (brutalist) */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-full: 9999px;

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Type scale */
  --text-xs: 12px; --text-sm: 14px; --text-base: 16px;
  --text-lg: 20px; --text-xl: 26px; --text-2xl: 34px; --text-3xl: 48px;

  --transition: 120ms cubic-bezier(0.2, 0, 0, 1);
  --bottom-nav-height: 64px;
}