/* AdPix design tokens, ported from the AdPix Design System (tokens/*.css) for AdPix Status.
   Self-hosted fonts only (readers inside Iran cannot reach Google Fonts). Light first; a restrained
   ink dark theme follows the OS. Imported by admin.css and public.css; see docs/design-system.md.
   Sizes are --fs-* (the DS reuses --text-body for both a colour and a size; here it is only the colour). */

@font-face { font-family: "Roboto"; src: url("/assets/roboto-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/roboto-500.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/assets/roboto-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("/assets/roboto-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Mono"; src: url("/assets/roboto-mono-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/Vazirmatn-Medium.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Vazirmatn"; src: url("/assets/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* ---- scales (DS colors.css) ---- */
  --orange-50: #fef3ec; --orange-100: #fde0d1; --orange-200: #fac4a6; --orange-300: #f49d78; --orange-400: #f28a5c;
  --orange-500: #f07b49; --orange-600: #e2622d; --orange-700: #bd4f22;
  --amber-50: #fef7e8; --amber-100: #fdebc4; --amber-200: #f9d68a; --amber-300: #f2af4c; --amber-400: #e89a2f; --amber-500: #cf821d;
  --ink-900: #000000; --ink-800: #111111; --ink-700: #1c1c1c; --ink-600: #2a2a2a;
  --white: #ffffff;
  --grey-900: #202124; --grey-700: #3c4043; --grey-600: #5f6368; --grey-400: #9aa0a6; --grey-300: #dadce0;
  --grey-200: #e8eaed; --grey-100: #f1f3f4; --grey-50: #f8f9fa;
  --green-500: #188038; --green-50: #e6f4ea; --red-500: #d93025; --red-50: #fce8e6; --yellow-500: #f9ab00; --yellow-50: #fef7e0;

  /* ---- semantic aliases: use these in components ---- */
  --brand: var(--orange-500);            /* fills, icons, focus, chart series 1 */
  --brand-hover: var(--orange-600);
  --brand-active: var(--orange-700);
  --brand-tint: var(--orange-50);        /* active nav, selected rows, inline table bars */
  --brand-tint-2: var(--orange-100);
  --brand-secondary: var(--amber-300);
  --brand-text: var(--orange-700);       /* orange TEXT (AA on white and on --brand-tint) */
  --brand-solid: #c4511c;                /* primary button fill behind white text (AA 4.6:1) */
  --brand-solid-hover: #a94518;
  --on-brand-solid: #ffffff;

  --text-strong: var(--grey-900);
  --text-body: var(--grey-900);
  --text-muted: var(--grey-600);
  --text-hint: var(--grey-400);
  --text-link: var(--orange-700);
  --text-onbrand: var(--white);

  --surface-page: var(--white);
  --surface-canvas: var(--grey-50);
  --surface-card: var(--white);
  --surface-sunken: var(--grey-50);
  --surface-raised: var(--white);
  --surface-inverse: var(--ink-800);

  --border: var(--grey-300);
  --border-strong: var(--grey-400);
  --divider: var(--grey-100);

  /* status trio: fill colours (dots, bars, meters) + text-safe variants + tinted backgrounds */
  --positive: var(--green-500); --positive-text: #137333; --positive-bg: var(--green-50);
  --negative: var(--red-500);   --negative-text: #b3261e; --negative-bg: var(--red-50);
  --warning: var(--yellow-500); --warning-text: #8a6100;  --warning-bg: var(--yellow-50);
  --info: #12b5cb;              --info-text: #0b6e7c;     --info-bg: #e3f6f9;
  --neutral-fill: var(--grey-400); --neutral-bg: var(--grey-100);

  /* status-page states (one place, used by admin and public) */
  --st-operational: var(--positive);
  --st-degraded: var(--warning);
  --st-partial: #e8710a;
  --st-major: var(--negative);
  --st-maintenance: var(--brand);
  --st-nodata: var(--grey-300);
  --partial-text: #a14a00; --partial-bg: #feefe3;
  --on-negative: var(--white);

  --focus-ring: var(--orange-500);
  --focus-halo: rgba(240, 123, 73, .25);

  /* data-viz palette, brand-led (DS charts.js) */
  --series-1: #f07b49; --series-2: #f2af4c; --series-3: #12b5cb; --series-4: #9334e6;
  --series-5: #188038; --series-6: #e52592; --series-7: #f49d78; --series-8: #5f6368;

  /* ---- typography (DS typography.css) ---- */
  --font-display: "Fredoka", "Roboto", "Vazirmatn", system-ui, sans-serif; /* Fredoka not shipped: falls back to Roboto */
  --font-ui: "Roboto", "Vazirmatn", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-fa: "Vazirmatn", "Roboto", Tahoma, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --fs-micro: 11px; --fs-caption: 12px; --fs-small: 13px; --fs-body: 14px; --fs-base: 15px;
  --fs-lg: 18px; --fs-h2: 22px; --fs-kpi: 30px; --fs-display: 44px;
  --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-fa: 1.8;
  --tracking-label: .6px; --tracking-kpi: -.5px; --tracking-display: -1px;

  /* ---- spacing, radii, elevation, motion (DS spacing.css) ---- */
  --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --pad-card: 16px 18px; --pad-input: 8px 11px; --pad-button: 9px 18px;
  --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; --radius-pill: 999px;
  --shell-topbar: 56px; --shell-sidebar: 248px;
  --shadow-card: 0 1px 2px rgba(60, 64, 67, .08);
  --shadow-raised: 0 1px 3px rgba(60, 64, 67, .15);
  --shadow-menu: 0 4px 14px rgba(60, 64, 67, .20);
  --shadow-popover: 0 6px 20px rgba(60, 64, 67, .25);
  --shadow-drawer: 2px 0 14px rgba(60, 64, 67, .25);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --dur-fast: 120ms; --dur-base: 150ms; --dur-slow: 200ms;
}

/* Dark: ink surfaces, orange stays the accent; every text pair is AA. */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-tint: #3a2317; --brand-tint-2: #4a2c1c;
    --brand-text: var(--orange-300);
    --brand-solid: var(--orange-500); --brand-solid-hover: var(--orange-400); --on-brand-solid: var(--ink-800);
    --text-strong: #f1f3f4; --text-body: #e8eaed; --text-muted: #a8adb3; --text-hint: #80868b;
    --text-link: var(--orange-300); --text-onbrand: var(--ink-800);
    --surface-page: var(--ink-800); --surface-canvas: var(--ink-800); --surface-card: var(--ink-700);
    --surface-sunken: #242424; --surface-raised: #262626; --surface-inverse: var(--grey-100);
    --border: #3c4043; --border-strong: #5f6368; --divider: #2c2c2c;
    --positive: #81c995; --positive-text: #81c995; --positive-bg: #143020;
    --negative: #f28b82; --negative-text: #f28b82; --negative-bg: #3c1b18;
    --warning: #fdd663; --warning-text: #fdd663; --warning-bg: #352c0d;
    --info: #78d9ec; --info-text: #78d9ec; --info-bg: #0f2e33;
    --neutral-fill: #80868b; --neutral-bg: #2a2a2a;
    --st-partial: #fcad70; --st-nodata: #3c4043;
    --partial-text: #fcad70; --partial-bg: #3a2412;
    --on-negative: var(--ink-800);
    --focus-halo: rgba(240, 123, 73, .35);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .5); --shadow-raised: 0 1px 3px rgba(0, 0, 0, .6);
    --shadow-menu: 0 4px 14px rgba(0, 0, 0, .6); --shadow-popover: 0 6px 20px rgba(0, 0, 0, .65);
    --shadow-drawer: 2px 0 14px rgba(0, 0, 0, .6);
    --series-5: #81c995; --series-8: #a8adb3;
  }
}

/* shared element defaults (DS base.css) */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-ui); font-size: var(--fs-body); line-height: var(--leading-normal); color: var(--text-body); background: var(--surface-canvas); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body:lang(fa), body [lang="fa"] { font-family: var(--font-fa); letter-spacing: 0; }
::selection { background: var(--orange-200); color: var(--ink-800); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 4px var(--focus-halo); }
.sr-only { position: absolute !important; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.mono, code, kbd, samp { font-family: var(--font-mono); }
.num, .tnum { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }