/* ==========================================================================
   Design Tokens — PT Inklusi Teknologi Strategis
   Aesthetics Aligned with GEOAI Indonesia (geoai.id)
   ========================================================================== */

:root {
  /* Brand Palette (geoai.id signature colors) */
  --brand: #0f7d5b;                /* Emerald brand primary */
  --brand-light: #169b70;          /* Medium emerald */
  --brand-deep: #0a5c43;           /* Dark forest emerald */
  --brand-tint: #e8f5ef;           /* Pale emerald badge/pill background */
  --brand-glow: #d9f99d;           /* Pale lime ambient light */
  --brand-ping: #ecfccb;           /* Radar dot indicator */

  /* Neutral Surface Palette */
  --surface: #ffffff;             /* Crisp pure white */
  --surface-subtle: #fdfdfc;      /* Subtle off-white card surface */
  --surface-warm: #f8f8f6;        /* Warm container background */
  --surface-card: #ffffff;

  /* Typography Colors */
  --ink: #262626;                 /* Primary dark text */
  --ink-secondary: #6b6b6b;       /* Secondary descriptive text */
  --ink-muted: #949490;           /* Captions & small notes */
  --ink-inverse: #ffffff;         /* Pure white text on dark panels */

  /* Architectural Grid Lines & Dots (geoai.id signature) */
  --line: #efefed;                /* Subtle border line */
  --line-strong: #d4d4d0;         /* Solid border / active line */
  --dot: #e4e4e0;                 /* Background grid dots */

  /* Sektor Category Accents */
  --cat-environment: #0f7d5b;     /* Green */
  --cat-disaster: #d9534f;        /* Coral red */
  --cat-assets: #0a6fd6;          /* Blue */
  --cat-public: #8a4fd8;          /* Purple */

  /* Typography Fonts */
  --font-heading: 'Outfit', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Layout Dimensions */
  --content-max: 1200px;
  --chrome-max: 1440px;
  --gutter: 1.5rem;
  --section-gap: 5.5rem;
  --header-h: 70px;

  /* Border Radii */
  --radius-xs: 4px;
  --radius-control: 8px;
  --radius-card: 14px;
  --radius-panel: 20px;
  --radius-action: 9999px;        /* Pill-shaped buttons */

  /* Animations & Transitions */
  --motion-press: 0.16s;
  --motion-ui: 0.2s;
  --ease-press: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}