/* ============================================================================
   Gov360 design tokens — shared by the resident portal, partner portal and
   Citizen Connect (same names as admin-web for a family resemblance).
   Source of truth for brand colours: assets/brand/brand.json
     navy   #0A1877   orange #EA7F31
   Themes: light "airy" is the :root default; dark "command center" applies
   when the OS prefers dark and the viewer made no choice, or when
   <html data-theme="dark">. <html data-theme="light"> forces light.

   Contrast notes (WCAG AA):
     - Orange #EA7F31 is never used as text on white (2.9:1). Light-theme
       orange text uses --accent-text #A34A10 (5.9:1 on #fff).
     - Primary buttons are orange fill with navy-black ink (--on-accent),
       6.0:1 light / 7.2:1 dark. Never white on orange.
     - --text-muted is >= 4.5:1 on --surface in both themes.
   ========================================================================= */

:root {
  --g360-navy: #0a1877;
  --g360-navy-700: #0d1f99;
  --g360-navy-900: #050c3d;
  --g360-orange: #ea7f31;
  --g360-orange-300: #f6a964;
  --g360-orange-600: #d06a1f;

  --font-display: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;

  /* ---- LIGHT "airy" ---- */
  color-scheme: light;
  --bg: #f4f7fd;
  --bg-grad: radial-gradient(1200px 600px at 85% -10%, rgba(234, 127, 49, 0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(10, 24, 119, 0.08), transparent 60%), #f4f7fd;
  --surface: #ffffff;
  --surface-2: #eef3fb;
  --surface-3: #e3eaf7;
  --glass: rgba(255, 255, 255, 0.78);
  --glass-border: rgba(10, 24, 119, 0.10);
  --glass-blur: blur(14px) saturate(140%);
  --border: #d6deee;
  --border-strong: #b8c4dc;
  --text: #0b1440;
  --text-2: #26325f;
  --text-muted: #4f5b80;
  --text-invert: #ffffff;
  --heading: #0a1877;
  --accent: #ea7f31;
  --accent-hover: #d96f22;
  --accent-soft: rgba(234, 127, 49, 0.12);
  --accent-text: #a34a10;
  --on-accent: #0b1440;
  --primary: #0a1877;
  --primary-hover: #0d1f99;
  --primary-soft: rgba(10, 24, 119, 0.08);
  --on-primary: #ffffff;
  --link: #0d1f99;
  --focus-ring: 0 0 0 3px rgba(234, 127, 49, 0.55), 0 0 0 5px rgba(10, 24, 119, 0.25);
  --glow-accent: 0 8px 24px -8px rgba(234, 127, 49, 0.55);
  --shadow-sm: 0 1px 2px rgba(10, 24, 119, 0.06), 0 1px 3px rgba(10, 24, 119, 0.08);
  --shadow-md: 0 8px 24px -10px rgba(10, 24, 119, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(10, 24, 119, 0.28);
  --overlay: rgba(5, 12, 61, 0.45);

  --success-surface: #e7f6ee;
  --success-border: #a6dcbc;
  --success-solid: #1b8a4b;
  --success-text: #0e6134;
  --warning-surface: #fff4e0;
  --warning-border: #f5cf8f;
  --warning-solid: #d98600;
  --warning-text: #874a00;
  --danger-surface: #fdecec;
  --danger-border: #f2b8b8;
  --danger-solid: #d32f2f;
  --danger-text: #9f1d1d;
  --danger-fill: #c62828;
  --on-danger: #ffffff;
  --info-surface: #e8effd;
  --info-border: #b3c7f0;
  --info-solid: #1c4fb8;
  --info-text: #143b8c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #050817;
    --bg-grad: radial-gradient(1100px 600px at 85% -10%, rgba(234, 127, 49, 0.16), transparent 60%),
      radial-gradient(900px 600px at -10% 0%, rgba(30, 60, 220, 0.22), transparent 60%), #050817;
    --surface: #0b1230;
    --surface-2: #101a40;
    --surface-3: #16224f;
    --glass: rgba(16, 26, 64, 0.62);
    --glass-border: rgba(140, 165, 255, 0.16);
    --border: #1e2b5c;
    --border-strong: #2c3c78;
    --text: #e8ecfb;
    --text-2: #c5cdef;
    --text-muted: #9aa6d3;
    --text-invert: #0b1440;
    --heading: #ffffff;
    --accent: #f08a3e;
    --accent-hover: #f6a964;
    --accent-soft: rgba(240, 138, 62, 0.16);
    --accent-text: #f6a964;
    --on-accent: #050817;
    --primary: #f08a3e;
    --primary-hover: #f6a964;
    --primary-soft: rgba(240, 138, 62, 0.14);
    --on-primary: #050817;
    --link: #9db4ff;
    --focus-ring: 0 0 0 3px rgba(246, 169, 100, 0.75), 0 0 0 6px rgba(5, 8, 23, 0.9);
    --glow-accent: 0 0 0 1px rgba(246, 169, 100, 0.35), 0 10px 32px -6px rgba(240, 138, 62, 0.65);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
    --overlay: rgba(2, 4, 14, 0.7);
    --success-surface: rgba(46, 180, 110, 0.14);
    --success-border: rgba(46, 180, 110, 0.4);
    --success-solid: #3ccf86;
    --success-text: #7be3ad;
    --warning-surface: rgba(240, 170, 40, 0.14);
    --warning-border: rgba(240, 170, 40, 0.4);
    --warning-solid: #f2b23c;
    --warning-text: #ffd27a;
    --danger-surface: rgba(240, 80, 80, 0.14);
    --danger-border: rgba(240, 80, 80, 0.42);
    --danger-solid: #ff6b6b;
    --danger-text: #ffa3a3;
    --danger-fill: #d93636;
    --on-danger: #ffffff;
    --info-surface: rgba(100, 140, 255, 0.14);
    --info-border: rgba(100, 140, 255, 0.4);
    --info-solid: #7d9bff;
    --info-text: #b3c6ff;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #050817;
  --bg-grad: radial-gradient(1100px 600px at 85% -10%, rgba(234, 127, 49, 0.16), transparent 60%),
    radial-gradient(900px 600px at -10% 0%, rgba(30, 60, 220, 0.22), transparent 60%), #050817;
  --surface: #0b1230;
  --surface-2: #101a40;
  --surface-3: #16224f;
  --glass: rgba(16, 26, 64, 0.62);
  --glass-border: rgba(140, 165, 255, 0.16);
  --border: #1e2b5c;
  --border-strong: #2c3c78;
  --text: #e8ecfb;
  --text-2: #c5cdef;
  --text-muted: #9aa6d3;
  --text-invert: #0b1440;
  --heading: #ffffff;
  --accent: #f08a3e;
  --accent-hover: #f6a964;
  --accent-soft: rgba(240, 138, 62, 0.16);
  --accent-text: #f6a964;
  --on-accent: #050817;
  --primary: #f08a3e;
  --primary-hover: #f6a964;
  --primary-soft: rgba(240, 138, 62, 0.14);
  --on-primary: #050817;
  --link: #9db4ff;
  --focus-ring: 0 0 0 3px rgba(246, 169, 100, 0.75), 0 0 0 6px rgba(5, 8, 23, 0.9);
  --glow-accent: 0 0 0 1px rgba(246, 169, 100, 0.35), 0 10px 32px -6px rgba(240, 138, 62, 0.65);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  --overlay: rgba(2, 4, 14, 0.7);
  --success-surface: rgba(46, 180, 110, 0.14);
  --success-border: rgba(46, 180, 110, 0.4);
  --success-solid: #3ccf86;
  --success-text: #7be3ad;
  --warning-surface: rgba(240, 170, 40, 0.14);
  --warning-border: rgba(240, 170, 40, 0.4);
  --warning-solid: #f2b23c;
  --warning-text: #ffd27a;
  --danger-surface: rgba(240, 80, 80, 0.14);
  --danger-border: rgba(240, 80, 80, 0.42);
  --danger-solid: #ff6b6b;
  --danger-text: #ffa3a3;
  --danger-fill: #d93636;
  --on-danger: #ffffff;
  --info-surface: rgba(100, 140, 255, 0.14);
  --info-border: rgba(100, 140, 255, 0.4);
  --info-solid: #7d9bff;
  --info-text: #b3c6ff;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}