/* ============================================================================
   PCAP Decode and Analysis Platform - design tokens
   ----------------------------------------------------------------------------
   Fonts and colour only. Every colour in the system is defined here and
   nowhere else; a hex outside this file is a bug.

   The dark ladder is elevation, not hue: page < sidebar < panel < raised.
   Each step is small but perceptible, so a table reads as sitting inside a
   panel which sits on the page, without any of them being coloured.
   ========================================================================== */

/* -- Fonts: vendored, variable-weight, latin subset ------------------------ */
/* Glyphs outside the subset (the nav marks, box drawing) fall through to the
   system stack automatically - no unicode-range is declared for that reason. */
@font-face {
  font-family: "Inter";
  src: url("/static/vendor/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/static/vendor/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

/* -- Tokens: dark (default) ------------------------------------------------ */
:root {
  color-scheme: dark;

  /* Elevation ladder. Each step is small but perceptible. */
  --bg:        #0b0f12;  /* page            */
  --surface:   #10151a;  /* sidebar, top bar */
  --panel:     #151b21;  /* card, panel body */
  --raised:    #1a2128;  /* panel head, table head, hover, wells */
  --line:      #29323a;   /* panel and section edges           */
  --line2:     #39434d;   /* control edges, header underline    */
  --line3:     #1e262d;   /* row separators - felt, not seen    */

  --ink:       #e7eaed;
  --ink2:      #9aa3ad;
  --ink3:      #68727c;

  --accent:    #19d3c5;
  --accent2:   #5eead4;
  --accentbg:  #0e2b28;
  --accentln:  #1b4b46;
  --onaccent:  #06201d;   /* text on a filled accent surface     */

  --crit:      #e85d5d;  --critbg: #2c1517;
  --high:      #d9a441;  --highbg: #2b2110;
  --med:       #c9bf63;  --medbg:  #262413;
  --low:       #8fc0e0;  --lowbg:  #142330;
  --good:      #5fd493;  --goodbg: #0f2a1b;

  /* Roles are context, not content. Desaturated on purpose. */
  --role-admin:    #cfa25c;  --role-adminbg:   #2a1f0e;
  --role-analyst:  #7cb8ae;  --role-analystbg: #132824;
  --role-viewer:   #8b949d;  --role-viewerbg:  #1a2128;

  /* Protocol classes - normative, specs/packet.html section G.4 */
  --p-web:     #3b82f6;
  --p-dns:     #22c55e;
  --p-voip:    #f97316;
  --p-mail:    #8b5cf6;
  --p-ot:      #ef4444;
  --p-db:      #a855f7;
  --p-infra:   #14b8a6;
  --p-unknown: #9ca3af;

  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;

  /* Type scale. Every size in the UI comes from here.
     Machine information is mono, human information is sans - never mixed
     within one string. */
  --t-title:  23px;  --w-title:  600;   /* page title, Inter            */
  --t-sect:   15px;  --w-sect:   600;   /* panel and section title      */
  --t-body:   13.5px; --w-body:  400;   /* prose                        */
  --t-nav:    13.5px; --w-nav:   500;   /* navigation                   */
  --t-label:  10.5px; --w-label: 600;   /* uppercase label, Inter       */
  --t-caseid: 12px;  --w-caseid: 500;   /* case id, JetBrains Mono      */
  --t-data:   12px;  --w-data:   400;   /* ip, hash, timestamp, field   */
  --t-md:     12px;                     /* dense body inside a card     */
  --t-sm:     11.5px;                   /* secondary line under a value */
  --t-xs:     11px;                     /* the quietest thing on screen */

  --r:   6px;
  --r2:  8px;
  --nav: 236px;
}

/* Collapsed navigation is a width change, so it is a token change. */
:root[data-nav="collapsed"] { --nav: 58px; }

/* -- Tokens: light --------------------------------------------------------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        #f7f2ee;
  --surface:   #fcf8f5;
  --panel:     #ffffff;
  --raised:    #f2eae4;
  --line:      #e6dad1;
  --line2:     #d2c2b6;
  --line3:     #f1e9e3;

  --ink:       #241c17;
  --ink2:      #5a4f47;
  --ink3:      #77655a;

  --accent:    #0a736b;
  --accent2:   #075f58;
  --accentbg:  #e0efec;
  --accentln:  #b4d6d1;
  --onaccent:  #ffffff;

  --crit:      #b23a34;  --critbg: #fbe8e3;
  --high:      #8d5c0d;  --highbg: #fbf0da;
  --med:       #6d5a15;  --medbg:  #f6efd6;
  --low:       #3f5a70;  --lowbg:  #e9eef3;
  --good:      #22693f;  --goodbg: #e3f1e6;

  --role-admin:    #8a5b12;  --role-adminbg:   #f8ecd6;
  --role-analyst:  #1f6360;  --role-analystbg: #e1efec;
  --role-viewer:   #6b5f56;  --role-viewerbg:  #efe7e1;
}