/**
 * EGIDA SHIELD — Design System tokens (Stage 24)
 * Brand: dark professional SaaS · turquoise/cyan accent (restrained)
 * Existing pages keep admin.css until Stage 25+ migration.
 */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Onest:wght@400;500;600;700&display=swap");

:root {
  /* ——— Color: surfaces ——— */
  --eg-bg-canvas: #0a0f14;
  --eg-bg-surface: #111820;
  --eg-bg-elevated: #17202a;
  --eg-bg-overlay: rgba(4, 8, 12, 0.72);
  --eg-bg-hover: rgba(46, 184, 166, 0.06);
  --eg-bg-active: rgba(46, 184, 166, 0.12);

  /* ——— Color: borders ——— */
  --eg-border: #243040;
  --eg-border-strong: #334556;
  --eg-border-focus: color-mix(in srgb, var(--eg-accent) 55%, transparent);

  /* ——— Color: text ——— */
  --eg-text: #e8eef4;
  --eg-text-secondary: #a8b6c6; /* ~7:1 on canvas — Stage 34 a11y */
  --eg-text-muted: #8b9caf;     /* ~5.2:1 on canvas — captions/labels */
  --eg-text-inverse: #061018;
  --eg-text-brand: #f2f7fc;

  /* ——— Color: accent (turquoise / cyan, restrained) ——— */
  --eg-accent: #2eb8a6;
  --eg-accent-hover: #3cc9b6;
  --eg-accent-press: #249e8e;
  --eg-accent-soft: rgba(46, 184, 166, 0.14);
  --eg-accent-ring: rgba(46, 184, 166, 0.45);
  --eg-link: #3cc9b6;

  /* ——— Color: semantic ——— */
  --eg-success: #3ecf8e;
  --eg-success-soft: rgba(62, 207, 142, 0.14);
  --eg-warning: #d4a017;
  --eg-warning-soft: rgba(212, 160, 23, 0.16);
  --eg-danger: #e35d6a;
  --eg-danger-soft: rgba(227, 93, 106, 0.14);
  --eg-danger-hover: #ef7480;
  --eg-info: #5aa0c8;
  --eg-info-soft: rgba(90, 160, 200, 0.14);

  /* ——— Color: charts ——— */
  --eg-chart-1: #2eb8a6;
  --eg-chart-2: #5aa0c8;
  --eg-chart-3: #3ecf8e;
  --eg-chart-4: #d4a017;
  --eg-chart-5: #8b9cb0;
  --eg-chart-grid: rgba(36, 48, 64, 0.9);
  --eg-chart-axis: #8b9caf;

  /* ——— Typography ——— */
  --eg-font-sans: "Onest", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --eg-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --eg-text-h1: 1.625rem;   /* 26px */
  --eg-text-h2: 1.25rem;    /* 20px */
  --eg-text-h3: 1.0625rem;  /* 17px */
  --eg-text-body: 0.9375rem; /* 15px */
  --eg-text-secondary-size: 0.875rem; /* 14px */
  --eg-text-caption: 0.75rem; /* 12px */
  --eg-text-table: 0.875rem;

  --eg-leading-tight: 1.25;
  --eg-leading-body: 1.5;
  --eg-weight-regular: 400;
  --eg-weight-medium: 500;
  --eg-weight-semibold: 600;
  --eg-weight-bold: 700;
  --eg-tracking-brand: 0.04em;
  --eg-tracking-label: 0.04em;

  /* ——— Spacing (4px base) ——— */
  --eg-space-0: 0;
  --eg-space-1: 0.25rem;  /* 4 */
  --eg-space-2: 0.5rem;   /* 8 */
  --eg-space-3: 0.75rem;  /* 12 */
  --eg-space-4: 1rem;     /* 16 */
  --eg-space-5: 1.25rem;  /* 20 */
  --eg-space-6: 1.5rem;   /* 24 */
  --eg-space-8: 2rem;     /* 32 */
  --eg-space-10: 2.5rem;  /* 40 */
  --eg-space-12: 3rem;    /* 48 */

  /* ——— Layout shell (Stage 25 will use) ——— */
  --eg-sidebar-width: 240px;
  --eg-sidebar-collapsed: 64px;
  --eg-topbar-height: 56px;
  --eg-content-max: 1280px;
  --eg-page-pad-x: 1.25rem;
  --eg-page-pad-y: 1.25rem;

  /* ——— Radii / elevation ——— */
  --eg-radius-sm: 6px;
  --eg-radius: 8px;
  --eg-radius-md: 10px;
  --eg-radius-lg: 12px;
  --eg-radius-pill: 999px;
  --eg-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --eg-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
  --eg-shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.4);

  /* ——— Motion ——— */
  --eg-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --eg-duration-fast: 120ms;
  --eg-duration: 180ms;

  /* ——— Control sizes ——— */
  --eg-control-h: 2.25rem;
  --eg-control-h-sm: 1.875rem;
  --eg-z-dropdown: 40;
  --eg-z-sticky: 50;
  --eg-z-modal: 80;
  --eg-z-toast: 90;

  /* ——— Breakpoints (reference; used in media queries) ——— */
  /* sm 640 · md 768 · lg 1024 · xl 1280 */
}

/* Utility: apply DS base when document opts in */
.eg-ds,
.eg-ds body {
  font-family: var(--eg-font-sans);
  font-size: var(--eg-text-body);
  line-height: var(--eg-leading-body);
  color: var(--eg-text);
  background-color: var(--eg-bg-canvas);
}

.eg-ds {
  background:
    radial-gradient(1000px 480px at 8% -8%, rgba(46, 184, 166, 0.07) 0%, transparent 55%),
    linear-gradient(165deg, var(--eg-bg-canvas), #0d141c 45%, #080c10);
  min-height: 100%;
}