/* ==========================================================================
   TDC Brands - ServiceNow API Builder : design tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, radius, motion and metrics.
   Palette and type scale follow the THUGS(red) house theme used by
   darkweb.thugs.red, so this tool sits visually alongside the other internal
   sites.

   No other stylesheet may declare a raw colour. If a shade is needed that is
   not here, derive it with color-mix() from one of these custom properties so
   both themes follow automatically.

   Fonts are self-hosted under /assets/fonts. Nothing is fetched from a third
   party, which is what lets the CSP stay at font-src 'self' and keeps operator
   IPs away from a font CDN.
   ========================================================================== */

/* --- fonts ---------------------------------------------------------------- */

/* Share Tech Mono - SIL OFL 1.1. Display face: wide squared glyphs give the
   headings and the brand mark their terminal read. Single weight. */
@font-face {
    font-family: 'Share Tech Mono';
    src: url('../fonts/share-tech-mono-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Raleway - SIL OFL 1.1. Variable, so one file covers 100..900. */
@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway-latin-var.woff2') format('woff2-variations'),
         url('../fonts/raleway-latin-var.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono - Apache 2.0. Data face: sys_ids, tokens, table names,
   headers, every figure in a table. Variable, 100..800. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2-variations'),
         url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                   U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens --------------------------------------------------------------- */

:root {
  /* brand constants - identical in both themes */
  --ink:#0b0f14; --deep:#111827; --slate:#1e293b;
  --blue:#2d6cdf; --cyan:#64d2ff; --muted:#a7b1c2; --light:#e6edf3;
  --brand-red:#ff3b47;            /* THUGS(red) accent, used sparingly */
  --ok:#3ddc84; --warn:#ffc53d; --bad:#ff4d5e; --info:#4aa8ff; --violet:#c98bff;

  /* Request outcome colours. These are the five values that drive the Sankey,
     the status pills and the request table, so they are named for the domain
     rather than for the colour. */
  --out-hit:#3ddc84;        /* served from Redis */
  --out-miss:#4aa8ff;       /* went to ServiceNow */
  --out-stale:#c98bff;      /* served stale while revalidating */
  --out-denied:#ffc53d;     /* blocked by whitelist or token ACL */
  --out-error:#ff4d5e;      /* upstream or internal failure */
  --out-limited:#ff8a3d;    /* rate limited */

  --font-display:'Share Tech Mono', ui-monospace, monospace;
  --font-body:'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius-sm:8px; --radius:12px; --radius-lg:18px; --radius-pill:999px;
  --ease:cubic-bezier(.22,.61,.36,1); --speed:200ms;

  --wrap:1480px; --header-h:60px; --side-w:236px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px;
}

:root, [data-theme='dark'] {
  color-scheme: dark;
  --bg:#0f151f;
  --bg-2:#131b28;
  --surface:#161f2e; --surface-2:#1b2536; --surface-3:#212d41;
  --surface-hover:#243149;
  --border:rgba(167,177,194,.14); --border-strong:rgba(167,177,194,.28);
  --text:#e6edf3; --text-dim:#a7b1c2; --text-faint:#7d879a;
  --accent:#64d2ff; --accent-2:#2d6cdf;
  --grid:rgba(100,210,255,.05);
  --shadow:0 10px 34px rgba(0,0,0,.34);
  --shadow-lift:0 18px 48px rgba(0,0,0,.46);
  --code-bg:rgba(100,210,255,.07);
}

[data-theme='light'] {
  color-scheme: light;
  --bg:#eef2f8; --bg-2:#e7edf6;
  --surface:#fff; --surface-2:#f6f8fc; --surface-3:#eef2f8;
  --surface-hover:#e4ebf6;
  --border:rgba(11,15,20,.12); --border-strong:rgba(11,15,20,.24);
  --text:#0d1420; --text-dim:#4d5a6f; --text-faint:#6b7788;
  --accent:#1f5fd0; --accent-2:#2d6cdf;
  --grid:rgba(45,108,223,.06);
  --shadow:0 10px 30px rgba(15,27,45,.10);
  --shadow-lift:0 18px 44px rgba(15,27,45,.16);
  --code-bg:rgba(45,108,223,.07);
  /* Darkened so they still pass contrast on a white surface. */
  --out-hit:#12864a; --out-miss:#1f5fd0; --out-stale:#7a3bbf;
  --out-denied:#9a6b00; --out-error:#d32236; --out-limited:#c2560f;
  --ok:#12864a; --warn:#9a6b00; --bad:#d32236; --info:#1f5fd0;
}