/* AXIS shared design tokens — portal DNA for admin + portal */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Syne:wght@600;700;800&display=swap');

:root,
html[data-theme='dark'] {
  color-scheme: dark;
  /* Lighter modern graphite — soft charcoal, restrained accent */
  --axis-bg: #242428;
  --axis-bg-elevated: #2c2c31;
  --axis-surface: #34343a;
  --axis-surface-2: #3c3c43;
  --axis-surface-hover: #45454d;
  --axis-zone: transparent;
  --axis-zone-alt: rgba(255, 255, 255, 0.04);
  --axis-zone-ink: #1c1c1f;
  --axis-ink: #f4f4f5;
  --axis-ink-soft: #cbcbd0;
  --axis-muted: #9e9ea4;
  --axis-faint: #75757c;
  --axis-line: rgba(255, 255, 255, 0.09);
  --axis-line-strong: rgba(255, 255, 255, 0.16);
  --axis-accent: #b4e85c;
  --axis-accent-hover: #c4f070;
  --axis-accent-ink: #16181a;
  --axis-accent-soft: rgba(180, 232, 92, 0.06);
  --axis-accent-glow: rgba(180, 232, 92, 0.12);
  --axis-danger: #f07178;
  --axis-danger-soft: rgba(240, 113, 120, 0.12);
  --axis-ok: #7dd3a0;
  --axis-warn: #e8c07a;
  --axis-shadow: 0 36px 90px rgba(0, 0, 0, 0.28);
  --axis-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 36px rgba(0, 0, 0, 0.12);
  --axis-overlay: rgba(16, 16, 18, 0.58);
  --axis-glow: radial-gradient(ellipse 85% 65% at 88% -18%, rgba(180, 232, 92, 0.05), transparent 52%),
    radial-gradient(ellipse 55% 45% at 0% 100%, rgba(255, 255, 255, 0.04), transparent 55%);
  --axis-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.028'/%3E%3C/svg%3E");
  --axis-font: 'Manrope', system-ui, sans-serif;
  --axis-display: 'Syne', system-ui, sans-serif;
  --sidebar-width: 268px;
  --sidebar-compact: 76px;
  --content-max: 1680px;
  --radius-1: 0;
  --radius-2: 0;
  --radius-3: 0;
  --radius: 0;
  --focus: 0 0 0 3px rgba(255, 255, 255, 0.1);

  --bg: var(--axis-bg);
  --bg-soft: var(--axis-bg-elevated);
  --surface: var(--axis-surface);
  --surface-raised: var(--axis-surface-2);
  --surface-hover: var(--axis-surface-hover);
  --surface-strong: #4a4a50;
  --surface-soft: var(--axis-accent-soft);
  --surface2: var(--axis-surface-2);
  --surface3: #4a4a50;
  --panel: var(--axis-bg-elevated);
  --border: var(--axis-line);
  --border-strong: var(--axis-line-strong);
  --text: var(--axis-ink);
  --text-soft: var(--axis-ink-soft);
  --muted: var(--axis-muted);
  --quiet: var(--axis-faint);
  --accent: var(--axis-accent);
  --line: var(--axis-line);
  --line-hi: var(--axis-line-strong);
  --axis-red: var(--axis-danger);
  --axis-amber: var(--axis-warn);
  --cyan: var(--axis-accent);
  --blue: var(--axis-accent);
  --green: var(--axis-ok);
  --orange: var(--axis-warn);
  --danger: var(--axis-danger);
}

html[data-theme='light'] {
  color-scheme: light;
  --axis-bg: #eef0f2;
  --axis-bg-elevated: #f7f8f9;
  --axis-surface: #ffffff;
  --axis-surface-2: #f3f4f6;
  --axis-surface-hover: #ebedf0;
  --axis-zone: transparent;
  --axis-zone-alt: rgba(20, 23, 26, 0.04);
  --axis-zone-ink: #101214;
  --axis-ink: #14171a;
  --axis-ink-soft: #3a4048;
  --axis-muted: #5f6770;
  --axis-faint: #8a929b;
  --axis-line: rgba(20, 23, 26, 0.1);
  --axis-line-strong: rgba(20, 23, 26, 0.18);
  --axis-accent: #4a7c0f;
  --axis-accent-hover: #3d6a0c;
  --axis-accent-ink: #ffffff;
  --axis-accent-soft: rgba(74, 124, 15, 0.1);
  --axis-accent-glow: rgba(74, 124, 15, 0.18);
  --axis-danger: #c23b45;
  --axis-danger-soft: rgba(194, 59, 69, 0.1);
  --axis-ok: #1f7a4d;
  --axis-warn: #9a6b1a;
  --axis-shadow: 0 30px 80px rgba(20, 23, 26, 0.12);
  --axis-shadow-card: 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 36px rgba(20, 23, 26, 0.06);
  --axis-overlay: rgba(20, 23, 26, 0.48);
  --axis-glow: radial-gradient(ellipse 80% 60% at 90% -10%, rgba(74, 124, 15, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(20, 23, 26, 0.04), transparent 50%);
  --axis-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
  --focus: 0 0 0 3px rgba(74, 124, 15, 0.18);

  --bg: var(--axis-bg);
  --bg-soft: var(--axis-bg-elevated);
  --surface: var(--axis-surface);
  --surface-raised: var(--axis-surface-2);
  --surface-hover: var(--axis-surface-hover);
  --surface-strong: #e8eaed;
  --surface-soft: var(--axis-accent-soft);
  --surface2: var(--axis-surface-2);
  --surface3: #e8eaed;
  --panel: var(--axis-surface);
  --border: var(--axis-line);
  --border-strong: var(--axis-line-strong);
  --text: var(--axis-ink);
  --text-soft: var(--axis-ink-soft);
  --muted: var(--axis-muted);
  --quiet: var(--axis-faint);
  --accent: var(--axis-accent);
  --line: var(--axis-line);
  --line-hi: var(--axis-line-strong);
  --cyan: var(--axis-accent);
  --blue: var(--axis-accent);
  --green: var(--axis-ok);
  --orange: var(--axis-warn);
  --danger: var(--axis-danger);
}