/*
  DataSphere design tokens — "Modern Institutional / Civic Data" direction.
  Single source of truth for the public-facing UI (Home, PublicLayout, Auth pages).
  Companion C# mirror: DataSphere.Web/Theme/PublicTheme.cs — keep both in sync.

  Only :root variable declarations and namespaced (.ds-*) utility classes live here.
  No bare element selectors (body, h1, a, button, ...) — this file is loaded globally
  in App.razor and must not leak into MainLayout/AdminLayout, which keep their own
  themes until a later redesign wave.
*/

:root {
  /* Color — navy surface ramp */
  --ds-navy-950: #0a1120;
  --ds-navy-900: #0f1f3d;
  --ds-navy-800: #16294f;
  --ds-navy-700: #1f3a63;
  --ds-navy-600: #2c4d80;

  /* Color — gold accent ramp (the one accent color; replaces the purple gradient) */
  --ds-gold-500: #c8962f;
  --ds-gold-400: #d4a13d;
  --ds-gold-300: #e3bb63;
  --ds-gold-200: #f0d69a;

  /* Color — ink / paper (warm off-white, not pure white) */
  --ds-ink-900: #171a1f;
  --ds-ink-700: #454b54;
  --ds-ink-500: #6b7280;
  --ds-paper-50: #faf8f3;
  --ds-paper-100: #f2eee3;
  --ds-paper-200: #e8e2d2;

  /* Color — hairline borders */
  --ds-line: rgba(15, 31, 61, 0.14);
  --ds-line-strong: rgba(15, 31, 61, 0.28);
  --ds-line-on-navy: rgba(227, 187, 99, 0.28);

  /* Color — semantic (kept close to the app's existing MudBlazor palette) */
  --ds-color-success: #10b981;
  --ds-color-warning: #f59e0b;
  --ds-color-error: #ef4444;
  --ds-color-info: #0ea5e9;

  /* Typography — family stacks */
  --ds-font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --ds-font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --ds-font-mono: 'IBM Plex Mono', 'Consolas', monospace;

  /* Typography — modular scale */
  --ds-text-xs: 0.75rem;
  --ds-text-sm: 0.875rem;
  --ds-text-base: 1rem;
  --ds-text-lg: 1.125rem;
  --ds-text-xl: 1.25rem;
  --ds-text-2xl: 1.5rem;
  --ds-text-3xl: 1.875rem;
  --ds-text-4xl: 2.25rem;
  --ds-text-5xl: 3rem;
  --ds-text-6xl: 3.75rem;

  --ds-leading-tight: 1.1;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.7;

  --ds-tracking-tight: -0.02em;
  --ds-tracking-normal: 0;
  --ds-tracking-wide: 0.08em;

  /* Spacing — 8px base scale */
  --ds-space-1: 0.25rem;
  --ds-space-2: 0.5rem;
  --ds-space-3: 0.75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.5rem;
  --ds-space-6: 2rem;
  --ds-space-8: 3rem;
  --ds-space-10: 4rem;
  --ds-space-12: 6rem;
  --ds-space-16: 8rem;

  /* Radii — deliberately small/sharp, no glassmorphism */
  --ds-radius-sm: 2px;
  --ds-radius-md: 4px;
  --ds-radius-lg: 8px;

  /* Shadows — flat, high-contrast "stamped card" offsets, not soft blur */
  --ds-shadow-sm: 2px 2px 0 rgba(15, 31, 61, 0.08);
  --ds-shadow-md: 4px 4px 0 rgba(15, 31, 61, 0.12);
  --ds-shadow-gold: 3px 3px 0 rgba(200, 150, 47, 0.35);

  /* Motion */
  --ds-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ds-duration-fast: 120ms;
  --ds-duration-base: 200ms;
  --ds-duration-slow: 360ms;

  /* Surface aliases used by public-page components */
  --ds-surface: var(--ds-paper-50);
  --ds-surface-alt: var(--ds-paper-100);
  --ds-text: var(--ds-ink-900);
  --ds-text-muted: var(--ds-ink-700);
}

/* Dark-mode overrides. MudBlazor 8.x applies no DOM class/attribute for dark mode (it only
   swaps --mud-palette-* values internally), so PublicLayout.razor sets this attribute itself
   via JS interop (setDsTheme) whenever IsDarkMode changes. */
:root[data-theme="dark"] {
  --ds-surface: #101a2c;
  --ds-surface-alt: #16223a;
  --ds-text: var(--ds-paper-100);
  --ds-text-muted: #a9b4c4;
  --ds-line: rgba(227, 187, 99, 0.16);
  --ds-line-strong: rgba(227, 187, 99, 0.32);
  --ds-shadow-sm: 2px 2px 0 rgba(0, 0, 0, 0.35);
  --ds-shadow-md: 4px 4px 0 rgba(0, 0, 0, 0.45);
}

/* Dot-grid texture utility — replaces animated gradient/particle backgrounds */
.ds-dot-grid {
  background-image: radial-gradient(circle, var(--ds-line) 1px, transparent 1px);
  background-size: 24px 24px;
}

.ds-dot-grid-on-navy {
  background-image: radial-gradient(circle, var(--ds-line-on-navy) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Reusable "eyebrow" label style: uppercase, tracked-out monospace tag */
.ds-eyebrow {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-xs);
  letter-spacing: var(--ds-tracking-wide);
  text-transform: uppercase;
  font-weight: 600;
}

/* Reusable monospace stat callout — the "data terminal" numeral treatment used
   throughout the public site (hero stat bars, feature cards, popular-content panels).
   Global (not page-scoped) because Blazor does not isolate plain <style> blocks per page. */
.ds-stat-number {
  font-family: var(--ds-font-mono);
  font-size: var(--ds-text-3xl);
  font-weight: 700;
  color: var(--ds-gold-400);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ds-stat-label {
  font-family: var(--ds-font-body);
  color: var(--ds-paper-200);
  opacity: 0.75;
  font-size: var(--ds-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--ds-tracking-wide);
  margin-top: 0.15rem;
}

/* Light-surface variant (paper background instead of navy) */
.ds-stat-number-on-light {
  color: var(--ds-gold-500);
}

.ds-stat-label-on-light {
  color: var(--ds-text-muted);
  opacity: 1;
}