/* =========================================================================
   GRUPO RHODIUM — DESIGN TOKENS
   Brand: AI Native · Get Shit Done™ · Empower, Create, Transform.
   ========================================================================= */

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

:root {
  /* ---------- COLOR · CORE PALETTE (from brand book) ---------- */
  --rh-violet-light: #CEB5FF;     /* Lila claro · backgrounds, accents */
  --rh-mint:         #9BFF8A;     /* Verde menta · highlights, CTAs */
  --rh-violet-deep:  #2D008A;     /* Morado profundo · primary brand */
  --rh-ink:          #00073C;     /* Azul-negro · text, dark surfaces */

  /* ---------- COLOR · GRADIENT (magenta → coral) ---------- */
  --rh-grad-1: #732286;
  --rh-grad-2: #981D93;
  --rh-grad-3: #CC228C;
  --rh-grad-4: #DD5263;
  --rh-gradient: linear-gradient(135deg, var(--rh-grad-1) 0%, var(--rh-grad-2) 33%, var(--rh-grad-3) 66%, var(--rh-grad-4) 100%);
  --rh-gradient-h: linear-gradient(90deg, var(--rh-grad-1) 0%, var(--rh-grad-2) 33%, var(--rh-grad-3) 66%, var(--rh-grad-4) 100%);

  /* ---------- COLOR · SEMANTIC ---------- */
  --rh-bg:           #00073C;
  --rh-bg-elev:      #0A1052;
  --rh-bg-soft:      #F5F1FF;
  --rh-surface:      #FFFFFF;
  --rh-fg:           #00073C;
  --rh-fg-inverse:   #FFFFFF;
  --rh-muted:        #6B6B8C;
  --rh-line:         #E5E0F5;
  --rh-line-dark:    #1A1F5C;

  --rh-primary:      var(--rh-violet-deep);
  --rh-primary-fg:   #FFFFFF;
  --rh-accent:       var(--rh-mint);
  --rh-accent-fg:    var(--rh-ink);

  /* ---------- TYPOGRAPHY ---------- */
  /* Crafter (custom display) — using Archivo Black + Space Grotesk as production stack */
  --rh-font-display: 'Archivo Black', 'Space Grotesk', system-ui, sans-serif;
  --rh-font-sans:    'Space Grotesk', system-ui, -apple-system, sans-serif;
  --rh-font-mono:    'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* Type scale (modular, ratio 1.25) */
  --rh-text-xs:   12px;
  --rh-text-sm:   14px;
  --rh-text-base: 16px;
  --rh-text-md:   18px;
  --rh-text-lg:   22px;
  --rh-text-xl:   28px;
  --rh-text-2xl:  36px;
  --rh-text-3xl:  48px;
  --rh-text-4xl:  64px;
  --rh-text-5xl:  88px;
  --rh-text-6xl:  120px;

  /* Line heights */
  --rh-lh-tight:  1.05;
  --rh-lh-snug:   1.2;
  --rh-lh-normal: 1.4;
  --rh-lh-loose:  1.6;

  /* Letter spacing */
  --rh-tracking-tight:  -0.02em;
  --rh-tracking-normal: 0;
  --rh-tracking-wide:   0.05em;
  --rh-tracking-wider:  0.12em;
  --rh-tracking-widest: 0.24em;

  /* ---------- SPACING (4px base) ---------- */
  --rh-space-1:  4px;
  --rh-space-2:  8px;
  --rh-space-3:  12px;
  --rh-space-4:  16px;
  --rh-space-5:  24px;
  --rh-space-6:  32px;
  --rh-space-7:  48px;
  --rh-space-8:  64px;
  --rh-space-9:  96px;
  --rh-space-10: 128px;

  /* ---------- RADIUS ---------- */
  --rh-radius-xs:  4px;
  --rh-radius-sm:  8px;
  --rh-radius-md:  12px;
  --rh-radius-lg:  20px;
  --rh-radius-xl:  32px;
  --rh-radius-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --rh-shadow-sm: 0 1px 2px rgba(0, 7, 60, 0.08);
  --rh-shadow-md: 0 4px 16px rgba(0, 7, 60, 0.10), 0 1px 2px rgba(0, 7, 60, 0.06);
  --rh-shadow-lg: 0 16px 48px rgba(0, 7, 60, 0.16), 0 2px 8px rgba(0, 7, 60, 0.08);
  --rh-shadow-glow-mint: 0 0 0 4px rgba(155, 255, 138, 0.25), 0 8px 24px rgba(155, 255, 138, 0.20);
  --rh-shadow-glow-violet: 0 0 0 4px rgba(206, 181, 255, 0.30), 0 8px 24px rgba(45, 0, 138, 0.25);

  /* ---------- MOTION ---------- */
  --rh-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rh-ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --rh-dur-fast: 120ms;
  --rh-dur:      220ms;
  --rh-dur-slow: 420ms;

  /* ---------- LAYOUT ---------- */
  --rh-container: 1280px;
  --rh-grid-gutter: 24px;
}

/* =========================================================================
   BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0;
  font-family: var(--rh-font-sans);
  font-size: var(--rh-text-base);
  line-height: var(--rh-lh-normal);
  color: var(--rh-fg);
  background: var(--rh-surface);
}

/* =========================================================================
   TYPE UTILITIES
   ========================================================================= */
.rh-display    { font-family: var(--rh-font-display); font-weight: 900; letter-spacing: var(--rh-tracking-tight); line-height: var(--rh-lh-tight); text-transform: uppercase; }
.rh-h1         { font-family: var(--rh-font-display); font-weight: 900; font-size: var(--rh-text-4xl); line-height: var(--rh-lh-tight); letter-spacing: var(--rh-tracking-tight); text-transform: uppercase; }
.rh-h2         { font-family: var(--rh-font-display); font-weight: 900; font-size: var(--rh-text-3xl); line-height: var(--rh-lh-tight); text-transform: uppercase; }
.rh-h3         { font-family: var(--rh-font-sans); font-weight: 700; font-size: var(--rh-text-2xl); line-height: var(--rh-lh-snug); letter-spacing: var(--rh-tracking-tight); }
.rh-h4         { font-family: var(--rh-font-sans); font-weight: 700; font-size: var(--rh-text-xl); line-height: var(--rh-lh-snug); }
.rh-eyebrow    { font-family: var(--rh-font-mono); font-size: var(--rh-text-xs); text-transform: uppercase; letter-spacing: var(--rh-tracking-widest); font-weight: 500; }
.rh-mono       { font-family: var(--rh-font-mono); }
.rh-binary     { font-family: var(--rh-font-mono); letter-spacing: 0.05em; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.rh-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--rh-font-sans);
  font-weight: 600;
  font-size: var(--rh-text-sm);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--rh-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: var(--rh-tracking-wide);
  transition: transform var(--rh-dur) var(--rh-ease), background var(--rh-dur), color var(--rh-dur), box-shadow var(--rh-dur);
  text-decoration: none;
  white-space: nowrap;
}
.rh-btn:hover { transform: translateY(-1px); }
.rh-btn:active { transform: translateY(0); }

.rh-btn--primary  { background: var(--rh-ink); color: #fff; }
.rh-btn--primary:hover { background: var(--rh-violet-deep); box-shadow: var(--rh-shadow-glow-violet); }

.rh-btn--accent   { background: var(--rh-mint); color: var(--rh-ink); }
.rh-btn--accent:hover { box-shadow: var(--rh-shadow-glow-mint); }

.rh-btn--gradient { background: var(--rh-gradient-h); color: #fff; }
.rh-btn--gradient:hover { filter: brightness(1.1); }

.rh-btn--ghost    { background: transparent; color: var(--rh-ink); border-color: var(--rh-ink); }
.rh-btn--ghost:hover { background: var(--rh-ink); color: #fff; }

.rh-btn--ghost-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.rh-btn--ghost-dark:hover { background: #fff; color: var(--rh-ink); border-color: #fff; }

.rh-btn--sm { padding: 10px 16px; font-size: var(--rh-text-xs); }
.rh-btn--lg { padding: 18px 28px; font-size: var(--rh-text-base); }

/* =========================================================================
   INPUTS
   ========================================================================= */
.rh-input {
  width: 100%;
  font-family: var(--rh-font-sans);
  font-size: var(--rh-text-base);
  padding: 14px 18px;
  border: 1.5px solid var(--rh-line);
  border-radius: var(--rh-radius-md);
  background: #fff;
  color: var(--rh-ink);
  transition: border-color var(--rh-dur), box-shadow var(--rh-dur);
}
.rh-input:focus {
  outline: none;
  border-color: var(--rh-violet-deep);
  box-shadow: 0 0 0 4px rgba(45, 0, 138, 0.12);
}
.rh-input::placeholder { color: var(--rh-muted); }

.rh-label {
  display: block;
  font-family: var(--rh-font-mono);
  font-size: var(--rh-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--rh-tracking-wide);
  font-weight: 500;
  color: var(--rh-ink);
  margin-bottom: 8px;
}

/* =========================================================================
   CARDS
   ========================================================================= */
.rh-card {
  background: #fff;
  border-radius: var(--rh-radius-lg);
  padding: var(--rh-space-6);
  border: 1px solid var(--rh-line);
  transition: transform var(--rh-dur) var(--rh-ease), box-shadow var(--rh-dur);
}
.rh-card--dark {
  background: var(--rh-ink);
  color: #fff;
  border-color: var(--rh-line-dark);
}
.rh-card--soft {
  background: var(--rh-bg-soft);
  border-color: transparent;
}
.rh-card--accent {
  background: var(--rh-mint);
  color: var(--rh-ink);
  border-color: transparent;
}

/* =========================================================================
   BADGES / CHIPS
   ========================================================================= */
.rh-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  font-family: var(--rh-font-mono);
  font-size: var(--rh-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--rh-tracking-wide);
  border-radius: var(--rh-radius-pill);
  background: var(--rh-violet-light);
  color: var(--rh-ink);
}
.rh-badge--mint { background: var(--rh-mint); color: var(--rh-ink); }
.rh-badge--ink  { background: var(--rh-ink); color: #fff; }
.rh-badge--ghost { background: transparent; border: 1px solid currentColor; }

/* =========================================================================
   RHODIUM PERIODIC SEAL · the Rh / 45 plate
   ========================================================================= */
.rh-seal {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 90px;
  height: 124px;
  padding: 10px 12px;
  background: var(--rh-grad-3);
  background-image: linear-gradient(160deg, var(--rh-grad-2), var(--rh-grad-4));
  color: #fff;
  border-radius: var(--rh-radius-sm);
  font-family: var(--rh-font-display);
  position: relative;
}
.rh-seal__num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  font-family: var(--rh-font-mono);
}
.rh-seal__symbol {
  font-size: 44px;
  line-height: 1;
  align-self: center;
  margin-block: 4px;
  text-shadow: 0 2px 0 rgba(0,0,0,0.15);
}
.rh-seal__name {
  font-size: 10px;
  font-family: var(--rh-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--rh-tracking-wider);
  text-align: center;
}

/* =========================================================================
   GRID / LAYOUT
   ========================================================================= */
.rh-container {
  width: 100%;
  max-width: var(--rh-container);
  margin-inline: auto;
  padding-inline: var(--rh-space-5);
}
.rh-section { padding-block: var(--rh-space-9); }
.rh-section--tight { padding-block: var(--rh-space-7); }

/* =========================================================================
   BINARY DECORATION · concept library
   ========================================================================= */
.rh-binary-strip {
  font-family: var(--rh-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--rh-violet-light);
  opacity: 0.4;
  white-space: nowrap;
  overflow: hidden;
}