/* Kaynak: Nereus Infra Monitoring/Design/mockups/assets/tokens.css — birebir kopya, 2026-09-28. Düzenleme yok; güncelleme tools/design-sync.ps1 ile. */
/* ══════════════════════════════════════════════════════════════════════════
   Nereus — canonical design tokens.
   Locked 2026-08-02 with screen 0.  Every mockup links this file; no mockup
   redefines a token locally.  Rationale for each decision lives in
   SCREENS.md, section "Tasarim yonu".

   Rules that outlive any single screen:
     · The greys carry NO hue bias.  All colour comes from --accent or a status.
     · There is exactly one accent, and it never expresses state.
     · --ok / --warn / --crit are never derived from --accent.
     · Light and dark are designed together and maintained together.
     · Nothing is carried by colour alone (reports print in black and white).
     · No runtime case conversion anywhere (Turkish dotless i).
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────── neutrals ───────────────────────────── */
:root{
  color-scheme:light;   /* yerel kontroller (tarih, select, kaydırma çubuğu) temayı izler */
  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-2:#F2F4F7;
  --input:#FFFFFF;
  --input-hover:#FAFBFC;
  --border:rgba(16,20,28,.12);
  --border-strong:rgba(16,20,28,.20);
  --ink:#12161C;
  --ink-2:#545C68;
  --ink-3:#7C8592;
  --ok:#2E8862;
  --warn:#8E6416;
  --crit:#B33A2C;
  --ok-bg:rgba(46,136,98,.06);
  --warn-bg:rgba(142,100,22,.07);
  --crit-bg:rgba(179,58,44,.055);
  --ok-border:rgba(46,136,98,.26);
  --warn-border:rgba(142,100,22,.28);
  --crit-border:rgba(179,58,44,.26);
  --shadow:0 1px 2px rgba(16,20,28,.05), 0 12px 32px -14px rgba(16,20,28,.20);
  --shadow-sm:0 1px 2px rgba(16,20,28,.06);
  --scrim:rgba(16,20,28,.42);
  --grain:.028;

  /* rhythm — 8pt, with a 4pt half-step */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  --control-h:44px;      /* inputs, primary buttons */
  --control-h-sm:32px;   /* toolbar buttons, chips */
  --radius:8px;          /* inputs, buttons */
  --radius-lg:12px;      /* cards, sheets */
  --radius-sm:6px;
  --dur:140ms;           /* every interaction transition */
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --bg:#0A0C10;
    --surface:#12151B;
    --surface-2:#171B22;
    --input:#171B22;
    --input-hover:#1B2028;
    --border:rgba(231,235,242,.10);
    --border-strong:rgba(231,235,242,.18);
    --ink:#E7EBF2;
    --ink-2:#99A2B0;
    --ink-3:#6C7583;
    --ok:#48B183;
    --warn:#D3A03A;
    --crit:#E4675A;
    --ok-bg:rgba(72,177,131,.09);
    --warn-bg:rgba(211,160,58,.10);
    --crit-bg:rgba(228,103,90,.08);
    --ok-border:rgba(72,177,131,.28);
    --warn-border:rgba(211,160,58,.30);
    --crit-border:rgba(228,103,90,.28);
    --shadow:0 1px 2px rgba(0,0,0,.42), 0 24px 56px -20px rgba(0,0,0,.72);
    --shadow-sm:0 1px 2px rgba(0,0,0,.40);
    --scrim:rgba(4,6,10,.62);
    --grain:.042;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0A0C10; --surface:#12151B; --surface-2:#171B22; --input:#171B22; --input-hover:#1B2028;
  --border:rgba(231,235,242,.10); --border-strong:rgba(231,235,242,.18);
  --ink:#E7EBF2; --ink-2:#99A2B0; --ink-3:#6C7583;
  --ok:#48B183; --warn:#D3A03A; --crit:#E4675A;
  --ok-bg:rgba(72,177,131,.09); --warn-bg:rgba(211,160,58,.10); --crit-bg:rgba(228,103,90,.08);
  --ok-border:rgba(72,177,131,.28); --warn-border:rgba(211,160,58,.30); --crit-border:rgba(228,103,90,.28);
  --shadow:0 1px 2px rgba(0,0,0,.42), 0 24px 56px -20px rgba(0,0,0,.72);
  --shadow-sm:0 1px 2px rgba(0,0,0,.40); --scrim:rgba(4,6,10,.62); --grain:.042;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F7F8FA; --surface:#FFFFFF; --surface-2:#F2F4F7; --input:#FFFFFF; --input-hover:#FAFBFC;
  --border:rgba(16,20,28,.12); --border-strong:rgba(16,20,28,.20);
  --ink:#12161C; --ink-2:#545C68; --ink-3:#7C8592;
  --ok:#2E8862; --warn:#8E6416; --crit:#B33A2C;
  --ok-bg:rgba(46,136,98,.06); --warn-bg:rgba(142,100,22,.07); --crit-bg:rgba(179,58,44,.055);
  --ok-border:rgba(46,136,98,.26); --warn-border:rgba(142,100,22,.28); --crit-border:rgba(179,58,44,.26);
  --shadow:0 1px 2px rgba(16,20,28,.05), 0 12px 32px -14px rgba(16,20,28,.20);
  --shadow-sm:0 1px 2px rgba(16,20,28,.06); --scrim:rgba(16,20,28,.42); --grain:.028;
}

/* ───────────────────────────── accent ─────────────────────────────
   One accent for the whole product.  No customer customisation.
   Scope: focus ring, primary button, brand mark, ambient glow.       */
:root{
  --accent:#1D63D2; --accent-hover:#1854B4; --accent-ink:#FFFFFF;
  --accent-soft:rgba(29,99,210,.10);
  --ring:rgba(29,99,210,.20); --bg-glow:rgba(29,99,210,.065);
}
@media (prefers-color-scheme: dark){
  :root{
    --accent:#4C8DFF; --accent-hover:#6BA0FF; --accent-ink:#04122B;
    --accent-soft:rgba(76,141,255,.13);
    --ring:rgba(76,141,255,.26); --bg-glow:rgba(76,141,255,.055);
  }
}
:root[data-theme="dark"]{
  --accent:#4C8DFF; --accent-hover:#6BA0FF; --accent-ink:#04122B;
  --accent-soft:rgba(76,141,255,.13);
  --ring:rgba(76,141,255,.26); --bg-glow:rgba(76,141,255,.055);
}
:root[data-theme="light"]{
  --accent:#1D63D2; --accent-hover:#1854B4; --accent-ink:#FFFFFF;
  --accent-soft:rgba(29,99,210,.10);
  --ring:rgba(29,99,210,.20); --bg-glow:rgba(29,99,210,.065);
}

/* ──────────────────────── categorical series ────────────────────────
   Eight slots in a FIXED order — never cycled, never reassigned by rank.
   A ninth series is not a generated hue: it folds into "Other" (--s9) or
   the chart facets.  Fourteen canonical wait categories are therefore
   shown as eight families; the members stay in the tooltip and the data.

   Validated with the dataviz validator against THIS product's chart
   surfaces (light #FFFFFF, dark #12151B) — lightness band, chroma floor,
   adjacent CVD separation, normal-vision floor and contrast:
     light  ALL CHECKS PASS   worst adjacent CVD 9.1 · normal-vision 19.6
     dark   ALL CHECKS PASS   worst adjacent CVD 8.4 · normal-vision 19.3
   Three light slots sit under 3:1 on white, so the relief rule applies:
   every series is labelled in the legend and named in the tooltip, and
   stacked segments carry a 2px surface gap.  Colour is never alone.

   Status colours are NOT part of this set and are never used as a series. */
:root{
  --s1:#2a78d6;  /* slot 1 — blue     · CPU          */
  --s2:#eb6834;  /* slot 2 — orange   · IO           */
  --s3:#1baf7a;  /* slot 3 — aqua     · Lock         */
  --s4:#eda100;  /* slot 4 — yellow   · Latch        */
  --s5:#e87ba4;  /* slot 5 — magenta  · Memory       */
  --s6:#008300;  /* slot 6 — green    · Network      */
  --s7:#4a3aa7;  /* slot 7 — violet   · Concurrency  */
  --s8:#e34948;  /* slot 8 — red      · Replication  */
  --s9:#8d95a3;  /* Other — neutral, deliberately outside the hue set */
  --grid:rgba(16,20,28,.08);
  --axis:rgba(16,20,28,.22);
}
@media (prefers-color-scheme: dark){
  :root{
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
    --s6:#008300; --s7:#9085e9; --s8:#e66767; --s9:#79828f;
    --grid:rgba(231,235,242,.07); --axis:rgba(231,235,242,.20);
  }
}
:root[data-theme="dark"]{
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500; --s5:#d55181;
  --s6:#008300; --s7:#9085e9; --s8:#e66767; --s9:#79828f;
  --grid:rgba(231,235,242,.07); --axis:rgba(231,235,242,.20);
}
:root[data-theme="light"]{
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
  --s6:#008300; --s7:#4a3aa7; --s8:#e34948; --s9:#8d95a3;
  --grid:rgba(16,20,28,.08); --axis:rgba(16,20,28,.22);
}

/* ───────────────────────────── base ───────────────────────────── */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Tabular figures wherever digits line up or tick.  Blok 15 requirement. */
.num{font-variant-numeric:tabular-nums}

/* Every capitalised label in this product is authored in capitals.
   text-transform is banned so Turkish "i" can never be mangled. */
.label-caps{
  font-family:"IBM Plex Mono",Consolas,"Cascadia Mono",monospace;
  font-size:10.5px; letter-spacing:.10em; color:var(--ink-3);
}

.mono{font-family:"IBM Plex Mono",Consolas,"Cascadia Mono",monospace}

/* Visually hidden, still read aloud.  Used wherever a status is drawn as a
   shape: the shape carries the meaning for sighted users, this carries it
   for everyone else.  Colour alone is never the signal. */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Grain + ambient glow.  Keeps large flat fills from banding and gives the
   surface a material quality.  No gradient hero, no blobs. */
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0}
.ambient::before{
  content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:min(1100px,140vw);height:min(760px,110vh);
  background:radial-gradient(ellipse at center, var(--bg-glow) 0%, transparent 68%);
}
.ambient::after{
  content:"";position:absolute;inset:0;opacity:var(--grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* FocusOnNavigate başlığa programatik odak verir (ekran okuyucu için); görsel çerçeve gerekmez */
h1:focus{outline:none}