/* ==========================================================================
   DevsGroup design tokens
   Palette lifted from the DevsGroup Analytics reference (gold/black on a
   neutral ground). Light is default; dark activates via
   prefers-color-scheme or an explicit [data-theme="dark"].
   ========================================================================== */

:root {
  /* ---- Color: light ---- */
  --color-canvas: #F4F5F2;
  --color-canvas-inset: #F0F1ED;
  --color-surface: #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-border: #E2E4DD;
  --color-border-strong: #CDD0C7;

  --color-ink: #1B1E16;
  --color-ink-muted: #4A4E44;
  --color-ink-faint: #7C8074;
  --color-ink-on-accent: #1F1C00;

  /* Raw brand yellow — for solid fills only (buttons, dots, rings). Text
     sitting ON TOP of the accent uses --color-ink-on-accent; text used
     AS an accent color (links, active nav) uses --color-accent-ink,
     which is readable against canvas/surface in both themes. */
  --color-accent: #FCE900;
  --color-accent-ink: #7A6E00;
  --color-accent-soft: #FBF3B8;
  --color-accent-soft-strong: #F5E88C;

  --color-teal: #0A9E90;
  --color-teal-soft: #D4F1ED;
  --color-violet: #7C4DFF;

  --color-success: #12A150;
  --color-success-soft: #D7F0E0;
  --color-warning: #D97800;
  --color-warning-soft: #FBEBD0;
  --color-danger: #E5484D;
  --color-danger-soft: #FBE3E4;

  --color-focus-ring: rgba(252, 233, 0, 0.45);

  /* Brand panel (login/register hero) — kept for the sidebar/topbar's
     always-dark brand mark; the auth-shell hero itself now follows theme via
     --color-canvas/--color-ink instead of these. */
  --color-brand-panel: #0F1418;
  --color-brand-panel-raised: #171E23;
  --color-brand-line: rgba(232, 234, 237, 0.09);
  --color-brand-ink: #E8EAED;
  --color-brand-ink-muted: rgba(232, 234, 237, 0.62);

  /* Node-mesh dot/hairline color. Bright brand yellow reads with plenty of
     contrast on the always-dark surfaces (dashboard header texture); on the
     auth hero's light-mode near-white backdrop the same bright yellow at low
     alpha nearly disappears, so light mode uses a deeper, more saturated
     gold instead — same hue family, enough luminance contrast to read. */
  --mesh-dot-rgb: 189, 158, 0;

  /* ---- Type ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

  --text-display: 2.75rem;
  --text-h1: 1.875rem;
  --text-h2: 1.375rem;
  --text-h3: 1.0625rem;
  --text-body: 0.9375rem;
  --text-small: 0.8125rem;
  --text-micro: 0.6875rem;

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.55;

  /* ---- Space (0.25rem base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 6rem;

  /* ---- Shape ---- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 0.875rem;
  --radius-xl: 1.25rem;
  --radius-full: 999rem;

  /* ---- Elevation ---- */
  --shadow-xs: 0 0.0625rem 0.125rem rgba(20, 22, 20, 0.05);
  --shadow-sm: 0 0.25rem 0.75rem -0.375rem rgba(20, 22, 20, 0.1);
  --shadow-md: 0 0.5rem 1.5rem -0.75rem rgba(20, 22, 20, 0.16);
  --shadow-lg: 0 1rem 3.125rem -0.75rem rgba(20, 22, 20, 0.28);

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

  color-scheme: light;
}

[data-theme="dark"] {
  --color-canvas: #0F1418;
  --color-canvas-inset: #171E23;
  --color-surface: #171E23;
  --color-surface-raised: #1E272D;
  --color-border: #2B363E;
  --color-border-strong: #3B4A54;

  --color-ink: #E8EAED;
  --color-ink-muted: #AEB8BF;
  --color-ink-faint: #79858D;
  --color-ink-on-accent: #1F1C00;

  --color-accent: #FCE900;
  --color-accent-ink: #FCE900;
  --color-accent-soft: #2C2A08;
  --color-accent-soft-strong: #4A4413;

  --color-teal: #03DAC6;
  --color-teal-soft: #0E2E2C;
  --color-violet: #BB86FC;

  --color-success: #00E676;
  --color-success-soft: #0F2E1E;
  --color-warning: #FF9F1C;
  --color-warning-soft: #33260C;
  --color-danger: #FF5252;
  --color-danger-soft: #331A1B;

  --color-focus-ring: rgba(252, 233, 0, 0.4);

  --mesh-dot-rgb: 252, 233, 0;

  --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 0.375rem 1.125rem -0.5rem rgba(0, 0, 0, 0.6);
  --shadow-md: 0 0.75rem 2.125rem -0.875rem rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 1.125rem 3.375rem -0.875rem rgba(0, 0, 0, 0.8);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: #0F1418;
    --color-canvas-inset: #171E23;
    --color-surface: #171E23;
    --color-surface-raised: #1E272D;
    --color-border: #2B363E;
    --color-border-strong: #3B4A54;

    --color-ink: #E8EAED;
    --color-ink-muted: #AEB8BF;
    --color-ink-faint: #79858D;

    --color-accent: #FCE900;
    --color-accent-ink: #FCE900;
    --color-accent-soft: #2C2A08;
    --color-accent-soft-strong: #4A4413;

    --color-teal: #03DAC6;
    --color-teal-soft: #0E2E2C;
    --color-violet: #BB86FC;

    --color-success: #00E676;
    --color-success-soft: #0F2E1E;
    --color-warning: #FF9F1C;
    --color-warning-soft: #33260C;
    --color-danger: #FF5252;
    --color-danger-soft: #331A1B;

    --color-focus-ring: rgba(252, 233, 0, 0.4);

    --mesh-dot-rgb: 252, 233, 0;

    --shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5);
    --shadow-sm: 0 0.375rem 1.125rem -0.5rem rgba(0, 0, 0, 0.6);
    --shadow-md: 0 0.75rem 2.125rem -0.875rem rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 1.125rem 3.375rem -0.875rem rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}