/* EGIS Design System Tokens — NaijaStay Philosophy, Modern Web */
/* Everything is built from these tokens. No inline hex, no ad-hoc spacing. */

:root {
  /* ── Color — Domain Language ─────────────────────────────── */
  --brand-600: #0A7B3E;   /* EGIS primary — clean energy green (CTAs, logo, active) */
  --brand-500: #0E9E53;   /* Primary hover / gradients */
  --brand-50:  #E8F5E9;   /* Light green background */
  --solar:     #F59E0B;   /* Solar domain (amber sun) */
  --battery:   #22C55E;   /* Battery domain (charge green) */
  --grid:      #06B6D4;   /* Grid / utility (cyan) */
  --generator: #EF4444;   /* Generator / alerts (orange-red) */
  --gold:      #D4A017;   /* Revenue / financial / investor value */
  --ink-900:   #0B1220;   /* Primary text / dark hero backgrounds */
  --ink-700:   #2D3545;   /* Secondary headings */
  --ink-500:   #5B6472;   /* Secondary text */
  --ink-300:   #8D95A3;   /* Placeholder / disabled */
  --surface:   #FFFFFF;   /* Cards (public = light, airy) */
  --surface-alt:#F6F8FA;  /* Section backgrounds */
  --line:      #E6EAF0;   /* Hairline borders */
  --line-light:#F0F2F5;   /* Lighter borders */
  --success:   #22C55E;   /* Success states */
  --warning:   #F59E0B;   /* Warning states */
  --danger:    #EF4444;   /* Error / danger */
  --info:      #06B6D4;   /* Info states */

  /* ── Typography ──────────────────────────────────────────── */
  --font-display: 'Geist', 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Scale: 72 / 56 / 40 / 32 / 24 / 20 / 16 / 14 / 12 */
  --text-hero:    clamp(40px, 6vw, 72px);
  --text-h1:      clamp(32px, 4vw, 56px);
  --text-h2:      clamp(28px, 3.5vw, 40px);
  --text-h3:      clamp(24px, 3vw, 32px);
  --text-h4:      24px;
  --text-h5:      20px;
  --text-body:    16px;
  --text-body-lg: 18px;
  --text-sm:      14px;
  --text-xs:      12px;

  --weight-900: 900;
  --weight-700: 700;
  --weight-600: 600;
  --weight-500: 500;
  --weight-400: 400;

  --leading-tight: 1.15;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;

  /* ── Space ───────────────────────────────────────────────── */
  /* Scale: 4 8 12 16 24 32 48 64 96 128 */
  --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;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 999px;

  /* ── Shadows (3 tiers) ───────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(11,18,32,0.06);
  --shadow-md:  0 8px 24px rgba(11,18,32,0.08);
  --shadow-glow-solar:    0 12px 32px rgba(245,158,11,0.25);
  --shadow-glow-battery:  0 12px 32px rgba(34,197,94,0.25);
  --shadow-glow-grid:     0 12px 32px rgba(6,182,212,0.25);
  --shadow-glow-brand:    0 12px 32px rgba(10,123,62,0.25);

  /* ── Layout ───────────────────────────────────────────────── */
  --max-width: 1200px;
  --gutter: 24px;
  --nav-height: 72px;

  /* ── Breakpoints ──────────────────────────────────────────── */
  /* sm: 480, md: 768, lg: 1024, xl: 1200 */

  /* ── Motion ───────────────────────────────────────────────── */
  --spring-press: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --spring-lift:  cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* ── Dark Theme (for admin/portals) ─────────────────────────── */
[data-theme="dark"] {
  --ink-900: #F1F3F5;
  --ink-700: #C5C9D4;
  --ink-500: #8D95A3;
  --ink-300: #5B6472;
  --surface: #1C1F2E;
  --surface-alt: #161822;
  --line: #2A2D3E;
  --line-light: #222538;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
}

/* ── Reduced Motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --spring-press: linear;
    --spring-lift: linear;
    --ease-out: linear;
    --ease-in-out: linear;
    --duration-fast: 0ms;
    --duration-normal: 0ms;
    --duration-slow: 0ms;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Base Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-normal); color: var(--ink-700); background: var(--surface); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--ink-900); font-weight: var(--weight-700); line-height: var(--leading-tight); }
a { color: var(--brand-600); text-decoration: none; }
a:hover { color: var(--brand-500); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }

/* ── Utility Classes ────────────────────────────────────────── */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ── Scroll Reveal (JS-powered) ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }