@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');
@import url('./motion.css');

/* RELIC tokens.
 * Every colour, dimension and timing in the set resolves through one of these.
 * Change a value here and it changes everywhere: every SVG in the project
 * carries var(--relic-*, #fallback) in its fill and stroke attributes, so a
 * component or an icon recolours without touching its markup.
 *
 * Scope a subtree to retheme part of a page:
 *   .panel-dark { --relic-surface: #05070A; --relic-live: #1E5AB8 }
 *
 * NAMING: "bevel" tokens are the light source (structure). "live / warn /
 * fault / rare" are the semantic state colours. "silver" is a structural
 * mark, "silver-bright" is a glyph. These three families never mix.
 */

:root {
  /* -- surfaces ------------------------------------------------------- */
  --relic-surface: #0B0D10;          /* the void the set sits on */
  --relic-face-raised: #262A2F;      /* a face above the surface */
  --relic-face-recess: #1A1D21;      /* a face cut into the surface */
  --relic-face-well: #111418;        /* the deepest cut: pupils, apertures */

  /* -- one light source: upper-left, 45deg ---------------------------- */
  --relic-bevel-lit: #64676B;        /* outer bevel, lit edge */
  --relic-bevel-shade: #000000;      /* outer bevel, shaded edge */
  --relic-bevel-lit-inner: #3C3F43;  /* inner bevel, lit edge */
  --relic-bevel-shade-inner: #000003;/* inner bevel, shaded edge */
  --relic-drop: #06080A;             /* the single Z drop under raised layers */
  --relic-drop-offset: 1; /* @kind other */  /* artwork units; geometry */

  /* -- neutral ramp, light to dark ------------------------------------ */
  --relic-silver-bright: #CCCFD2;    /* glyphs, icon strokes, active text */
  --relic-mark: #97A3AA;             /* secondary marks and text bars */
  --relic-silver: #7C7F82;           /* structure: brows, rules, rest text */
  --relic-groove: #5F676C;           /* raised rails, query ticks */
  --relic-n40: #404346;              /* inner faces, disabled marks */
  --relic-n30: #33363A;              /* keylines on a raised face */
  --relic-n20: #292C30;              /* keylines on the surface */
  --relic-n10: #212326;              /* the faintest visible edge */
  --relic-n05: #0E1217;              /* almost the void */
  --relic-lid: #1A1D21;              /* eyelid fill */
  --relic-lid-line: #4A4D51;         /* eyelid edge */
  --relic-ink: #C9CED3;              /* headings */
  --relic-ink-dim: #8B959E;          /* body */
  --relic-ink-faint: #4E555C;        /* captions */
  --relic-rule: #262A2F;             /* hairline dividers */

  /* -- colour is light and light means state -------------------------- *
   * Each family runs core (the lit filament) -> base -> the dim shades a
   * recessed rail is built from. Change the base and the family reads as a
   * new colour; change the core to change how hot the light looks. */
  --relic-live-core: #BFE9FF;        /* blue: running, connected, selected */
  --relic-live-bright: #5E9FFF;
  --relic-live: #2A6BD4;
  --relic-live-soft: #5378B3;
  --relic-live-mute: #6789A8;
  --relic-live-edge: #3F6180;
  --relic-live-dim: #1F447F;
  --relic-live-deep: #1C417C;
  --relic-live-shadow: #1D3F5E;
  --relic-live-well: #002140;
  --relic-live-void: #000322;
  --relic-signal: #56C8E0;           /* cyan: telemetry, chat AI rail, icons */

  --relic-warn-core: #FFBE5F;        /* amber: attention */
  --relic-warn: #D98A2B;

  --relic-fault-core: #F47B5F;       /* red: failure */
  --relic-fault: #C0472B;

  --relic-rare-core: #AF8FF8;        /* violet: uncommon */
  --relic-rare: #7B5BC4;

  /* Hue-only versions of the same four, for colours the avatars compute. */
  --relic-hue-live: 196; /* @kind other */
  --relic-hue-warn: 30; /* @kind other */
  --relic-hue-fault: 1; /* @kind other */
  --relic-hue-rare: 276; /* @kind other */

  /* -- the twelve characters, one hue each ---------------------------- */
  --relic-hue-anchor: 186; /* @kind other */
  --relic-hue-archivist: 228; /* @kind other */
  --relic-hue-beacon: 46; /* @kind other */
  --relic-hue-cipher: 252; /* @kind other */
  --relic-hue-constructor: 36; /* @kind other */
  --relic-hue-courier: 168; /* @kind other */
  --relic-hue-monitor: 196; /* @kind other */
  --relic-hue-oracle: 276; /* @kind other */
  --relic-hue-sentinel: 212; /* @kind other */
  --relic-hue-warden: 2; /* @kind other */
  --relic-hue-weaver: 304; /* @kind other */
  --relic-hue-wisp: 142; /* @kind other */

  /* -- state tone: saturation + lightness applied to the character hue -
   * The eye colour of any character in any state is
   *   hsl(var(--relic-hue-<character>) var(--relic-tone-<state>-s) var(--relic-tone-<state>-l))
   * so one edit here restyles that state across all twelve characters.
   * angry and afraid swap the hue out entirely for fault / warn. */
  --relic-tone-neutral-s: 71%;   --relic-tone-neutral-l: 52%;
  --relic-tone-happy-s: 84%;     --relic-tone-happy-l: 66%;
  --relic-tone-sad-s: 30%;       --relic-tone-sad-l: 38%;
  --relic-tone-angry-s: 100%;    --relic-tone-angry-l: 56%;
  --relic-tone-surprised-s: 57%; --relic-tone-surprised-l: 78%;
  --relic-tone-afraid-s: 89%;    --relic-tone-afraid-l: 60%;
  --relic-tone-confused-s: 55%;  --relic-tone-confused-l: 50%;
  --relic-tone-thinking-s: 65%;  --relic-tone-thinking-l: 48%;
  --relic-tone-listening-s: 78%; --relic-tone-listening-l: 60%;
  --relic-tone-speaking-s: 82%;  --relic-tone-speaking-l: 62%;
  --relic-tone-sleeping-s: 16%;  --relic-tone-sleeping-l: 22%;
  --relic-tone-alert-s: 95%;     --relic-tone-alert-l: 70%;
  --relic-tone-confused-shift: 18; /* @kind other */  /* degrees off the hue */
  --relic-tone-dot-s: 30%;           /* the pupil dot: same hue, near-white */
  --relic-tone-dot-l: 86%;
  --relic-tone-dot-l-sleeping: 55%;

  /* -- type ----------------------------------------------------------- */
  --relic-font-display: 'Chakra Petch', sans-serif;
  --relic-font-mono: 'IBM Plex Mono', monospace;
  --relic-tracking-display: .14em;
  --relic-tracking-label: .2em;

  /* -- grid ----------------------------------------------------------- */
  --relic-unit: 4px;
  --relic-stroke-hair: 1; /* @kind other */
  --relic-stroke-mark: 2; /* @kind other */
  --relic-stroke-brow: 3; /* @kind other */
}

a { color: var(--relic-live-bright) }
a:hover { color: var(--relic-live-core) }

/* -- scrollbar --------------------------------------------------------- *
 * Same construction as every other rail in the set: a recess cut into the
 * surface, a raised face riding in it, one light source upper-left, no
 * rounding. Firefox gets the standard properties; Blink/WebKit get the
 * rail. Applying both in Chromium paints a gutter that will not scroll. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: var(--relic-face-raised) var(--relic-face-well) }
}
::-webkit-scrollbar { width: 12px; height: 12px; background: var(--relic-face-well) }
::-webkit-scrollbar-track {
  background: var(--relic-face-well);
  box-shadow: inset 1px 1px 0 0 var(--relic-bevel-shade-inner), inset -1px -1px 0 0 var(--relic-n20);
}
::-webkit-scrollbar-thumb {
  background: var(--relic-face-raised);
  min-height: 24px;
  min-width: 24px;
  box-shadow: inset 1px 1px 0 0 var(--relic-bevel-lit), inset -1px -1px 0 0 var(--relic-bevel-shade),
              inset 2px 2px 0 0 var(--relic-bevel-lit-inner), inset -2px -2px 0 0 var(--relic-bevel-shade-inner);
}
::-webkit-scrollbar-thumb:hover { background: var(--relic-n40) }
::-webkit-scrollbar-thumb:active { background: var(--relic-live-deep) }
::-webkit-scrollbar-corner { background: var(--relic-face-well) }