/* Revelant Design System (tokens + base). Fuentes via Google Fonts. */
/* Revelant — Color tokens
   A black-and-white foundation (ink + paper) carrying a vivid "puzzle" palette
   borrowed from the colorful A in the wordmark. The puzzle colors are expressive
   accents — used sparingly against the monochrome base, never as a wash. */

:root {
  /* ---- Pure ---- */
  --black: #000000;
  --paper: #ffffff;

  /* ---- Ink scale (neutral B&W) ---- */
  --ink-900: #0a0a0a; /* primary ink / headings */
  --ink-800: #1a1a1a;
  --ink-700: #2e2e2e;
  --ink-600: #4d4d4d; /* secondary text */
  --ink-500: #6e6e6e;
  --ink-400: #969696; /* muted text, placeholders */
  --ink-300: #c2c2c2; /* disabled, hairlines on dark */
  --ink-200: #e0e0e0; /* borders */
  --ink-100: #f0f0f0; /* sunken surfaces */
  --ink-50:  #f7f7f6; /* page tint */

  /* ---- Puzzle palette (brand accents) ---- */
  --puzzle-red:    #e52a2a;
  --puzzle-orange: #f39a1f;
  --puzzle-yellow: #ffd400;
  --puzzle-green:  #3da951;
  --puzzle-cyan:   #14a9dc;
  --puzzle-blue:   #2c4696;
  --puzzle-purple: #6c3590;

  /* tints for soft fills (10–14% over paper) */
  --puzzle-blue-soft:   #e4e8f3;
  --puzzle-green-soft:  #e1f1e5;
  --puzzle-red-soft:    #fce4e4;
  --puzzle-orange-soft: #fdeed8;
  --puzzle-cyan-soft:   #ddf1fa;
  --puzzle-purple-soft: #ece2f3;

  /* ---- Semantic: brand & action ---- */
  --brand: var(--ink-900);            /* the mark is monochrome */
  --accent: var(--puzzle-blue);       /* primary functional accent */
  --accent-hover: #233a7d;
  --accent-press: #1b2e63;

  /* ---- Semantic: status ---- */
  --success: var(--puzzle-green);
  --warning: var(--puzzle-orange);
  --danger:  var(--puzzle-red);
  --info:    var(--puzzle-cyan);

  /* ---- Semantic: text ---- */
  --text-primary:   var(--ink-900);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-400);
  --text-inverse:   var(--paper);
  --text-accent:    var(--accent);

  /* ---- Semantic: surfaces ---- */
  --surface-page:    var(--paper);
  --surface-card:    var(--paper);
  --surface-sunken:  var(--ink-50);
  --surface-muted:   var(--ink-100);
  --surface-ink:     var(--ink-900);   /* full-dark sections */
  --surface-inverse: var(--ink-900);

  /* ---- Semantic: borders / rules ---- */
  --border:        var(--ink-200);
  --border-muted:  var(--ink-100);
  --border-strong: var(--ink-900);     /* engineering hairline-to-heavy rule */
  --focus-ring:    var(--puzzle-blue);
}

/* ---- Dark theme ----
   Overrides only the SEMANTIC surface/text/border tokens (never the raw
   ink/paper scale), so the intentional always-dark sections are unaffected
   while light surfaces and primitives (Card, Input) flip to dark. */
[data-theme="dark"] {
  --text-primary:   #f4f4f4;
  --text-secondary: #b6b6b6;
  --text-muted:     #8a8a8a;

  --surface-page:    #0f0f0f;
  --surface-sunken:  #161616;
  --surface-muted:   #1f1f1f;
  --surface-card:    #1a1a1a;

  --border:        #2b2b2b;
  --border-muted:  #232323;

  --accent:        #5b82e0;
  --accent-hover:  #7090e6;
  --accent-press:  #4f78dc;
}

/* Revelant — Typography tokens
   Montserrat (display / wordmark voice) · IBM Plex Sans (UI & body) ·
   IBM Plex Mono (figures, codes, dimensions, specs). */

:root {
  /* ---- Families ---- */
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights ---- */
  --fw-light: 300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */
  --fw-extrabold: 800; /* @kind other */
  --fw-black: 900; /* @kind other */

  /* ---- Type scale (px) ---- */
  --fs-display: 72px;   /* hero wordmark-scale */
  --fs-h1: 52px;
  --fs-h2: 38px;
  --fs-h3: 28px;
  --fs-h4: 22px;
  --fs-title: 18px;
  --fs-body-lg: 18px;
  --fs-body: 16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-overline: 12px;
  --fs-micro: 11px;

  /* ---- Line heights ---- */
  --lh-tight: 1.05; /* @kind other */
  --lh-snug: 1.2; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  /* ---- Letter spacing ---- */
  --ls-tight: -0.02em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-overline: 0.16em; /* @kind other */
}

/* Revelant — Spacing, radii & layout tokens
   4px base grid. Engineering precision: tight, square-ish radii. */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii (sharp, technical) ---- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-heavy: 3px;

  /* ---- Layout ---- */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1120px;
  --container-xl: 1280px;
  --gutter: 24px;
}

/* Revelant — Effects: shadows, focus, transitions
   Restrained, architectural. Shadows are subtle; structure is carried by
   strong black rules rather than heavy drop shadows. */

:root {
  /* ---- Elevation ---- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(10, 10, 10, 0.06);
  --shadow-md: 0 2px 8px rgba(10, 10, 10, 0.08);
  --shadow-lg: 0 8px 24px rgba(10, 10, 10, 0.10);
  --shadow-xl: 0 16px 48px rgba(10, 10, 10, 0.14);

  /* a crisp "drafted" border + lift used on key cards */
  --shadow-card: 0 1px 3px rgba(10, 10, 10, 0.07), 0 0 0 1px var(--border);

  /* ---- Focus ---- */
  --ring-width: 3px; /* @kind other */
  --ring: 0 0 0 var(--ring-width) rgba(44, 70, 150, 0.35);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
}

/* Revelant — Base element styling & helpers.
   Light-touch resets and a few foundational element rules so raw HTML using the
   tokens looks on-brand without component scaffolding. */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  margin: 0 0 0.4em;
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-snug);
}
h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

p { margin: 0 0 1em; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

small { font-size: var(--fs-caption); }
code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

/* ---- Utility: the brand overline label (uppercase, tracked) ---- */
.rv-overline {
  font-family: var(--font-mono);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-overline);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Utility: monochrome puzzle gradient text (use sparingly, e.g. one letter/word) ---- */
.rv-spectrum-text {
  background: linear-gradient(
    92deg,
    var(--puzzle-red) 0%,
    var(--puzzle-orange) 18%,
    var(--puzzle-yellow) 34%,
    var(--puzzle-green) 52%,
    var(--puzzle-cyan) 68%,
    var(--puzzle-blue) 84%,
    var(--puzzle-purple) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Utility: the seven-colour rule (thin spectrum divider) ---- */
.rv-spectrum-rule {
  height: 4px;
  border: 0;
  background: linear-gradient(
    90deg,
    var(--puzzle-red) 0 14.28%,
    var(--puzzle-orange) 14.28% 28.56%,
    var(--puzzle-yellow) 28.56% 42.84%,
    var(--puzzle-green) 42.84% 57.12%,
    var(--puzzle-cyan) 57.12% 71.4%,
    var(--puzzle-blue) 71.4% 85.68%,
    var(--puzzle-purple) 85.68% 100%
  );
}

/* --- reveal / theme / layout --- */
html { scroll-behavior: smooth; }
  body { margin: 0; background: var(--surface-page); transition: background .3s var(--ease-standard); font-size: 8px; }
  [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  [data-reveal].is-in { opacity: 1 !important; transform: none !important; }
  [data-theme="dark"] .rv-logo-mark { filter: invert(1); }
  /* visible separation between stacked sections */
  #root > section { border-top: 1px solid var(--border); }
  #root > section#inicio { border-top: 0; }
  [data-theme="dark"] #root > section { border-top-color: rgba(255,255,255,0.07); }
  /* stronger contrast between alternating section surfaces */
  :root { --surface-sunken: #eeeeea; }
  [data-theme="dark"] { --surface-page: #0b0b0b; --surface-sunken: #18181a; }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
  }