/* =============================================================================
   subgrid.org — design tokens
   Taken from the final style guide (subgrid_landing_page_moodboard.png):
     BRAND COLORS : #ff7200  signal orange
                    #1b1b1d  charcoal
                    #f5f3ef  paper      (the third colour, used as the canvas)
     TYPEFACE     : IBM Plex Mono
     ICON / MARK  : skewed-grid mark, traced 1:1 from the guide
   ========================================================================== */

@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02C6, U+02DA, U+02DC, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-600-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plex Mono";
  src: url("../fonts/plex-mono-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+FEFF, U+FFFD;
}

:root {
  /* --- brand ------------------------------------------------------------- */
  --paper: #f5f3ef;
  --signal: #ff7200;
  --charcoal: #1b1b1d;
  /* The brand lockup on the signal field is pure white and nothing else: not
     paper, not a tint, not the charcoal that suits every other surface. */
  --white: #ffffff;

  /* --- derived grays, all mixed from the three brand colours -------------- */
  --paper-80: color-mix(in srgb, var(--paper) 80%, var(--charcoal));
  --paper-60: color-mix(in srgb, var(--paper) 60%, var(--charcoal));
  --paper-45: color-mix(in srgb, var(--paper) 45%, var(--charcoal));
  --paper-30: color-mix(in srgb, var(--paper) 30%, var(--charcoal));
  --paper-18: color-mix(in srgb, var(--paper) 18%, var(--charcoal));
  --paper-10: color-mix(in srgb, var(--paper) 10%, var(--charcoal));

  --signal-dim: color-mix(in srgb, var(--signal) 62%, var(--charcoal));
  --signal-bright: color-mix(in srgb, var(--signal) 88%, var(--paper));

  /* --- rules (the guide draws with hairlines, never soft shadows) -------- */
  --hair: 1px;

  /* --- type -------------------------------------------------------------- */
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* IBM Plex Mono advances 0.6em, so this lands on the guide's ~8.5px advance
     at a ~1400px viewport. No rem here: rem inside a root font-size declaration
     resolves against the initial size and the result drifts between elements. */
  --shell-size: clamp(12.5px, 0.68vw + 4.4px, 15px);
  --shell-leading: 1.34;
  --label-size: clamp(9.5px, 0.22vw + 6.5px, 11.5px);
  --label-tracking: 0.14em;

  /* --- metric ----------------------------------------------------------- */
  /* No paper margin, no hairline: the two panels meet edge to edge. The paper
     still exists in the palette, it is just never used as dead space. */
  --gutter: 0px;
  --frame: 0px;
  --brand-w: 54%;         /* brand lockup width, relative to the show-off panel */
  --brand-inset-x: 5.6%;
  --brand-inset-y: 2%;
  --bar-h: 88px;          /* the collapsed show-off bar on mobile */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --- the two canvases, as complete palettes ------------------------------
   Focus decides which pane wears which canvas: the focused pane wears the
   charcoal palette, the unfocused one the orange palette (see layout.css
   and applyFocusTheme in main.js). A pane carries exactly one of the two
   tone classes; every surface inside a pane is drawn with the role tokens
   below and never names --charcoal / --paper / --signal directly, so a
   focus change repaints the whole pane by swapping one class.

   roles:
     --pane-bg/-fg/-dim/-faint/-rule   the canvas and its inks
     --accent/-dim/-bright             emphasis, actionable, caret
     --on-accent                       text drawn on an --accent fill
     --ink-*                           the neutral ramp of the canvas
     --brand-ink                       the lockup colour on this canvas
     --strip-*                         the tab strip: charcoal in both
                                       tones, so the open pane reads as one
                                       field (see layout.css)
   ------------------------------------------------------------------------ */

.tone-charcoal {
  --pane-bg: var(--charcoal);
  --pane-fg: var(--paper);
  --pane-dim: var(--paper-45);
  --pane-faint: var(--paper-30);
  --pane-rule: var(--paper-10);
  --accent: var(--signal);
  --accent-dim: var(--signal-dim);
  --accent-bright: var(--signal-bright);
  --on-accent: var(--charcoal);
  --ink: var(--paper);
  --ink-80: var(--paper-80);
  --ink-60: var(--paper-60);
  --ink-45: var(--paper-45);
  --ink-30: var(--paper-30);
  --ink-18: var(--paper-18);
  --ink-10: var(--paper-10);
  --brand-ink: var(--signal);
  --nick-sat: 85%;
  --nick-light: 70%;
  --msg-sat: 55%;
  --msg-light: 82%;
  /* The strip wears this pane's own canvas, not the opposite one: an orange
     band across a focused charcoal pane runs straight into the orange shell
     beside it and the two halves stop reading as two panes. The open tab is
     the signal chip instead — one accent, not a whole bar. Values match the
     charcoal strip in .tone-orange below; the strip is charcoal either way. */
  --strip-bg: var(--charcoal);
  --strip-fg: var(--paper-60);
  --strip-accent: var(--signal);
  --strip-rule: var(--paper-10);
  --strip-x: var(--paper-18);
  --strip-active-bg: var(--signal);
  --strip-active-fg: var(--charcoal);
}

.tone-orange {
  --pane-bg: var(--signal);
  --pane-fg: var(--charcoal);
  --pane-dim: color-mix(in srgb, var(--charcoal) 62%, var(--signal));
  --pane-faint: color-mix(in srgb, var(--charcoal) 44%, var(--signal));
  --pane-rule: color-mix(in srgb, var(--charcoal) 24%, transparent);
  --accent: var(--charcoal);
  --accent-dim: color-mix(in srgb, var(--charcoal) 74%, var(--signal));
  --accent-bright: color-mix(in srgb, var(--charcoal) 88%, var(--signal));
  --on-accent: var(--signal);
  --ink: var(--charcoal);
  --ink-80: color-mix(in srgb, var(--charcoal) 82%, var(--signal));
  --ink-60: color-mix(in srgb, var(--charcoal) 62%, var(--signal));
  --ink-45: color-mix(in srgb, var(--charcoal) 46%, var(--signal));
  --ink-30: color-mix(in srgb, var(--charcoal) 30%, var(--signal));
  --ink-18: color-mix(in srgb, var(--charcoal) 18%, var(--signal));
  --ink-10: color-mix(in srgb, var(--charcoal) 10%, var(--signal));
  --brand-ink: var(--white);
  --nick-sat: 90%;
  --nick-light: 18%;
  --msg-sat: 65%;
  --msg-light: 28%;
  /* the strip: charcoal, exactly as in .tone-charcoal — the strip's canvas no
     longer follows the tone, only the open tab (signal) does */
  --strip-bg: var(--charcoal);
  --strip-fg: var(--paper-60);
  --strip-accent: var(--signal);
  --strip-rule: var(--paper-10);
  --strip-x: var(--paper-18);
  --strip-active-bg: var(--signal);
  --strip-active-fg: var(--charcoal);
}

/* Character is deliberately harsh: no rounding, no shadows anywhere. */
* {
  box-sizing: border-box;
  border-radius: 0;
}

::selection {
  background: var(--accent, var(--signal));
  color: var(--on-accent, var(--charcoal));
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--paper);
  color: var(--charcoal);
  font-family: var(--mono);
  font-size: var(--shell-size);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  overflow: hidden; /* the shell owns scrolling, like a real terminal */
}

/* Uppercase micro-label, as used across the guide (BRAND COLORS / TYPEFACE…) */
.label {
  font-size: var(--label-size);
  font-weight: 500;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}