/* ===========================================================================
   SWAYA — design tokens  (v3)

   The bottom layer, loaded first by every page in the product: the signed-out
   pages (swaya-ui.css) and the four dashboards (swaya-dash.css) both build on
   it. Colours, type, radii, shadows, the z-scale, the focus ring — anything
   two layers would otherwise each define for themselves, and then disagree
   about by next month.

   The palette is unchanged from what the product already shipped: the ink
   navy the app is built on, the sky/brand blue ramp, and the mint / amber /
   coral status trio. What changed is how they are arranged.

   Served by hand from admin.py (not the static handler) so the Control Center
   brand filter in theme.py can rewrite the accent ramp on the way out. See
   THEMED_STYLESHEETS there.
   =========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root{
  /* structure — the dark end. Never repainted by the brand filter, on
     purpose: these are the walls, not the accent. */
  --ink:#0E2136;
  --ink-2:#132B45;
  --navy:#16324F;
  --navy-mid:#24506F;

  /* the accent ramp — this is what follows the Control Center brand colour */
  --steel:#2E6D9E;
  --brand:#38AEEA;
  --sky-deep:#57B8E8;
  --sky:#89CFF0;
  --sky-pale:#C4E4F6;

  /* status. Meaning lives here, so nothing else is allowed to look like it. */
  --mint:#2E9E7B;
  --amber:#E8B23A;
  --coral:#E2624B;
  --iris:#8C7AE0;

  /* light surfaces */
  --paper:#FFFFFF;
  --paper-2:#F7FAFD;
  --paper-3:#EFF5FA;
  --line:#E4EDF5;
  --line-2:#D2E0EC;

  /* text on light */
  --text:#0E2136;
  --text-2:#41586E;
  --muted:#5B7185;
  --faint:#8496A8;

  /* text on the dark stage */
  --on-dark:#F2F7FC;
  --on-dark-2:rgba(214,232,247,.80);
  --on-dark-3:rgba(214,232,247,.58);
  --on-dark-line:rgba(137,207,240,.20);

  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --head:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --r-xs:8px; --r-sm:11px; --r-md:14px; --r-lg:18px; --r-xl:26px; --r-2xl:32px;

  /* One shadow family, three depths. Tinted with the ink rather than black so
     a lifted element still belongs to the page it sits on. */
  --sh-1:0 1px 2px rgba(14,33,54,.06), 0 2px 6px rgba(14,33,54,.05);
  --sh-2:0 2px 4px rgba(14,33,54,.06), 0 10px 26px rgba(14,33,54,.10);
  --sh-3:0 1px 2px rgba(14,33,54,.10), 0 18px 44px rgba(14,33,54,.16);
  --sh-4:0 2px 6px rgba(14,33,54,.14), 0 40px 90px rgba(14,33,54,.42);

  --ease:cubic-bezier(.22,1,.36,1);
  --fast:.16s var(--ease);
  --med:.26s var(--ease);

  /* z-scale, so nothing is ever guessed */
  --z-bg:0; --z-body:10; --z-sticky:20; --z-overlay:50; --z-toast:60;
}

/* Arabic gets its own family for both roles; Sora has no Arabic coverage and
   the fallback used to be whatever the OS picked. */
html[dir="rtl"]{
  --font:'IBM Plex Sans Arabic',system-ui,sans-serif;
  --head:'IBM Plex Sans Arabic',system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font); color:var(--text);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--steel)}

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

/* A keyboard user should not have to walk the whole brand column to reach the
   form. First tab stop on every page. */
.skip{position:absolute;inset-inline-start:12px;top:-60px;z-index:var(--z-toast);
  padding:11px 18px;border-radius:var(--r-sm);background:var(--paper);color:var(--navy);
  font-size:13px;font-weight:600;text-decoration:none;box-shadow:var(--sh-3);
  transition:top var(--fast)}
.skip:focus{top:12px}

/* An arrow that does not mirror in Arabic is pointing the wrong way. Lives
   here rather than in either layer because both draw them. */
html[dir="rtl"] .arrow{transform:scaleX(-1)}

:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--sky-deep); outline-offset:2px;
  box-shadow:0 0 0 5px rgba(87,184,232,.26);
}
::selection{background:rgba(87,184,232,.32)}

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