/* ============================================================
   Eduardo López — Design System
   colors_and_type.css
   ============================================================ */

/* --- Fonts (self-hosted from /fonts) ---------------------- */

/* Space Grotesk — variable (preferred), with static fallbacks */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-SemiBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/SpaceGrotesk-Bold.ttf') format('truetype');
}

/* Space Mono — terminal/body */
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/SpaceMono-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/SpaceMono-Bold.ttf') format('truetype');
}

/* Söhne — full set (test version). Use as --ff-sans for editorial body. */
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/Sohne-Light.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Sohne-Book.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('fonts/Sohne-BookItalic.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Sohne-Kraftig.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Sohne-Halbfett.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Sohne-Bold.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/Sohne-Heavy.otf') format('opentype'); }
@font-face { font-family: 'Sohne'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/Sohne-Black.otf') format('opentype'); }

/* Söhne Breit — extended; reserved for hero / oversized display moments */
@font-face { font-family: 'Sohne Breit'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/SohneBreit-Bold.otf') format('opentype'); }
@font-face { font-family: 'Sohne Breit'; font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/SohneBreit-Black.otf') format('opentype'); }

/* Söhne Mono — alternative mono body */
@font-face { font-family: 'Sohne Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/SohneMono-Book.otf') format('opentype'); }
@font-face { font-family: 'Sohne Mono'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/SohneMono-Bold.otf') format('opentype'); }

/* ============================================================
   :ROOT — tokens
   ============================================================ */
:root {
  /* --- Colors: dark (canonical) ------------------------------ */
  --bg:        #0A0A0B;
  --bg-elev:   #111113;        /* one-step-up surfaces, used sparingly */
  --fg-1:      #F2F0EB;        /* primary text */
  --fg-2:      #A6A29A;        /* muted text, metadata */
  --fg-3:      #5E5C58;        /* faint, separators in text */
  --rule:      rgba(242,240,235,0.12);
  --rule-strong: rgba(242,240,235,0.28);

  /* --- Accent + semantics ------------------------------------ */
  --accent:    #3A6BFF;        /* electric blue — the only color for chrome / links / focus */
  --accent-2:  #1E48D9;        /* press state */
  --accent-hi: #FFC700;        /* hi-vis amber — hero moments only, ≤5% of viewport */
  --ok:        #7DE0A6;
  --warn:      #E0C26A;
  --bad:       #FF5A5A;

  /* --- Glitch channels (used in .glitch effect) ------------- */
  --glitch-cyan:    #00E5FF;
  --glitch-magenta: #FF2D9A;

  /* --- Spacing (8px grid) ----------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 16px;
  --s-4: 24px;
  --s-5: 32px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 96px;
  --s-9: 144px;
  --s-10: 224px;

  /* --- Radii (almost always 0) ------------------------------ */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;

  /* --- Type families ---------------------------------------- */
  --ff-display:      'Space Grotesk', 'Arial Narrow', sans-serif;
  --ff-display-wide: 'Sohne Breit', 'Space Grotesk', 'Arial Narrow', sans-serif;
  --ff-mono:         'Space Mono', 'Sohne Mono', 'Menlo', 'Consolas', monospace;
  --ff-mono-alt:     'Sohne Mono', 'Space Mono', 'Menlo', 'Consolas', monospace;
  --ff-sans:         'Sohne', 'Space Grotesk', system-ui, sans-serif;

  /* --- Type scale (rem) ------------------------------------- */
  --t-display-xxl: 10rem;
  --t-display-xl:  6rem;
  --t-display-l:   4rem;
  --t-display-m:   2.5rem;
  --t-display-s:   1.75rem;
  --t-body-l:      1.0625rem;
  --t-body:        0.9375rem;
  --t-body-s:      0.8125rem;
  --t-meta:        0.75rem;
  --t-micro:       0.6875rem;

  /* --- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0, 1);
  --ease-inout:  cubic-bezier(0.7, 0, 0.3, 1);
  --d-micro: 120ms;
  --d-base:  220ms;
  --d-page:  460ms;

  /* --- Layout ----------------------------------------------- */
  --page-pad: var(--s-6);
  --grid-cols: 12;
  --grid-gap:  var(--s-5);
  --max-w: 1440px;

  /* --- Nav ------------------------------------------------- */
  --nav-h: 60px;
}

/* --- Beige / sand alt theme (light) -------------------------- */
[data-theme="beige"] {
  --bg:        #E8E2D4;
  --bg-elev:   #DED7C5;
  --fg-1:      #131210;
  --fg-2:      #5A554C;
  --fg-3:      #8E887C;
  --rule:      rgba(19,18,16,0.16);
  --rule-strong: rgba(19,18,16,0.34);
  --accent:    #1A3FE0;
  --accent-2:  #0F2DAC;
}

/* ============================================================
   BASE
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--ff-mono);
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ============================================================
   TYPE — semantic
   ============================================================ */
.t-display-xxl,
.t-display-xl,
.t-display-l,
.t-display-m,
.t-display-s,
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.0;
  text-wrap: balance;
  color: var(--fg-1);
}

.t-display-xxl { font-size: var(--t-display-xxl); line-height: 0.9; letter-spacing: -0.05em; }
.t-display-xl  { font-size: var(--t-display-xl);  line-height: 0.95; letter-spacing: -0.04em; }
.t-display-l   { font-size: var(--t-display-l);   line-height: 1.0;  letter-spacing: -0.03em; }
.t-display-m   { font-size: var(--t-display-m);   line-height: 1.05; letter-spacing: -0.02em; }
.t-display-s   { font-size: var(--t-display-s);   line-height: 1.1;  letter-spacing: -0.015em; }

h1 { font-size: var(--t-display-xl); }
h2 { font-size: var(--t-display-l); }
h3 { font-size: var(--t-display-m); }
h4 { font-size: var(--t-display-s); }

p, .t-body {
  font-family: var(--ff-mono);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-1);
  text-wrap: pretty;
}

.t-body-l { font-size: var(--t-body-l); line-height: 1.6; }
.t-body-s { font-size: var(--t-body-s); }

.t-meta {
  font-family: var(--ff-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}

.t-micro {
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
}

code, kbd, pre, .t-code {
  font-family: var(--ff-mono);
  font-size: 0.875em;
  color: var(--fg-1);
}

/* ============================================================
   LINKS, BUTTONS, INPUTS
   ============================================================ */
a {
  color: inherit;
  text-decoration: none;
  position: relative;
  transition: color var(--d-base) var(--ease-out);
}
a.link-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--d-base) var(--ease-out);
}
a.link-underline:hover { color: var(--accent); }
a.link-underline:hover::after { transform: scaleX(1); }

.btn {
  font-family: var(--ff-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 1px solid var(--fg-1);
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--d-micro) var(--ease-out), color var(--d-micro) var(--ease-out), transform 80ms var(--ease-out);
  border-radius: var(--r-0);
}
.btn:hover { background: var(--fg-1); color: var(--bg); }
.btn:active { transform: scale(0.98); }

.btn--accent { border-color: var(--accent); color: var(--accent); }
.btn--accent:hover { background: var(--accent); color: var(--bg); }

.btn--ghost { border-color: var(--rule); color: var(--fg-2); }
.btn--ghost:hover { border-color: var(--fg-1); background: transparent; color: var(--fg-1); }

input.input, select.input, textarea.input {
  font-family: var(--ff-mono);
  font-size: var(--t-body);
  background: transparent;
  color: var(--fg-1);
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: var(--r-0);
  padding: 10px 0;
  outline: none;
  transition: border-color var(--d-base) var(--ease-out);
}
input.input:focus, select.input:focus, textarea.input:focus {
  border-bottom-color: var(--accent);
}

/* ============================================================
   TAG / BADGE
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-2);
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: var(--r-1);
  transition: border-color var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out);
  cursor: pointer;
  background: transparent;
}
.tag::before { content: "#"; color: var(--fg-3); }
.tag:hover { border-color: var(--fg-1); color: var(--fg-1); }
.tag[aria-selected="true"], .tag.is-active {
  border-color: var(--accent);
  color: var(--accent);
}

/* ============================================================
   RULES
   ============================================================ */
.rule  { height: 1px; background: var(--rule); width: 100%; }
.rule-v { width: 1px; background: var(--rule); align-self: stretch; }

/* ============================================================
   GLITCH (hover only, sparingly)
   ============================================================ */
.glitch {
  position: relative;
  display: inline-block;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-micro) var(--ease-out);
}
.glitch::before { color: var(--glitch-cyan); transform: translate(-2px, 0); mix-blend-mode: screen; }
.glitch::after  { color: var(--glitch-magenta); transform: translate(2px, 0); mix-blend-mode: screen; }
.glitch:hover::before, .glitch:hover::after { opacity: 1; animation: glitch-shift 220ms steps(3) 1; }
@keyframes glitch-shift {
  0%   { transform: translate(-2px, 0); }
  33%  { transform: translate(2px, 1px); }
  66%  { transform: translate(-1px, -1px); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   GRAIN OVERLAY (apply once to a top-level fixed div)
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee {
  overflow: hidden;
  display: flex;
  width: 100%;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
.marquee__track {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  will-change: transform;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   IMAGE TREATMENT
   ============================================================ */
img.img-treated {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.7) contrast(1.08);
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
}
img.img-duotone {
  display: block;
  width: 100%;
  height: auto;
  filter: grayscale(1) contrast(1.2);
  mix-blend-mode: screen;
  background: linear-gradient(var(--accent), var(--bg));
  border: 1px solid var(--rule);
  border-radius: var(--r-0);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after { display: none; }
  .marquee__track { animation: none; }
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}

/* ============================================================
   UTILITIES
   ============================================================ */
.u-uppercase { text-transform: uppercase; letter-spacing: 0.06em; }
.u-mono      { font-family: var(--ff-mono); }
.u-display   { font-family: var(--ff-display); }
.u-accent    { color: var(--accent); }
.u-fg2       { color: var(--fg-2); }
.u-fg3       { color: var(--fg-3); }
.u-stroke    { -webkit-text-stroke: 1px var(--fg-1); color: transparent; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }