@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");

/* ==========================================================================
   SEVIGO DESIGN SYSTEM — CSS CUSTOM PROPERTIES
   Source of truth: Stitch export (Civic Horizon / SeviGo) design tokens.
   Do not hardcode colors/spacing/radii anywhere else — reference these.
   ========================================================================== */

:root {
  /* ---- Color: Surfaces ---- */
  --color-surface: #faf8ff;
  --color-surface-dim: #d2d9f4;
  --color-surface-bright: #faf8ff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f8faff;
  --color-surface-container: #f1f4fd;
  --color-surface-container-high: #e8edfb;
  --color-surface-container-highest: #dae2fd;
  --color-background: #f8fafc;

  /* ---- Color: Text ---- */
  --color-on-surface: #131b2e;
  --color-on-surface-variant: #475569;
  --color-on-background: #131b2e;
  --color-inverse-surface: #283044;
  --color-inverse-on-surface: #eef0ff;

  /* ---- Color: Outline ---- */
  --color-outline: #94a3b8;
  --color-outline-variant: #e2e8f0;

  /* ---- Color: Brand ---- */
  --color-primary: #1a56db;
  --color-primary-dark: #003fb1;
  --color-primary-container: #dbe1ff;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #00174d;
  --color-primary-hover: #0f3e99;

  --color-secondary: #15803d;
  --color-secondary-dark: #006c4a;
  --color-secondary-container: #e6f8f0;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #00714e;

  --color-tertiary: #18439e;
  --color-tertiary-container: #dbe1ff;
  --color-on-tertiary: #ffffff;

  /* ---- Color: Semantic ---- */
  --color-error: #ba1a1a;
  --color-on-error: #ffffff;
  --color-error-container: #ffdad6;
  --color-on-error-container: #93000a;

  --color-warning: #b45309;
  --color-warning-container: #fef3c7;
  --color-on-warning-container: #78350f;

  --color-success: #059669;
  --color-success-container: #d1fae5;
  --color-on-success-container: #065f46;

  --color-info: #1a56db;
  --color-info-container: #dbeafe;
  --color-on-info-container: #1e3a8a;

  /* ---- Typography ---- */
  --font-display: "Poppins", "Segoe UI", sans-serif;
  --font-body: "Poppins", "Segoe UI", sans-serif;

  /* Aliases used by auth / older pages */
  --color-text-primary: var(--color-on-surface);
  --color-text-muted: var(--color-on-surface-variant);
  --color-border: var(--color-outline-variant);

  --fs-display: 48px;
  --fs-display-mobile: 34px;
  --fs-headline-lg: 32px;
  --fs-headline-lg-mobile: 26px;
  --fs-headline-md: 24px;
  --fs-headline-sm: 20px;
  --fs-title-lg: 18px;
  --fs-body-lg: 16px;
  --fs-body-md: 14px;
  --fs-body-sm: 13px;
  --fs-label-lg: 14px;
  --fs-label-md: 12px;
  --fs-label-sm: 11px;

  --lh-display: 56px;
  --lh-headline-lg: 40px;
  --lh-headline-md: 32px;
  --lh-headline-sm: 28px;
  --lh-title-lg: 26px;
  --lh-body-lg: 24px;
  --lh-body-md: 20px;
  --lh-body-sm: 18px;

  /* ---- Radius ---- */
  --radius-sm: 0.25rem;   /* 4px  — chips, tags */
  --radius-md: 0.5rem;    /* 8px  — inputs, buttons */
  --radius-lg: 0.75rem;   /* 12px — small cards */
  --radius-xl: 1rem;      /* 16px — cards, panels */
  --radius-2xl: 1.5rem;   /* 24px — modals, banners */
  --radius-full: 9999px;  /* pills, avatars, badges */

  /* ---- Spacing (4px scale) ---- */
  --space-2xs: 0.25rem;  /* 4px */
  --space-xs: 0.5rem;    /* 8px */
  --space-sm: 0.75rem;   /* 12px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 1.5rem;    /* 24px */
  --space-xl: 2rem;      /* 32px */
  --space-2xl: 3rem;     /* 48px */
  --space-3xl: 4rem;     /* 64px */
  --gutter: 1.5rem;
  --container-max: 80rem; /* 1280px */

  /* ---- Elevation ---- */
  --shadow-0: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
  --shadow-1: 0 4px 6px -1px rgba(15, 23, 42, 0.06), 0 2px 4px -2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 20px 25px -5px rgba(15, 23, 42, 0.10), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
  --shadow-focus: 0 0 0 3px rgba(26, 86, 219, 0.15);
  --shadow-verified: 0 0 0 3px rgba(5, 150, 105, 0.15);

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

  /* ---- Z-index scale ---- */
  --z-header: 500;
  --z-dropdown: 600;
  --z-drawer: 700;
  --z-modal: 800;
  --z-toast: 900;
}

/* ---- Dark mode overrides ----
   Elevation matters: the page sits darkest, cards sit a step lighter, and
   hovers/inputs a step lighter again — otherwise every panel melts into the
   background and the whole console reads as one flat sheet. Also note
   `--color-inverse-surface` is what the dashboard sidebar paints itself with,
   so it has to stay DARKER than the content area in this theme. */
html[data-theme="dark"] {
  color-scheme: dark;

  /* Page → card → raised, in visible steps */
  --color-background: #080d18;
  --color-surface: #0f1626;
  --color-surface-bright: #16203a;
  --color-surface-container-lowest: #121a2c;
  --color-surface-container-low: #172037;
  --color-surface-container: #1d2842;
  --color-surface-container-high: #24314f;
  --color-surface-container-highest: #2c3b5e;

  --color-on-surface: #e9edfa;
  --color-on-surface-variant: #a7b2ca;
  --color-on-background: #e9edfa;

  /* The sidebar uses these; keep it a shade below the content area */
  --color-inverse-surface: #0b1220;
  --color-inverse-on-surface: #e9edfa;

  --color-outline: #4a5675;
  --color-outline-variant: #2b3958;

  --color-primary: #3b82f6;
  --color-primary-dark: #93b4ff;
  --color-primary-hover: #60a5fa;
  --color-on-primary: #ffffff;
  --color-primary-container: #1b2f63;
  --color-on-primary-container: #e8eeff;
  --color-info: #93b4ff;

  --color-secondary: #4ade80;
  --color-secondary-dark: #86efac;
  --color-secondary-hover: #6ee7a0;
  --color-secondary-container: #10361f;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #d1fae5;

  --color-success-container: #10361f;
  --color-on-success-container: #a7f3c4;
  --color-warning-container: #3d2a08;
  --color-on-warning-container: #fcd995;
  --color-error: #ff8b8b;
  --color-error-container: #45161b;
  --color-on-error-container: #ffc9c9;
  --color-info-container: #16294d;
  --color-on-info-container: #c3d8ff;

  --shadow-0: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-1: 0 4px 10px -2px rgba(0, 0, 0, 0.55);
  --shadow-2: 0 20px 40px -8px rgba(0, 0, 0, 0.65);
  --shadow-focus: 0 0 0 4px rgba(126, 162, 255, 0.25);
}