/* ============================================================
   g-site · G Design Language entry point.

   We adopt the G LAYOUT + FONTS + TEXT-SELECTION, but NOT its
   colour palette — g-site keeps its teletext + CRT colours. So
   we import the structural tokens and the selection treatment
   (the one colour exception Gabriel asked for), then remap every
   colour token the G utilities reference onto our own vars, and
   pull in the structural utilities colour-neutralised.

   The pack's own styles.css / colors.css are NOT imported.
   ============================================================ */

@import "g/tokens/fonts.css";       /* Silka Mono (Minimal Mono declared but unused/unshipped) */
@import "g/tokens/typography.css";  /* scale, weights, line-heights, tracking */
@import "g/tokens/spacing.css";     /* --s-* lattice, --bw, radius 0, --pad-card */
@import "g/tokens/selection.css";   /* the LLM-token highlight palette (colour exception) */

:root {
  /* --- Display uses Silka Mono heavy: Minimal Mono is not shipped
         (personal-use licence). Weights synthesize the shout. ------ */
  --font-display: "Silka Mono", "Courier New", monospace;

  /* --- Structural neutrals: G's colour-neutral greys, on black.
         (Kept — these ARE the layout language, not the palette.) --- */
  --g-line:        rgba(226, 220, 222, 0.16);
  --g-line-strong: rgba(226, 220, 222, 0.32);
  --g-grid:        rgba(226, 220, 222, 0.05);
  --g-dim:         rgba(226, 220, 222, 0.55);
  --g-dimmer:      rgba(226, 220, 222, 0.32);

  /* --- Colour tokens the G utilities read, remapped onto the
         teletext/CRT ground. NO magenta/azure/paper accents. ------- */
  --bg:            #000;
  --text:          #e8e8e8;
  --text-hot:      #f2f4f5;         /* neutral display emphasis; teletext blocks carry the colour */
  --text-muted:    var(--g-dim);
  --text-faint:    var(--g-dimmer);
  --border:        var(--g-line);
  --border-strong: var(--g-line-strong);
  --accent:        #bfeaff;         /* CRT streak cyan, not G magenta */

  /* Default ::selection (untokenised text) — the G highlight, kept
     on purpose: text-selection colour is the one exception. */
  --selection-bg:  var(--sel-0);   /* magenta */
  --selection-fg:  #131316;
}

/* ============================================================
   Structural utilities from g/tokens/base.css — copied here so
   they render without the pack's colours/ground. box-sizing,
   selection, display headings, hairline rules, the label + edge
   microtype. (No body{} takeover — site.css / base.css own that.)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--selection-bg); color: var(--selection-fg); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-hot);
  letter-spacing: var(--ls-display);
  margin: 0;
  text-transform: uppercase;
}
h1 { font: var(--text-title); }
h2 { font: var(--text-section); }
h3 { font: var(--text-sub); }

hr { border: 0; border-top: var(--bw) solid var(--border); margin: 0; }

/* Uppercase mono label — the workhorse caption/microtype. */
.g-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--text-muted);
}

/* Sideways microtype — the edge ticker. */
.g-sideways {
  font-family: var(--font-mono);
  font-size: var(--t-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-micro);
  color: var(--text-muted);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
}

/* Hairline frames. */
.g-frame { border: var(--bw) solid var(--border); }
.g-frame-strong { border: var(--bw-strong) solid var(--border-strong); }