/* ============================================================
   METAESTUDIO — DESIGN SYSTEM FOUNDATIONS
   colors_and_type.css
   Dark-first · brutalist · blueprint · DevTools rigor
   ZERO shadows · ZERO gradients · hairline 1px borders · radius 0–2px
   ============================================================ */

/* ---- FONTS (3 voices + 1 annotation) ----------------------
   System voice  : Space Grotesk  (headlines, data, UI)
   Human voice   : Newsreader Italic (quotes, intuition keywords)
   Infrastructure: JetBrains Mono  (eyebrows, metadata, UPPERCASE)
   Annotation    : Caveat (HITL margin notes)
   SELF-HOSTED from /fonts as variable .ttf — no CDN dependency.

   PROVENANCE: all four families are open-source OFL Google Fonts,
   self-hosted from /fonts/*.ttf with strict system fallbacks below.
   The IDE's "missing brand fonts" banner is a KNOWN FALSE POSITIVE
   here — it flags open-source catalog fonts as "substitutes" even
   though the real files are wired and render correctly. Verified:
   no fallback substitution occurs. Safe to ignore — do not re-chase.
------------------------------------------------------------ */
@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('fonts/Newsreader-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Caveat';
  src: url('fonts/Caveat-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- COLOR · base surfaces ---- */
  --bg:            #1C1B1A;   /* Carbono Cálido — base surface. NEVER pure black */
  --bg-panel:      #211F1D;   /* marginally raised panel / input fill */
  --bg-inset:      #181716;   /* recessed wells, code blocks */

  /* ---- COLOR · text ---- */
  --fg1:           #EAE6DF;   /* Papel de Archivo — primary reading text */
  --fg2:           #ADA597;   /* warm gray — secondary / metadata / UI (raised for contrast) */
  --fg3:           #786F63;   /* faint — disabled, captions, ghost text (raised for contrast) */

  /* ---- COLOR · structure ---- */
  --border:        #2A2F38;   /* Planos — hairline 1px on ALL containers/dividers */
  --border-strong: #3A4049;   /* hover / active hairline */
  --grid-line:     rgba(58,64,73,0.40);  /* blueprint grid — ultra-faint, 64px module */
  --reg:           #4A4036;   /* drawing-frame registration marks (warm, night) */

  /* ---- COLOR · single accent ---- */
  --accent:        #DE5D3A;   /* Terracota — fills / blocks / borders (the ONLY color) */
  --accent-ink:    #DE5D3A;   /* terracota as TEXT — same on dark, inked only on light */
  --accent-dim:    #A8462C;   /* pressed / muted terracotta */
  --accent-wash:   rgba(222,93,58,0.08); /* faint terracotta fill, used sparingly */

  /* ---- TYPE · families ---- */
  --font-system:   'Space Grotesk', system-ui, sans-serif;
  --font-human:    'Newsreader', Georgia, serif;
  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-annot:    'Caveat', 'Comic Sans MS', cursive;   /* Architect's annotation — HITL only */

  /* annotation ink colors (terracotta OR faint pencil gray — never long copy) */
  --ink-terra:     #DE5D3A;
  --ink-pencil:    #6B7280;

  /* ---- TYPE · semantic scale (system voice, negative tracking) ---- */
  --display:       700 76px/0.98 var(--font-system);
  --h1:            600 52px/1.02 var(--font-system);
  --h2:            600 36px/1.06 var(--font-system);
  --h3:            500 24px/1.12 var(--font-system);
  --h4:            500 18px/1.2  var(--font-system);
  --body-lg:       400 18px/1.55 var(--font-system);
  --body:          400 15px/1.6  var(--font-system);
  --body-sm:       400 13px/1.55 var(--font-system);

  /* human voice */
  --quote:         400 italic 30px/1.3 var(--font-human);
  --quote-sm:      400 italic 19px/1.45 var(--font-human);

  /* infrastructure voice */
  --eyebrow:       500 12px/1 var(--font-mono);   /* + uppercase + tracking */
  --label:         400 11px/1.4 var(--font-mono);
  --code:          400 13px/1.6 var(--font-mono);

  /* ---- TRACKING ---- */
  --track-tight:   -0.03em;   /* display / h1 */
  --track-snug:    -0.015em;  /* h2 / h3 / body emphasis */
  --track-mono:    0.12em;    /* eyebrows / labels (uppercase mono) */

  /* ---- SPACING · 4px base grid ---- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  /* ---- RADIUS (brutalist — never exceed 2px) ---- */
  --radius:    0px;
  --radius-sm: 2px;

  /* ---- LAYOUT · page cage ("shell") ---- */
  --shell-w:   1240px;   /* max page width — the site cages here; fluid below */
  --shell-pad: 32px;     /* inner column padding (left/right of the cage) */

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --instant: 0ms; /* @kind other */ /* binary hover flips — NO opacity fades */
}

/* ============================================================
   DAY THEME — "Plano de acero" (cold technical blueprint)
   For research/blog surfaces and presentation assets. Anti-warmth:
   a steel-light CAD ground, NOT cream — it must read like an
   architect's blueprint / a DevTool in day mode, never a book.
   Overrides ONLY color tokens; type, spacing, radius, motion and
   the cursor are unchanged. Apply to <html data-theme="light">,
   <body class="theme-light">, or wrap any section in .theme-light.
   ============================================================ */
[data-theme="light"],
.theme-light {
  /* DAY MODE — "Plano de acero": cold technical blueprint, anti-warmth.
     Steel-light CAD ground, clinical contrast, cool hairlines. NOT cream. */
  --bg:            #F0F2F4;   /* Alabastro técnico / steel-light — CAD ground, never cream */
  --bg-panel:      #E7EAEE;   /* raised panel / input */
  --bg-inset:      #E2E6EA;   /* recessed wells, code blocks */

  --fg1:           #1C1B1A;   /* Carbón — clinical, aggressive contrast */
  --fg2:           #59616A;   /* cool gray — secondary / metadata */
  --fg3:           #8A929B;   /* faint cool — captions, ghost */

  --border:        #CFD6DC;   /* cool hairline plane */
  --border-strong: #AEB7C0;
  --grid-line:     rgba(140,156,170,0.30);  /* blueprint grid on steel, ultra-faint */
  --reg:           #AEB7C0;   /* drawing-frame registration marks (cool, day) */

  --accent:        #DE5D3A;   /* PURE terracota — fills / blocks / borders */
  --accent-ink:    #B5462A;   /* inked — terracota ONLY when it must be TEXT on steel */
  --accent-dim:    #9E3D22;
  --accent-wash:   rgba(222,93,58,0.10);

  --ink-terra:     #B5462A;   /* annotations read as ink */
  --ink-pencil:    #6B7280;

  background: var(--bg);
  color: var(--fg1);
}
[data-theme="light"] ::selection,
.theme-light ::selection { background: var(--accent); color: #fff; }

/* ============================================================
   BLUEPRINT GRAMMAR — shared structural devices (BOTH modes)
   Coherence comes from a shared grammar, not uniform boxing nor a
   full-bleed grid (which fights legibility). The blueprint signal
   lives at the EDGES: a drawing frame + mono coordinate labels,
   with full readout boxes reserved for DATA, LOGS and 3rd-party
   QUOTES.
   ============================================================ */
/* page cage ("shell") — the OUTERMOST blueprint device. The whole site is
   caged to --shell-w and centered; above that width it stops stretching and
   the bare --bg (carbono) shows on either side. Two 1px vertical hairlines
   (the cage rails) run the full page height — they are the ONLY thing that
   defines the column; no panel, no fill. Everything lives inside: nav,
   sections, footer AND the fixed status bar, so the nav's border-bottom and
   the status bar align to --shell-w without bleeding past the rails. Inner
   column padding is --shell-pad (0 32px). Below --shell-w it's fully fluid
   down to mobile (rails hug the viewport edge; padding holds).
     <body> → .shell (cage)         ← min-height:100vh so rails span full page
              ├ nav (border-bottom spans full --shell-w)
              ├ sections (inset by --shell-pad)
              └ footer
            → .shell-bar (fixed bottom, same cage rails, aligns to --shell-w)
   A section whose content bleeds to the rails (e.g. the knowledge-graph mesh)
   sets overflow:hidden so it clips AT the rails — infinite-mesh feel, contained
   by the frame, never edge-of-viewport. */
.shell{
  max-width: var(--shell-w);
  margin-inline: auto;
  min-height: 100vh;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.shell-pad{ padding-inline: var(--shell-pad); }
/* fixed bottom bar that continues the cage: centered to --shell-w with the
   same vertical rails, so it lines up exactly under the shell column. */
.shell-bar{
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--shell-w);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

/* drawing frame — corner registration marks, edge-only, never behind text.
   Put on a position:relative container; marks inset by --dframe-inset. */
.dframe{ position: relative; }
.dframe::after{
  content:""; position:absolute; inset: var(--dframe-inset, 28px);
  pointer-events:none;
  background:
    linear-gradient(var(--reg),var(--reg)) 0 0/16px 1px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 0 0/1px 16px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 100% 0/16px 1px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 100% 0/1px 16px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 0 100%/16px 1px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 0 100%/1px 16px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 100% 100%/16px 1px no-repeat,
    linear-gradient(var(--reg),var(--reg)) 100% 100%/1px 16px no-repeat;
}
/* mono coordinate label — e.g. [SRC: DIR_COMERCIAL] · [LOG_ID: RESEARCH] */
.coord{
  font: var(--label);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg2);
  white-space: nowrap;
}
.coord--accent{ color: var(--accent-ink); }
/* status block — terracotta left rule (STRUCTURAL accent, never word-colouring) */
.state{ border-left: 2px solid var(--accent); padding-left: 16px; }
/* instrument readout — boxed object for DATA, LOGS and 3rd-party QUOTES */
.readout{ border: 1px solid var(--border); background: var(--bg); }
.readout-bar{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font: var(--label); letter-spacing: var(--track-mono);
  text-transform: uppercase; color: var(--fg3);
}
.readout-body{ padding: 22px 20px; }

/* ============================================================
   ELEMENT DEFAULTS
   ============================================================ */
body {
  background: var(--bg);
  color: var(--fg1);
  font: var(--body);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headlines — system voice */
.display { font: var(--display); letter-spacing: var(--track-tight); }
h1, .h1  { font: var(--h1); letter-spacing: var(--track-tight); margin: 0; }
h2, .h2  { font: var(--h2); letter-spacing: var(--track-snug); margin: 0; }
h3, .h3  { font: var(--h3); letter-spacing: var(--track-snug); margin: 0; }
h4, .h4  { font: var(--h4); letter-spacing: var(--track-snug); margin: 0; }

.body-lg { font: var(--body-lg); }
.body    { font: var(--body); }
.body-sm { font: var(--body-sm); color: var(--fg2); }

/* Human voice — serif italic, ONLY for intuition / quotes / manifesto */
.human   { font: var(--quote); color: var(--fg1); }
.human-sm{ font: var(--quote-sm); }
em.human { font-style: italic; }

/* Infrastructure voice — mono, ALWAYS uppercase */
.eyebrow {
  font: var(--eyebrow);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--accent-ink);
}
.label {
  font: var(--label);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--fg2);
}
code, .code { font: var(--code); color: var(--fg1); }

/* ============================================================
   ARCHITECT'S ANNOTATION — human-in-the-loop overlay
   Hand-written ink/pencil on the digital blueprint. Use ONLY for
   margin notes, hand-drawn arrows, corrections marking where a
   human takes control. NEVER for long copy.
   ============================================================ */
.annot {
  font-family: var(--font-annot);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink-terra);
  display: inline-block;
  transform: rotate(-4deg);          /* slight hand-drawn tilt */
}
.annot--pencil { color: var(--ink-pencil); }
.annot--flat   { transform: none; }
/* a hand-drawn underline/circle uses a 2px ink stroke, never a box */
.annot-rule {
  height: 2px;
  background: var(--ink-terra);
  border: 0;
  transform: rotate(-1.2deg);
}

/* ============================================================
   THE TERMINAL CURSOR  █  — and when it beats
   Brand symbol: the ONE terracotta block cursor (a rectangle,
   taller than wide, em-sized so it follows its text and sits at
   the END like a real terminal cursor).

   RULE — "one heartbeat per view; it beats only when it means LIVE":
   • Default (.cursor) is STATIC. Logo and headlines REST — a logo
     that blinks is exhausting and must stay reproducible.
   • Add .cursor--live ONLY in genuine status / live contexts
     (STATUS: OPERANDO indicators, a live terminal console).
   The heartbeat is a status signal, not decoration. Never let more
   than one or two small things beat on a single screen.
   ============================================================ */
.cursor {
  display: inline-block;
  width: 0.5em;            /* rectangle — never a square */
  height: 1em;            /* matches cap-to-baseline of its text */
  margin-left: 0.12em;
  vertical-align: -0.12em;
  background: var(--accent);
}
.cursor--live {
  /* asymmetric double-beat (systole–diastole) then a warm fade that
     breathes back up before the next beat. Never a flat 1s blink. */
  animation: heartbeat 2.6s ease-in-out infinite;
}
@keyframes heartbeat {
  0%   { opacity: 1; }
  5%   { opacity: 0.25; }  /* systole — quick contraction */
  11%  { opacity: 1; }     /* diastole — snap back */
  17%  { opacity: 0.25; }  /* second beat */
  23%  { opacity: 1; }
  55%  { opacity: 0.92; }  /* warm fade begins */
  80%  { opacity: 0.4; }   /* fade trough — the breath */
  100% { opacity: 1; }     /* breathe back up to the next beat */
}

/* ============================================================
   BINARY HOVER — primary button flip (no opacity fade)
   ============================================================ */
.btn {
  font: 500 14px/1 var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 13px 22px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: none;            /* binary — instant flip */
}
.btn-primary {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover {
  background: var(--accent);
  color: var(--bg);
}
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg1);
}
.btn-ghost:hover {
  border-color: var(--fg1);
}

/* ============================================================
   HAIRLINE PLANES — cards, dividers
   ============================================================ */
.plane {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.hr { height: 1px; background: var(--border); border: 0; }

/* selection */
::selection { background: var(--accent); color: var(--bg); }