/* ruizrica.io — brand tokens */
:root {
  /* Brand — electric blue → cyan, sampled from logo */
  --rr-blue: #1E7FE0;        /* logo left edge */
  --rr-blue-deep: #1463BA;
  --rr-blue-soft: #6DB4F0;
  --rr-cyan: #29C5E8;         /* logo right edge */
  --rr-cyan-bright: #5DDDF7;
  --rr-mint: #5EEAD4;
  --rr-amber: #F5A524;
  --rr-magenta: #E879F9;

  /* Backwards-compat aliases — primary brand color */
  --rr-purple: var(--rr-blue);
  --rr-purple-deep: var(--rr-blue-deep);
  --rr-purple-soft: var(--rr-blue-soft);
  --rr-teal: var(--rr-cyan);

  /* Gradient (logo) */
  --rr-grad: linear-gradient(90deg, #1E7FE0 0%, #29C5E8 100%);
  --rr-grad-text: linear-gradient(90deg, #4A9EF0 0%, #5DDDF7 100%);

  /* Neutrals — dark default */
  --rr-bg: #0B0B10;
  --rr-bg-1: #11121A;
  --rr-bg-2: #181925;
  --rr-bg-3: #21222F;
  --rr-line: #2A2B3A;
  --rr-line-soft: #1E1F2B;
  --rr-text: #ECECF0;
  --rr-text-2: #B6B7C3;
  --rr-text-3: #7F808E;
  --rr-text-dim: #54556A;

  /* Code editor palette */
  --rr-code-bg: #0F1018;
  --rr-code-pink: #FF7CC2;
  --rr-code-orange: #FFA66C;
  --rr-code-green: #95E6A3;
  --rr-code-blue: #82B4F4;
  --rr-code-purple: #C4A7FF;
  --rr-code-yellow: #F5D87A;
  --rr-code-red: #FF6B6B;
  --rr-code-comment: #5C5E72;

  /* Status */
  --rr-ok: #4ADE80;
  --rr-warn: #F5A524;
  --rr-err: #F87171;

  /* Type */
  --rr-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --rr-sans: "Geist", "Manrope", -apple-system, BlinkMacSystemFont, "Inter", sans-serif;

  /* Spacing */
  --rr-radius: 14px;
  --rr-radius-sm: 8px;
  --rr-radius-lg: 22px;
}

/* Light mode */
[data-theme="light"] {
  --rr-bg: #F5F2EC;
  --rr-bg-1: #EDE8DE;
  --rr-bg-2: #FFFFFF;
  --rr-bg-3: #FAF7F1;
  --rr-line: #D9D3C4;
  --rr-line-soft: #E5E0D2;
  --rr-text: #14141C;
  --rr-text-2: #3A3B4A;
  --rr-text-3: #6A6B7A;
  --rr-text-dim: #9A9BAA;
  --rr-code-bg: #14141C;
}

/* Reset bits */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--rr-sans);
  background: var(--rr-bg);
  color: var(--rr-text);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* Backdrop grid */
.rr-grid-bg {
  background-image:
    linear-gradient(var(--rr-line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rr-line-soft) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
}

/* Subtle noise */
.rr-noise::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>");
}

/* Caret */
@keyframes rr-blink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.rr-caret {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: currentColor;
  vertical-align: -0.12em;
  margin-left: 2px;
  animation: rr-blink 1s steps(1) infinite;
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rr-bg-1); }
::-webkit-scrollbar-thumb { background: var(--rr-line); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--rr-text-dim); }

/* Selection */
::selection { background: var(--rr-blue); color: white; }

/* Pixel display font — used for logo-style headings */
@font-face {
  font-family: "RR Pixel";
  src: local("VT323"), local("Press Start 2P");
}
.rr-pixel {
  font-family: "VT323", "Press Start 2P", var(--rr-mono);
  letter-spacing: 0.02em;
  image-rendering: pixelated;
}
.rr-grad-text {
  background: var(--rr-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}