/* =========================================================
   ANIMA KERNEL — DESIGN TOKENS
   "Terminal-grade institutional" — dense, semantic, archival
   ========================================================= */

:root {
  /* ---- Foundation: plate-steel neutrals (dark default) ---- */
  --ak-bg-0:   #0B0D10;   /* page */
  --ak-bg-1:   #111418;   /* panel */
  --ak-bg-2:   #161A20;   /* raised panel */
  --ak-bg-3:   #1C2128;   /* hover / selected row */
  --ak-bg-inset: #08090B;  /* code / hash well */

  --ak-line:   #1F242C;
  --ak-line-2: #2A313B;
  --ak-line-3: #3A4250;

  --ak-fg-0:   #E6E9EE;   /* primary */
  --ak-fg-1:   #B4BAC4;   /* secondary */
  --ak-fg-2:   #7D8591;   /* tertiary */
  --ak-fg-3:   #545B66;   /* hint */
  --ak-fg-4:   #373C45;   /* disabled */

  /* ---- Crypto-state semantic palette ----
     State machine: unsigned → signed → witnessed → threshold-met → finalized
     Failure states: failed, expired, revoked
     Each state has: a color (fg), a faint tint (bg), and a shape token. */

  --ak-state-unsigned-fg:      #8A93A0;
  --ak-state-unsigned-bg:      #1A1D22;

  --ak-state-signed-fg:        #D8B25C;   /* amber — signed, not yet witnessed */
  --ak-state-signed-bg:        #2A220E;

  --ak-state-witnessed-fg:     #6AA6E8;   /* steel blue — 2nd party attest */
  --ak-state-witnessed-bg:     #121D2B;

  --ak-state-threshold-fg:     #7AC2A4;   /* cold mint — M-of-N met */
  --ak-state-threshold-bg:     #10221B;

  --ak-state-finalized-fg:     #4CBF8E;   /* saturated mint — committed */
  --ak-state-finalized-bg:     #0E2319;

  --ak-state-failed-fg:        #E56B6B;
  --ak-state-failed-bg:        #2A1213;

  --ak-state-expired-fg:       #B48AD8;   /* muted violet — time-based failure */
  --ak-state-expired-bg:       #1E1629;

  /* ---- Latency semantic (vs 200ms auth window) ---- */
  --ak-latency-ok:      #4CBF8E;   /* <25% budget */
  --ak-latency-warn:    #D8B25C;   /* 25-60% */
  --ak-latency-hot:     #E89454;   /* 60-90% */
  --ak-latency-over:    #E56B6B;   /* >90% */

  /* ---- Accents (sparingly — interactive only) ---- */
  --ak-accent:    #6AA6E8;        /* steel blue — links, focus */
  --ak-accent-2:  #C8A24A;        /* document amber — attestation chrome */

  /* ---- Vertical: Government ---- */
  --ak-gov-primary:   #7B8FA8;    /* slate blue — federal register tone */
  --ak-gov-secondary: #A09070;    /* parchment gold — authority */
  --ak-gov-alert:     #C47044;    /* brick — urgency without alarm */
  --ak-gov-seal:      #5C7A5C;    /* olive — institutional */
  --ak-gov-bg:        #0D0F12;    /* near-black with blue cast */

  /* ---- Vertical: SecOps ---- */
  --ak-sec-primary:   #36D68B;    /* signal green — operational / infrastructure */
  --ak-sec-secondary: #D06BBE;    /* magenta — T3 sealed / witnessed */
  --ak-sec-t1:        #4CBF8E;    /* T1 observation — fast, finalized */
  --ak-sec-t2:        #D8B25C;    /* T2 gate — enforcement, amber */
  --ak-sec-t3:        #D06BBE;    /* T3 attester — air-gapped, magenta */
  --ak-sec-bg:        #090B0E;    /* near-black, cool cast */

  /* ---- Vertical: Medical / Health ---- */
  --ak-med-primary:   #5AADA8;    /* teal — clinical calm */
  --ak-med-secondary: #8A7EC8;    /* soft violet — diagnostic */
  --ak-med-alert:     #D47070;    /* clinical red — PHI boundary */
  --ak-med-safe:      #5CB87A;    /* HIPAA green — compliant */
  --ak-med-bg:        #0B0E12;    /* near-black with cool cast */

  /* ---- Type ---- */
  --ak-font-sans: "Söhne", "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --ak-font-serif: "Tiempos Text", "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --ak-font-mono: "Berkeley Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ak-fs-9:   10px;   /* micro labels, ancestry bytes */
  --ak-fs-10:  11px;   /* meta, pill text */
  --ak-fs-11:  12px;   /* dense table row */
  --ak-fs-12:  13px;   /* default ui */
  --ak-fs-13:  14px;   /* body */
  --ak-fs-14:  15px;
  --ak-fs-16:  17px;   /* section title */
  --ak-fs-20:  20px;   /* screen title */
  --ak-fs-24:  26px;   /* hero numeric */
  --ak-fs-32:  34px;

  --ak-lh-tight: 1.15;
  --ak-lh-body:  1.45;

  /* ---- Spacing (4px rhythm, dense) ---- */
  --ak-s-1: 2px;
  --ak-s-2: 4px;
  --ak-s-3: 6px;
  --ak-s-4: 8px;
  --ak-s-5: 12px;
  --ak-s-6: 16px;
  --ak-s-7: 20px;
  --ak-s-8: 24px;
  --ak-s-9: 32px;
  --ak-s-10: 48px;

  /* ---- Radius (archival — small only) ---- */
  --ak-r-1: 2px;
  --ak-r-2: 3px;
  --ak-r-3: 4px;
  --ak-r-pill: 999px;

  /* ---- Shadow (barely-there) ---- */
  --ak-elev-1: 0 1px 0 rgba(0,0,0,0.4), 0 0 0 1px var(--ak-line);
  --ak-elev-2: 0 4px 14px rgba(0,0,0,0.45), 0 0 0 1px var(--ak-line-2);

  /* ---- Motion ---- */
  --ak-ease: cubic-bezier(.2,.6,.2,1);
  --ak-dur-fast: 120ms;
  --ak-dur-mid:  220ms;
  --ak-dur-slow: 420ms;
}

/* ---- Light mode override (regulator / QSA environments) ---- */
:root[data-theme="light"] {
  --ak-bg-0:   #F6F5F1;   /* paper */
  --ak-bg-1:   #FFFFFF;
  --ak-bg-2:   #FBFAF6;
  --ak-bg-3:   #EFEDE5;
  --ak-bg-inset: #F1EFE8;

  --ak-line:   #E2DFD4;
  --ak-line-2: #CFCBBD;
  --ak-line-3: #A8A394;

  --ak-fg-0:   #14161A;
  --ak-fg-1:   #3A3F47;
  --ak-fg-2:   #5E6471;
  --ak-fg-3:   #8A8E98;
  --ak-fg-4:   #B9BCC3;

  --ak-state-unsigned-fg:      #6C7280;
  --ak-state-unsigned-bg:      #ECEAE2;

  --ak-state-signed-fg:        #8C6A10;
  --ak-state-signed-bg:        #F6EED4;

  --ak-state-witnessed-fg:     #1B5DA6;
  --ak-state-witnessed-bg:     #DCE8F6;

  --ak-state-threshold-fg:     #1E7A54;
  --ak-state-threshold-bg:     #D8ECE1;

  --ak-state-finalized-fg:     #14603F;
  --ak-state-finalized-bg:     #C9E4D4;

  --ak-state-failed-fg:        #A81C1C;
  --ak-state-failed-bg:        #F6D9D9;

  --ak-state-expired-fg:       #5E3A96;
  --ak-state-expired-bg:       #E8DEF2;

  --ak-latency-ok:   #1E7A54;
  --ak-latency-warn: #8C6A10;
  --ak-latency-hot:  #B4500E;
  --ak-latency-over: #A81C1C;

  --ak-accent:   #1B5DA6;
  --ak-accent-2: #8C6A10;

  --ak-elev-1: 0 1px 0 rgba(0,0,0,0.04), 0 0 0 1px var(--ak-line);
  --ak-elev-2: 0 3px 10px rgba(0,0,0,0.08), 0 0 0 1px var(--ak-line-2);
}

/* =========================================================
   BASE
   ========================================================= */
.ak {
  background: var(--ak-bg-0);
  color: var(--ak-fg-0);
  font-family: var(--ak-font-sans);
  font-size: var(--ak-fs-12);
  line-height: var(--ak-lh-body);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11", "tnum";
  font-variant-numeric: tabular-nums;
}
.ak *, .ak *::before, .ak *::after { box-sizing: border-box; }
.ak .mono { font-family: var(--ak-font-mono); font-feature-settings: "zero", "ss02"; }
.ak .serif { font-family: var(--ak-font-serif); }
.ak .num { font-variant-numeric: tabular-nums; }
.ak .cap {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: var(--ak-fs-9);
  font-weight: 500;
  color: var(--ak-fg-2);
}

/* =========================================================
   CRYPTO STATE PILL — AttestationStatePill
   Color + shape redundancy (WCAG: never rely on color alone)
   ========================================================= */
.ak-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  font-family: var(--ak-font-mono);
  font-size: var(--ak-fs-10);
  font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: var(--ak-r-pill);
  white-space: nowrap;
  line-height: 1.4;
}
.ak-state__mark {
  width: 10px; height: 10px;
  display: inline-block;
  flex: 0 0 auto;
}
/* Shape language: unsigned = hollow square, signed = filled diamond,
   witnessed = filled circle + ring, threshold = hexagon, finalized = solid square w/ check.
   Using SVG via clip-path for crispness. */
.ak-state[data-state="unsigned"]     { color: var(--ak-state-unsigned-fg);  background: var(--ak-state-unsigned-bg); }
.ak-state[data-state="signed"]       { color: var(--ak-state-signed-fg);    background: var(--ak-state-signed-bg); }
.ak-state[data-state="witnessed"]    { color: var(--ak-state-witnessed-fg); background: var(--ak-state-witnessed-bg); }
.ak-state[data-state="threshold"]    { color: var(--ak-state-threshold-fg); background: var(--ak-state-threshold-bg); }
.ak-state[data-state="finalized"]    { color: var(--ak-state-finalized-fg); background: var(--ak-state-finalized-bg); }
.ak-state[data-state="failed"]       { color: var(--ak-state-failed-fg);    background: var(--ak-state-failed-bg); }
.ak-state[data-state="expired"]      { color: var(--ak-state-expired-fg);   background: var(--ak-state-expired-bg); }

/* =========================================================
   HASH BADGE
   ========================================================= */
.ak-hash {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ak-font-mono);
  font-size: var(--ak-fs-11);
  color: var(--ak-fg-1);
  background: var(--ak-bg-inset);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-2);
  padding: 1px 6px 1px 4px;
  cursor: pointer;
  transition: border-color var(--ak-dur-fast) var(--ak-ease),
              color var(--ak-dur-fast) var(--ak-ease);
  user-select: none;
}
.ak-hash:hover { border-color: var(--ak-line-3); color: var(--ak-fg-0); }
.ak-hash__ver {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ak-state-finalized-fg);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ak-state-finalized-fg) 18%, transparent);
}
.ak-hash[data-ver="pending"] .ak-hash__ver { background: var(--ak-state-signed-fg); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ak-state-signed-fg) 18%, transparent); }
.ak-hash[data-ver="failed"]  .ak-hash__ver { background: var(--ak-state-failed-fg);   box-shadow: 0 0 0 2px color-mix(in srgb, var(--ak-state-failed-fg) 18%, transparent); }
.ak-hash[data-ver="unsigned"] .ak-hash__ver { background: var(--ak-fg-3); box-shadow: none; }
.ak-hash__kind {
  color: var(--ak-fg-3);
  font-size: var(--ak-fs-9);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding-right: 4px;
  border-right: 1px solid var(--ak-line);
  margin-right: 2px;
}

/* =========================================================
   REASON CODE CHIP
   ========================================================= */
.ak-rc {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--ak-font-mono);
  font-size: var(--ak-fs-10);
  padding: 1px 6px;
  border-radius: var(--ak-r-2);
  background: var(--ak-bg-2);
  border: 1px solid var(--ak-line);
  color: var(--ak-fg-1);
}
.ak-rc__code { color: var(--ak-fg-0); font-weight: 600; }
.ak-rc__label { color: var(--ak-fg-2); font-family: var(--ak-font-sans); font-size: var(--ak-fs-10); }
.ak-rc[data-weight="high"]  { border-color: color-mix(in srgb, var(--ak-state-failed-fg) 40%, var(--ak-line)); }
.ak-rc[data-weight="med"]   { border-color: color-mix(in srgb, var(--ak-state-signed-fg) 40%, var(--ak-line)); }

/* =========================================================
   LATENCY BUDGET METER
   ========================================================= */
.ak-lbm {
  position: relative;
  height: 6px;
  background: var(--ak-bg-inset);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-1);
  overflow: hidden;
}
.ak-lbm__fill { height: 100%; transition: width var(--ak-dur-mid) var(--ak-ease); }
.ak-lbm__tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--ak-line-3); }

/* =========================================================
   DATA TABLE — dense, keyboard-navigable
   ========================================================= */
.ak-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ak-fs-11);
}
.ak-table th {
  text-align: left;
  font-weight: 500;
  color: var(--ak-fg-3);
  font-size: var(--ak-fs-9);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ak-line-2);
  background: var(--ak-bg-1);
  position: sticky; top: 0; z-index: 1;
  white-space: nowrap;
}
.ak-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--ak-line);
  color: var(--ak-fg-1);
  vertical-align: middle;
}
.ak-table tbody tr { cursor: pointer; }
.ak-table tbody tr:hover { background: var(--ak-bg-2); }
.ak-table tbody tr[data-selected="true"] { background: var(--ak-bg-3); box-shadow: inset 2px 0 0 var(--ak-accent); }
.ak-table tbody tr[data-selected="true"] td { color: var(--ak-fg-0); }

/* =========================================================
   PANEL
   ========================================================= */
.ak-panel {
  background: var(--ak-bg-1);
  border: 1px solid var(--ak-line);
  border-radius: var(--ak-r-3);
}
.ak-panel__h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--ak-line);
  font-size: var(--ak-fs-10);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ak-fg-2);
  font-weight: 500;
}
.ak-panel__b { padding: 14px; }

/* =========================================================
   BUTTON / INPUT
   ========================================================= */
.ak-btn {
  appearance: none;
  border: 1px solid var(--ak-line-2);
  background: var(--ak-bg-2);
  color: var(--ak-fg-0);
  font: 500 var(--ak-fs-11)/1.2 var(--ak-font-sans);
  padding: 6px 10px;
  border-radius: var(--ak-r-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.ak-btn:hover { border-color: var(--ak-line-3); background: var(--ak-bg-3); }
.ak-btn[data-variant="primary"] {
  background: var(--ak-accent);
  border-color: var(--ak-accent);
  color: #0B0D10;
}
.ak-btn[data-variant="primary"]:hover { filter: brightness(1.08); }
.ak-btn[data-variant="ghost"] { background: transparent; }
.ak-btn kbd {
  font-family: var(--ak-font-mono);
  font-size: var(--ak-fs-9);
  color: var(--ak-fg-2);
  background: var(--ak-bg-inset);
  border: 1px solid var(--ak-line);
  padding: 0 4px;
  border-radius: var(--ak-r-1);
  margin-left: 2px;
}

.ak-input {
  appearance: none;
  background: var(--ak-bg-inset);
  border: 1px solid var(--ak-line);
  color: var(--ak-fg-0);
  font: 400 var(--ak-fs-11)/1.3 var(--ak-font-mono);
  padding: 6px 10px;
  border-radius: var(--ak-r-2);
  width: 100%;
}
.ak-input::placeholder { color: var(--ak-fg-3); }
.ak-input:focus { outline: none; border-color: var(--ak-accent); }

/* =========================================================
   THRESHOLD GATE
   ========================================================= */
.ak-gate {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--ak-line-2);
  border-radius: var(--ak-r-2);
  background: var(--ak-bg-2);
  font-family: var(--ak-font-mono);
  font-size: var(--ak-fs-11);
}
.ak-gate__nodes { display: inline-flex; gap: 3px; }
.ak-gate__dot {
  width: 10px; height: 10px;
  background: var(--ak-bg-inset);
  border: 1px solid var(--ak-line-2);
}
.ak-gate__dot[data-on="true"] {
  background: var(--ak-state-finalized-fg);
  border-color: var(--ak-state-finalized-fg);
  box-shadow: 0 0 6px color-mix(in srgb, var(--ak-state-finalized-fg) 50%, transparent);
}

/* =========================================================
   TIMELINE AXIS
   ========================================================= */
.ak-axis {
  position: relative;
  height: 28px;
  background:
    linear-gradient(to bottom, transparent 0, transparent 27px, var(--ak-line-2) 27px);
}
.ak-axis__tick {
  position: absolute;
  top: 18px; bottom: 0; width: 1px;
  background: var(--ak-line-2);
}
.ak-axis__tick[data-major="true"] { background: var(--ak-line-3); top: 12px; }
.ak-axis__lbl {
  position: absolute;
  top: 0;
  font-family: var(--ak-font-mono);
  font-size: var(--ak-fs-9);
  color: var(--ak-fg-3);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* scrollbar polish */
.ak *::-webkit-scrollbar { width: 8px; height: 8px; }
.ak *::-webkit-scrollbar-thumb { background: var(--ak-line-2); border-radius: 8px; }
.ak *::-webkit-scrollbar-track { background: transparent; }

/* focus ring */
.ak :focus-visible { outline: 2px solid var(--ak-accent); outline-offset: 1px; border-radius: 2px; }

/* tiny animated attestation sweep */
@keyframes ak-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
.ak-sweep::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ak-accent) 40%, transparent), transparent);
  animation: ak-sweep 1.8s var(--ak-ease) infinite;
  pointer-events: none;
}