/* run-done tokens · v3 · Brockmann grid · Terminal voice
   Dark = default (the home).  Light = print/PDF only.
   Sharp corners.  Mono is the voice.  No radii, no shadows.            */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* -----------------------------------------------------------------------
   ROLE-BASED TOKENS
   The tokens below describe ROLES, not values.  Theme blocks below
   bind values per surface (dark/light).  Components reference roles. */

:root {
  /* === Brand state colors (do NOT change between themes) ===
     PRIMARY = green (#2ea66e). Це базовий брендовий токен run-done —
     не амбер. Амбер залишається тільки як WARN/RETRY стан. */
  --primary:        #1e6b5a;       /* PRIMARY — brand deep teal-green */
  --primary-text:   #18574a;       /* darker text variant */
  --primary-btn:    #1e6b5a;
  --primary-hover:  #175e4d;
  --primary-active: #237a66;
  --primary-glow:   rgba(30,107,90,0.20);

  /* RUN = "active, in motion" → primary green (was amber, corrected). */
  --run:        var(--primary);
  --run-ink:    #1f7d52;
  --run-glow:   var(--primary-glow);

  /* DONE / CONFIRMED — externally confirmed (ЄРПН квитанція). */
  --confirmed:  #14B8A6;
  --confirmed-ink: #0E8E8E;
  --confirmed-glow: rgba(20,184,166,0.20);

  /* WARN / RETRY — амбер, тільки для попереджень. */
  --warn:       #E78410;
  --warn-ink:   #B86A0C;
  --warn-glow:  rgba(231,132,16,0.18);

  --danger:     #C72A1F;

  /* === Type families === */
  --font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* === Type scale === */
  --fs-eyebrow: 11px;
  --fs-micro:   12px;
  --fs-body-sm: 14px;
  --fs-body:    16px;
  --fs-lead:    18px;
  --fs-h4:      22px;
  --fs-h3:      28px;
  --fs-h2:      40px;
  --fs-h1:      64px;
  --fs-display: 88px;
  --fs-mega:    120px;

  --lh-tight:   1.0;
  --lh-display: 1.04;
  --lh-heading: 1.12;
  --lh-body:    1.55;

  --tracking-eyebrow: 0.14em;
  --tracking-mono:    0.04em;
  --tracking-display: -0.02em;

  /* === Spacing (8px scale) === */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* === Radii — all zero === */
  --radius-xs: 0; --radius-sm: 0; --radius-md: 0;
  --radius-lg: 0; --radius-xl: 0; --radius-pill: 0;

  /* === Container === */
  --container-max: 1248px;     /* 12 cols × 96 + 11 gutters × 24 */
  --container-pad: 24px;
  --grid-gutter: 24px;

  /* === Motion === */
  --ease-quiet: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-snap:  cubic-bezier(0.32, 0, 0.32, 1);
  --dur-fast:   120ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;

  /* === Default = DARK theme === */
  --surface:        #0B0B0A;          /* page floor */
  --surface-1:      #0F0F0D;          /* one step up — sections */
  --surface-2:      #161614;          /* cards on dark */
  --surface-3:      #1D1D1A;          /* hover/active rows */
  --surface-inv:    #FAFAF7;          /* inverted surface (rare) */

  --text:           #F5F4EE;          /* body */
  --text-strong:    #FFFFFF;          /* headings */
  --text-muted:     #A6A39A;          /* captions, labels */
  --text-faint:     #6B6962;          /* helper text, hints */
  --text-inv:       #0E0E0C;          /* on inverted surface */

  --rule:           rgba(245,244,238,0.16);   /* primary divider on dark */
  --rule-strong:    rgba(245,244,238,0.32);   /* table borders, fences */
  --rule-faint:     rgba(245,244,238,0.08);
  --rule-amber:     var(--run);

  /* On-dark accents */
  --accent:         var(--run);
  --accent-ink:     var(--run-ink);
  --teal:           var(--confirmed);

  /* Status surfaces (low-chroma badges on dark) */
  --status-ok-bg:   rgba(20,184,166,0.10);
  --status-ok-fg:   var(--confirmed);
  --status-run-bg:  rgba(231,132,16,0.12);
  --status-run-fg:  var(--run);
  --status-err-bg:  rgba(199,42,31,0.14);
  --status-err-fg:  #FF6B5E;

  /* Shadows — used very sparingly, only modals. */
  --shadow-modal:   0 32px 64px rgba(0,0,0,0.6),
                    0 0 0 1px rgba(245,244,238,0.06);

  /* === Legacy aliases (do not use in new code) === */
  --ink:        var(--text-strong);
  --ink-soft:   var(--text);
  --paper:      var(--surface);
  --paper-pure: var(--surface-1);
  --bg-bracket: var(--surface-2);
  --muted:      var(--text-muted);
  --mute-2:     var(--text-faint);
  --rule-soft:  var(--rule-faint);
  --done:       var(--text-strong);
  --border:     1px solid var(--rule);
  --border-soft:1px solid var(--rule-faint);
}

/* -----------------------------------------------------------------------
   LIGHT THEME (print, PDF, accessibility)
   Activate with <html data-theme="light"> or @media print.            */

[data-theme="light"] {
  --surface:      #FAFAF7;
  --surface-1:    #FFFFFF;
  --surface-2:    #F0EFE8;
  --surface-3:    #E5E3DA;
  --surface-inv:  #0E0E0C;

  --text:         #2B2A26;
  --text-strong:  #0E0E0C;
  --text-muted:   #6F6E66;
  --text-faint:   #97968D;
  --text-inv:     #FAFAF7;

  --rule:         #0E0E0C;
  --rule-strong:  #0E0E0C;
  --rule-faint:   #D4D2C8;

  --status-ok-bg: rgba(20,184,166,0.12);
  --status-ok-fg: var(--confirmed-ink);
  --status-run-bg:rgba(231,132,16,0.14);
  --status-run-fg:var(--run-ink);
  --status-err-bg:rgba(199,42,31,0.10);
  --status-err-fg:var(--danger);

  --shadow-modal: 0 24px 48px rgba(14,14,12,0.10);
}

@media print {
  :root {
    --surface: #FFF; --surface-1:#FFF; --surface-2:#F4F4F0; --surface-3:#EAE9E2;
    --text:#000; --text-strong:#000; --text-muted:#444; --text-faint:#888;
    --rule:#000; --rule-strong:#000; --rule-faint:#999;
  }
}

/* =======================================================================
   PRIMITIVES
   ===================================================================== */

* { box-sizing: border-box; }
html { background: var(--surface); }
body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary); color: #FFFFFF; }

/* =======================================================================
   GLITCH + SCANLINE — sparingly, on display headings only
   ===================================================================== */

@keyframes glitchShift {
  0%, 92%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); }
  93%  { transform: translate(-2px, 0); clip-path: inset(8% 0 62% 0); }
  94%  { transform: translate( 2px, 0); clip-path: inset(48% 0 12% 0); }
  95%  { transform: translate(-1px, 0); clip-path: inset(72% 0 4% 0); }
  96%  { transform: translate( 1px, 0); clip-path: inset(20% 0 56% 0); }
  97%  { transform: translate( 0, 0);   clip-path: inset(0 0 0 0); }
}
@keyframes glitchShiftAmber {
  0%, 92%, 100% { transform: translate(0, 0); clip-path: inset(0 0 0 0); opacity: 0; }
  93%  { transform: translate( 2px, 0); clip-path: inset(8% 0 62% 0); opacity: 0.7; }
  94%  { transform: translate(-2px, 0); clip-path: inset(48% 0 12% 0); opacity: 0.7; }
  95%  { transform: translate( 1px, 0); clip-path: inset(72% 0 4% 0); opacity: 0.7; }
  96%  { transform: translate(-1px, 0); clip-path: inset(20% 0 56% 0); opacity: 0.7; }
  97%  { transform: translate( 0, 0);   clip-path: inset(0 0 0 0); opacity: 0; }
}

.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.glitch::before { color: var(--primary-active); animation: glitchShift 6s steps(1) infinite; mix-blend-mode: screen; }
.glitch::after  { color: var(--warn);          animation: glitchShiftAmber 6s steps(1) infinite; mix-blend-mode: screen; }

/* CRT scanlines overlay — apply to a wrapper for terminal/hero */
.scanlines { position: relative; }
.scanlines::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.02) 0,
    rgba(255,255,255,0.02) 1px,
    transparent 1px,
    transparent 4px
  );
  mix-blend-mode: overlay;
  opacity: 0.6;
}
.scanlines--strong::after { opacity: 0.9; }

/* Eyebrow — small caps mono label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow--bracket::before { content: "[ "; color: var(--text-faint); }
.eyebrow--bracket::after  { content: " ]"; color: var(--text-faint); }
.eyebrow--strong { color: var(--text-strong); }
.eyebrow--amber  { color: var(--run); }
.eyebrow--teal   { color: var(--confirmed); }

/* Structured eyebrow: RUN ▸ <action>  >  DONE ▸ <result>             */
.rd {
  display: inline-flex; align-items: baseline; gap: 12px;
  font-family: var(--font-mono); font-size: var(--fs-eyebrow);
  font-weight: 500; letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.rd__run  { color: var(--run); }
.rd__done { color: var(--text-strong); }
.rd__sep  { color: var(--text-faint); font-weight: 400; }
.rd__sep::before { content: ">"; }

/* Glyphs ============================================================ */
.glyph-run::before { content: ">"; color: var(--run); }
.glyph-v {
  display: inline-block; width: 0.9em; height: 0.9em;
  vertical-align: -0.05em;
}
.glyph-v path {
  fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: square; stroke-linejoin: miter;
}
@keyframes vDraw {
  from { stroke-dashoffset: 60; }
  to   { stroke-dashoffset: 0; }
}
.glyph-v.is-drawing path {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: vDraw 420ms var(--ease-quiet) forwards;
}

/* LOGOMARK inline (between run/done in wordmark) =================== */
.lm {
  display: inline-block;
  width: 0.92em; height: 0.75em;
  vertical-align: -0.06em;
  margin: 0 0.10em;
  fill: none;
  flex-shrink: 0;
}
.lm path {
  fill: none;
  stroke: url(#gvg);            /* gradient defs lives once per page */
  stroke-width: 80;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.lm--ink   path { stroke: var(--text-strong); }
.lm--paper path { stroke: var(--surface-inv); }
.lm--teal  path { stroke: var(--confirmed); }
.lm--amber path { stroke: var(--run); }
.lm--solid path { stroke: currentColor; }
/* legacy */
.gv { display:inline-block; width:0.92em; height:0.75em; vertical-align:-0.06em; margin:0 0.10em; fill:none; }
.gv path { fill:none; stroke:url(#gvg); stroke-width:80; stroke-linecap:square; stroke-linejoin:miter; }
.gv--ink path { stroke: var(--text-strong); }
.gv--paper path { stroke: var(--surface-inv); }

/* Type primitives =================================================== */
.mono    { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); }
.tabular { font-variant-numeric: tabular-nums; }

.h1, .h2, .h3, .h4 { font-family: var(--font-sans); color: var(--text-strong); }
.h1 { font-size: var(--fs-h1); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 500; }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: -0.01em; font-weight: 500; }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-heading); font-weight: 500; }
.h4 { font-size: var(--fs-h4); line-height: var(--lh-heading); font-weight: 500; }
.display { font-family: var(--font-sans); font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); font-weight: 500; color: var(--text-strong); }
.mega    { font-family: var(--font-sans); font-size: var(--fs-mega); line-height: var(--lh-tight);    letter-spacing: -0.03em; font-weight: 500; color: var(--text-strong); }

.text-muted  { color: var(--text-muted); }
.text-faint  { color: var(--text-faint); }
.text-strong { color: var(--text-strong); }
.text-amber  { color: var(--run); }
.text-teal   { color: var(--confirmed); }

/* Status block — leading 8px square + mono uppercase, no pill */
.status {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text);
}
.status::before {
  content: ""; width: 8px; height: 8px; background: currentColor;
  flex-shrink: 0;
}
.status--ok    { color: var(--confirmed); }
.status--wait  { color: var(--run); }
.status--err   { color: var(--status-err-fg); }
.status--idle  { color: var(--text-faint); }

/* Hairline dividers ================================================== */
.rule       { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--soft { border-top-color: var(--rule-faint); }
.rule--amber{ border-top-color: var(--run); }
.rule--teal { border-top-color: var(--confirmed); }

/* Buttons — solid fill, no radius, no shadow ======================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  padding: 12px 20px; border: 1px solid var(--text-strong);
  background: var(--text-strong); color: var(--surface);
  text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-quiet),
              color      var(--dur-fast) var(--ease-quiet);
}
.btn:hover     { background: var(--surface);     color: var(--text-strong); }
.btn--ghost    { background: transparent;        color: var(--text-strong); }
.btn--ghost:hover { background: var(--text-strong); color: var(--surface); }
.btn--mono     {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 11px 18px;
}
.btn--amber    { background: var(--run); border-color: var(--run); color: #0B0B0A; }
.btn--amber:hover { background: var(--run-ink); border-color: var(--run-ink); color: #0B0B0A; }

/* Bracket-fenced block ============================================== */
.bracket-inset {
  background: var(--surface-2);
  padding: var(--s-5);
  border: 1px solid var(--rule);
}

/* =======================================================================
   GRID — Brockmann 12-col helpers
   ===================================================================== */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.grid-12   { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gutter); }
.grid-8    { display: grid; grid-template-columns: repeat( 8, 1fr); gap: var(--grid-gutter); }

@media (max-width: 900px) {
  .grid-12 { grid-template-columns: repeat(8, 1fr); }
  .grid-8  { grid-template-columns: repeat(4, 1fr); }
}

/* Grid debug — toggle <html data-grid> for ruled overlay */
[data-grid]::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999;
  background-image: linear-gradient(to right, var(--rule-faint) 1px, transparent 1px);
  background-size: calc((100% - 2 * var(--container-pad) - 11 * var(--grid-gutter)) / 12 + var(--grid-gutter)) 100%;
  margin: 0 var(--container-pad);
  opacity: 0.5;
}

/* =======================================================================
   BACKWARD-COMPAT ALIASES — map old v2-prefixed tokens to new DS tokens.
   All existing templates use --v2-* names. This bridge lets them work
   with the canonical DS tokens without a mass rename.
   ===================================================================== */
:root {
  --v2-paper:          var(--surface);
  --v2-paper-pure:     var(--surface-1);
  --v2-ink:            var(--text-strong);
  --v2-ink-soft:       var(--text);
  --v2-rule-soft:      var(--rule-faint);
  --v2-bg-bracket:     var(--surface-2);
  --v2-muted:          var(--text-muted);
  --v2-mute-2:         var(--text-faint);
  --v2-accent:         var(--primary);
  --v2-teal:           var(--confirmed);

  --v2-font-sans:      var(--font-sans);
  --v2-font-mono:      var(--font-mono);

  --v2-fs-eyebrow:     var(--fs-eyebrow);
  --v2-fs-micro:       var(--fs-micro);
  --v2-fs-body-sm:     var(--fs-body-sm);
  --v2-fs-body:        var(--fs-body);
  --v2-fs-lead:        var(--fs-lead);
  --v2-fs-h4:          var(--fs-h4);
  --v2-fs-h3:          var(--fs-h3);
  --v2-fs-h2:          var(--fs-h2);
  --v2-fs-h1:          var(--fs-h1);

  --v2-lh-body:        var(--lh-body);
  --v2-lh-display:     var(--lh-display);
  --v2-tracking-display: var(--tracking-display);
  --v2-tracking-eyebrow: var(--tracking-eyebrow);

  --v2-s-1: var(--s-1); --v2-s-2: var(--s-2); --v2-s-3: var(--s-3);
  --v2-s-4: var(--s-4); --v2-s-5: var(--s-5); --v2-s-6: var(--s-6);
  --v2-s-7: var(--s-7); --v2-s-8: var(--s-8); --v2-s-9: var(--s-9);

  --v2-container-max:  var(--container-max);
  --v2-container-pad:  var(--container-pad);

  --v2-shadow-modal:   var(--shadow-modal);
}