/*!
 * Meraki Admin Dashboard - design tokens (the only place colours, sizes and type are defined).
 * Loaded by every page before meraki.css, and by the brand kit on its own.
 * Theme: every colour token is light-dark(light, dark). :root follows the OS through color-scheme;
 * [data-theme] on <html> (written by the theme toggle) pins one scheme.
 */
:root {
  color-scheme: light dark;
  --s-1: 5px; --s-2: 8px; --s-3: 13px; --s-4: 21px; --s-5: 34px; --s-6: 55px;
  --r-1: 5px; --r-2: 8px; --r-3: 13px; --r-pill: 99px;
  --fs-1: 10.2px; --fs-2: 13px; --fs-3: 16.5px; --fs-4: 21px; --fs-5: 26.8px; --fs-6: 34px; --fs-7: 55px; --fs-8: 89px;
  --sidebar: 233px; --rail: 89px; --bar: 55px;
  /* Control and row heights; icon sizes. */
  --ctl-sm: 26.8px; --ctl: 34px; --ctl-lg: 55px;
  --icon-xs: 13px; --icon-sm: 16.5px; --icon: 21px; --icon-lg: 34px;
  /* Horizontal page padding. Use --pad-inline(-wide) with padding-inline: it never drops inside the safe area. */
  --gutter: var(--s-4); --gutter-wide: var(--s-5);
  --pad-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
  --pad-inline-wide: max(var(--gutter-wide), env(safe-area-inset-left, 0px)) max(var(--gutter-wide), env(safe-area-inset-right, 0px));
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --bg: light-dark(#F7F3EC, #01141C); --surface: light-dark(#FFFDF9, #07222D); --surface-2: light-dark(#EFE8DC, #0C2C39); --border: light-dark(#E2D9CB, #143847);
  --text: light-dark(#023347, #F2EADF); --text-2: light-dark(#3A5663, #BDB3A4); --text-3: light-dark(#5E707A, #8C9CA3);
  --accent: light-dark(#215062, #7FB6C8); --accent-tint: light-dark(#E4EEF1, #0E3442); --on-accent: light-dark(#FFFFFF, #01141C);
  --btn: light-dark(#023347, #EE8A47); --on-btn: light-dark(#FFFFFF, #01141C);
  --hi: light-dark(#DE6A21, #EE8A47); --hi-ink: light-dark(#B04E12, #EE8A47); --hi-tint: light-dark(#FCF1E8, #2A1C12);
  --good: light-dark(#15803D, #4ADE80); --good-tint: light-dark(#E8F5EC, #0F2A1F); --good-ink: light-dark(#166534, #86EFAC);
  --warn: light-dark(#B45309, #FBBF24); --warn-tint: light-dark(#FDF3E1, #2D2410); --warn-ink: light-dark(#92400E, #FCD34D);
  --bad: light-dark(#B91C1C, #F87171); --bad-tint: light-dark(#FCEBEB, #2E1616); --bad-ink: light-dark(#991B1B, #FCA5A5);
  --series-1: light-dark(#215062, #7FB6C8); --series-2: light-dark(#DE6A21, #EE8A47); --series-3: light-dark(#D69420, #EAA838); --grid: light-dark(#EDE6DA, #0F2E3B);
  /* Card shadow is off in dark: the colour goes transparent instead of the token becoming `none`. */
  --shadow-c: light-dark(rgb(2 51 71 / .04), transparent);
  --shadow: 0 1px 2px var(--shadow-c), 0 5px 13px var(--shadow-c);
  --shadow-pop: 0 13px 34px light-dark(rgb(2 51 71 / .14), rgb(0 0 0 / .45));
  --scrim: light-dark(rgb(2 51 71 / .35), rgb(0 0 0 / .55));

  /* Brand panels (.auth-art, .cover) stay deep navy in both themes: they are brand art, not page surface. */
  --panel: #023347; --panel-text: #F2EADF; --panel-muted: #BDB3A4; --panel-hi: #EE8A47; --panel-hi-tint: #2A1C12;

  /* Isometric illustration faces: a = orange, b = teal, n = neutral; t/l/r = top, left, right face. */
  --iso-a-t: light-dark(#F0A06A, #F4A673); --iso-a-l: light-dark(#B04E12, #A9541E); --iso-a-r: light-dark(#DE6A21, #D9702F);
  --iso-b-t: light-dark(#9DBCC8, #2E5C6E); --iso-b-l: light-dark(#215062, #123847); --iso-b-r: light-dark(#3D6E80, #1C4859);
  --iso-n-t: light-dark(#FFFDF9, #16394A); --iso-n-l: light-dark(#D9CDBA, #061D27); --iso-n-r: light-dark(#E9E0D1, #0D2B38);
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (max-width: 987px) { :root { --gutter: 16px; --gutter-wide: 16px; } }