/* ==========================================================================
   Demo — design tokens + base
   Loaded on every redesigned page, before components.css.
   No build step. Works on all evergreen browsers incl. iOS Safari 14+.
   ========================================================================== */

:root {
  /* Brand */
  --a1-purple-50:  #F3EEFF;
  --a1-purple-100: #E7DCFF;
  --a1-purple-300: #B79CFF;
  --a1-purple-500: #6C2BFF;
  --a1-purple-600: #5B1FE0;
  --a1-purple-700: #4A16B8;
  --a1-blue-50:    #EFF4FF;
  --a1-blue-500:   #2563EB;
  --a1-blue-600:   #1D4FD8;
  --a1-cyan-50:    #E9FBFE;
  --a1-cyan-500:   #06B6D4;
  --a1-cyan-700:   #0E7490;

  /* Status (500 = icon/fill, 700 = text on 50 background, AA contrast) */
  --a1-success-50: #ECFDF3; --a1-success-500: #16A34A; --a1-success-700: #15803D;
  --a1-warning-50: #FFFBEB; --a1-warning-500: #F59E0B; --a1-warning-700: #B45309;
  --a1-danger-50:  #FEF2F2; --a1-danger-500:  #DC2626; --a1-danger-700:  #B91C1C;
  --a1-info-50:    #EFF4FF; --a1-info-500:    #2563EB; --a1-info-700:    #1D4ED8;

  /* Neutrals */
  --a1-ink:      #0F172A;  /* headings, values */
  --a1-ink-2:    #334155;  /* body */
  --a1-ink-3:    #64748B;  /* secondary, meets 4.5:1 on white */
  --a1-ink-4:    #94A3B8;  /* placeholders, disabled */
  --a1-line:     #E3E8F2;
  --a1-line-2:   #EEF2F8;
  --a1-canvas:   #F5F7FB;
  --a1-surface:  #FFFFFF;
  --a1-surface-2:#F9FAFD;

  /* Semantic aliases used by components */
  --a1-primary:        var(--a1-purple-500);
  --a1-primary-hover:  var(--a1-purple-600);
  --a1-primary-press:  var(--a1-purple-700);
  --a1-primary-soft:   var(--a1-purple-50);
  --a1-primary-text:   var(--a1-purple-600);
  --a1-link:           var(--a1-blue-500);
  --a1-focus:          #A78BFA;
  --a1-brand-gradient: linear-gradient(135deg, #6C2BFF 0%, #2563EB 60%, #06B6D4 100%);

  /* Glass (use sparingly: login panel, modals, dropdowns, floating widgets) */
  --a1-glass-bg:     rgba(255, 255, 255, .72);
  --a1-glass-border: rgba(255, 255, 255, .9);
  --a1-glass-blur:   saturate(160%) blur(16px);

  /* Type */
  --a1-font:         "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --a1-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --a1-font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  --a1-text-xs:  12px;
  --a1-text-sm:  13px;
  --a1-text-md:  15px;   /* base UI size */
  --a1-text-lg:  17px;
  --a1-text-xl:  20px;
  --a1-text-2xl: 24px;
  --a1-text-3xl: 30px;
  --a1-text-4xl: 40px;

  /* Spacing (4px grid) */
  --a1-s1: 4px;  --a1-s2: 8px;  --a1-s3: 12px; --a1-s4: 16px;
  --a1-s5: 20px; --a1-s6: 24px; --a1-s8: 32px; --a1-s10: 40px; --a1-s12: 48px;

  /* Radii — hierarchy, not one value for everything */
  --a1-r-xs: 6px;    /* badges, chips */
  --a1-r-sm: 10px;   /* buttons, inputs */
  --a1-r-md: 14px;   /* cards */
  --a1-r-lg: 20px;   /* panels, modals */
  --a1-r-pill: 999px;

  /* Elevation — tinted with navy, never flat grey */
  --a1-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
  --a1-shadow-2: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -10px rgba(15, 23, 42, .14);
  --a1-shadow-3: 0 2px 6px rgba(15, 23, 42, .06), 0 28px 56px -20px rgba(38, 20, 110, .30);

  /* Motion */
  --a1-ease: cubic-bezier(.2, .7, .2, 1);
  --a1-fast: 120ms;
  --a1-med:  220ms;

  /* Layout */
  --a1-sidebar-w: 264px;
  --a1-sidebar-w-collapsed: 76px;
  --a1-topbar-h: 64px;
  --a1-content-max: 1440px;

  color-scheme: light;
}

/* ---------- Dark theme: real palette, not an inversion ---------- */
:root[data-theme="dark"] {
  --a1-ink:       #E8ECF4;
  --a1-ink-2:     #C3CBDA;
  --a1-ink-3:     #8E9AB1;
  --a1-ink-4:     #5E6A82;
  --a1-line:      #243049;
  --a1-line-2:    #1C273D;
  --a1-canvas:    #0B1120;
  --a1-surface:   #111A2C;
  --a1-surface-2: #152036;

  --a1-primary:       #8B5CFF;
  --a1-primary-hover: #9D75FF;
  --a1-primary-press: #7A47F0;
  --a1-primary-soft:  rgba(139, 92, 255, .14);
  --a1-primary-text:  #B79CFF;
  --a1-link:          #6EA0FF;
  --a1-focus:         #B79CFF;

  --a1-success-50: rgba(22, 163, 74, .14);  --a1-success-700: #4ADE80;
  --a1-warning-50: rgba(245, 158, 11, .14); --a1-warning-700: #FBBF24;
  --a1-danger-50:  rgba(220, 38, 38, .16);  --a1-danger-700:  #F87171;
  --a1-info-50:    rgba(37, 99, 235, .16);  --a1-info-700:    #93B4FF;

  --a1-purple-50: rgba(139, 92, 255, .14);
  --a1-purple-100: rgba(139, 92, 255, .28);
  --a1-blue-50:   rgba(37, 99, 235, .18);
  --a1-blue-500:  #6EA0FF;
  --a1-cyan-50:   rgba(6, 182, 212, .16);
  --a1-cyan-700:  #22D3EE;

  --a1-glass-bg:     rgba(17, 26, 44, .72);
  --a1-glass-border: rgba(255, 255, 255, .08);

  --a1-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --a1-shadow-2: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px -12px rgba(0, 0, 0, .6);
  --a1-shadow-3: 0 2px 6px rgba(0, 0, 0, .4), 0 28px 56px -20px rgba(0, 0, 0, .7);

  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body.a1 {
  margin: 0;
  min-height: 100vh;
  background: var(--a1-canvas);
  color: var(--a1-ink-2);
  font-family: var(--a1-font);
  font-size: var(--a1-text-md);
  line-height: 1.55;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

:where(.a1) h1, :where(.a1) h2, :where(.a1) h3, :where(.a1) h4 {
  margin: 0;
  color: var(--a1-ink);
  font-family: var(--a1-font-display);
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.2;
}
:where(.a1) h1 { font-size: var(--a1-text-3xl); }
:where(.a1) h2 { font-size: var(--a1-text-2xl); }
:where(.a1) h3 { font-size: var(--a1-text-xl); }
:where(.a1) h4 { font-size: var(--a1-text-lg); }
:where(.a1) p { margin: 0; }

:where(.a1) a { color: var(--a1-link); text-decoration: none; }
:where(.a1) a:hover { text-decoration: underline; text-underline-offset: 3px; }

:where(.a1) img, :where(.a1) svg { max-width: 100%; }
.a1 svg.a1-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }

/* Money and IDs line up in columns */
.a1-num   { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.a1-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 600; color: var(--a1-ink); white-space: nowrap; }
.a1-mono  { font-family: var(--a1-font-mono); font-size: .92em; }
.a1-muted { color: var(--a1-ink-3); }

/* Focus: visible for keyboard, quiet for mouse */
.a1 :focus { outline: none; }
.a1 :focus-visible {
  outline: 3px solid var(--a1-focus);
  outline-offset: 2px;
  border-radius: var(--a1-r-xs);
}

[hidden] { display: none !important; }

.a1-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.a1-skip {
  position: absolute; left: 12px; top: -48px; z-index: 1000;
  background: var(--a1-ink); color: #fff !important; padding: 10px 14px; border-radius: var(--a1-r-sm);
  transition: top var(--a1-fast) var(--a1-ease);
}
.a1-skip:focus { top: 12px; }

::selection { background: var(--a1-purple-100); color: var(--a1-ink); }

@media (prefers-reduced-motion: reduce) {
  .a1 *, .a1 *::before, .a1 *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}