/* ─────────────────────────────────────────────────────────────────
   rarefinds — Design tokens
   Pixel · Chrome · Minimal
   v3 Studio brand foundation
   ───────────────────────────────────────────────────────────────── */

/* Web fonts — primary + supporting */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&family=Doto:wght@500;700;800;900&display=swap");

:root {
  /* ─── LIGHT (default) ────────────────────────────────────────── */

  /* Surface ramp — warm, technical greys ("pewter / paper") */
  --rf-bg:           #D9D7D2;   /* canvas / tray */
  --rf-surface-1:    #F1EFEB;   /* card */
  --rf-surface-2:    #E8E6E1;   /* nested / inset */
  --rf-surface-3:    #FBFAF7;   /* lifted chrome highlight */

  /* Ink — warm near-black with calibrated alpha steps */
  --rf-ink:          #14140E;
  --rf-ink-2:        rgba(20,20,14,0.62);
  --rf-ink-3:        rgba(20,20,14,0.42);
  --rf-ink-4:        rgba(20,20,14,0.20);
  --rf-ink-5:        rgba(20,20,14,0.10);
  --rf-hairline:     rgba(20,20,14,0.10);

  /* Chrome — for metallic 3D buttons & dials */
  --rf-chrome-1:     #FBFAF7;
  --rf-chrome-2:     #E2DFD9;
  --rf-chrome-3:     #B5B1A7;
  --rf-chrome-4:     #7C7972;

  /* Accent — the single signature orange, used as a "live status dot" */
  --rf-orange:       #FF5A1F;
  --rf-orange-soft:  #FF8C5A;
  --rf-orange-deep:  #DC4610;
  --rf-orange-bg:    rgba(255,90,31,0.16);

  /* Optional categorical accents (used sparingly; e.g. card art hues) */
  --rf-blue:         #6BA5FF;
  --rf-violet:       #B86BFF;
  --rf-amber:        #FFB13D;

  /* Type families */
  --rf-font-display: "Inter", -apple-system, system-ui, "Helvetica Neue", sans-serif;
  --rf-font-mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
  --rf-font-pixel:   "Doto", "JetBrains Mono", monospace;     /* big bitmap numerals */

  /* Type scale — keep tight, technical, lots of mono for labels */
  --rf-text-2xs:     9px;      /* tiny unit labels under values */
  --rf-text-xs:      10px;     /* mono labels, captions */
  --rf-text-sm:      11px;     /* segment labels, meta */
  --rf-text-md:      13px;     /* card titles */
  --rf-text-base:    14px;     /* body */
  --rf-text-lg:      16px;     /* button labels */
  --rf-text-xl:      22px;     /* in-field big input value */
  --rf-text-2xl:     26px;     /* Oscar's spoken message */
  --rf-text-3xl:     48px;     /* pixel stat numbers */
  --rf-text-4xl:     96px;     /* pixel scan counter */
  --rf-text-5xl:     132px;    /* hero pixel number */

  /* Letter-spacing — tighten display, hold mono at 0 */
  --rf-tracking-tight: -0.025em;
  --rf-tracking-snug:  -0.01em;
  --rf-tracking-flat:  0;
  --rf-tracking-wide:  0.04em;
  --rf-tracking-spaced: 0.4em;   /* "— PORTFOLIO —" all-caps strip */

  /* Radii — large, pillowy */
  --rf-radius-xs:    4px;     /* card image inner */
  --rf-radius-sm:    8px;
  --rf-radius-md:    12px;
  --rf-radius-lg:    18px;    /* feature option */
  --rf-radius-xl:    22px;    /* product tile, stat capsule */
  --rf-radius-2xl:   26px;    /* hero card */
  --rf-radius-full:  999px;   /* chips, capsules, dock */

  /* Spacing scale */
  --rf-space-1:      4px;
  --rf-space-2:      8px;
  --rf-space-3:      10px;
  --rf-space-4:      12px;
  --rf-space-5:      14px;
  --rf-space-6:      16px;
  --rf-space-7:      22px;
  --rf-space-8:      28px;
  --rf-space-9:      36px;

  /* Shadows — paired inner highlight + outer drop, NEVER use solo */
  --rf-shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.70);
  --rf-shadow-inset-lo: inset 0 -1px 0 rgba(20,20,14,0.06);
  --rf-shadow-soft:     0 8px 18px -10px rgba(20,20,14,0.12);
  --rf-shadow-card:     0 12px 28px -14px rgba(20,20,14,0.12);
  --rf-shadow-pop:      0 16px 32px -14px rgba(20,20,14,0.24);

  /* Chrome button gradient + paired shadow */
  --rf-chrome-grad: radial-gradient(60% 60% at 30% 25%, #FFFFFF 0%, #DCD9D2 60%, #9C988E 100%);
  --rf-chrome-dark-grad: radial-gradient(60% 60% at 30% 25%, #4A4742 0%, #1F1D19 60%, #07060A 100%);
  --rf-chrome-orange-grad: radial-gradient(60% 60% at 30% 25%, rgba(255,210,180,0.95) 0%, rgba(255,130,80,0.85) 45%, rgba(220,70,20,0.95) 100%);

  /* Motion — short, springy */
  --rf-ease-spring:  cubic-bezier(.2,.7,.2,1);
  --rf-ease-soft:    cubic-bezier(.4,.0,.2,1);
  --rf-dur-fast:     0.15s;
  --rf-dur-base:     0.22s;
  --rf-dur-slow:     0.55s;
}

/* ─── DARK theme — same architecture, warm-black palette ─────────
   Activate by adding [data-theme="dark"] on the root, or .rf-dark
   ───────────────────────────────────────────────────────────────── */
[data-theme="dark"],
.rf-dark {
  --rf-bg:           #0E0D0A;
  --rf-surface-1:    #1A1814;
  --rf-surface-2:    #1F1C18;
  --rf-surface-3:    #2A2723;

  --rf-ink:          #EEEBE4;
  --rf-ink-2:        rgba(238,235,228,0.70);
  --rf-ink-3:        rgba(238,235,228,0.46);
  --rf-ink-4:        rgba(238,235,228,0.22);
  --rf-ink-5:        rgba(238,235,228,0.10);
  --rf-hairline:     rgba(238,235,228,0.10);

  --rf-chrome-1:     #2A2723;
  --rf-chrome-2:     #1F1D19;
  --rf-chrome-3:     #3A3833;
  --rf-chrome-4:     #4A4742;

  /* On dark, chrome buttons get a softer mid-tone neutral */
  --rf-chrome-grad: radial-gradient(60% 60% at 30% 25%, #E8E5DE 0%, #B5B1A7 60%, #6E6B64 100%);

  --rf-shadow-inset-hi: inset 0 1px 0 rgba(255,255,255,0.06);
  --rf-shadow-inset-lo: inset 0 -1px 0 rgba(0,0,0,0.5);
  --rf-shadow-soft:     0 8px 18px -12px rgba(0,0,0,0.5);
  --rf-shadow-card:     0 12px 28px -14px rgba(0,0,0,0.55);
  --rf-shadow-pop:      0 16px 32px -14px rgba(0,0,0,0.55);
}

/* ─────────────────────────────────────────────────────────────────
   SEMANTIC role classes — drop on elements directly
   ───────────────────────────────────────────────────────────────── */

/* Display + structural text */
.rf-display {
  font-family: var(--rf-font-display);
  font-weight: 500;
  font-size: var(--rf-text-2xl);
  line-height: 1.18;
  letter-spacing: var(--rf-tracking-tight);
  color: var(--rf-ink);
  text-wrap: pretty;
}
.rf-h1 {
  font-family: var(--rf-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--rf-ink);
}
.rf-h2 {
  font-family: var(--rf-font-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--rf-ink);
}

/* Section header — small mono with "// " orange prefix */
.rf-section-head {
  font-family: var(--rf-font-mono);
  font-weight: 500;
  font-size: var(--rf-text-sm);
  letter-spacing: var(--rf-tracking-wide);
  color: var(--rf-ink);
  text-transform: lowercase;
}
.rf-section-head::before {
  content: "// ";
  color: var(--rf-orange);
}

/* Body */
.rf-body {
  font-family: var(--rf-font-display);
  font-size: var(--rf-text-base);
  line-height: 1.4;
  color: var(--rf-ink);
}

/* Mono label — universal small label / meta text. ALWAYS lowercase. */
.rf-mono {
  font-family: var(--rf-font-mono);
  font-weight: 400;
  font-size: var(--rf-text-sm);
  letter-spacing: 0;
  color: var(--rf-ink-2);
  text-transform: lowercase;
}
.rf-mono-xs {
  font-family: var(--rf-font-mono);
  font-size: var(--rf-text-xs);
  color: var(--rf-ink-3);
  text-transform: lowercase;
}

/* Pixel display number — used for hero stats; tabular-numbers ON */
.rf-pixel {
  font-family: var(--rf-font-pixel);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.78;
  color: var(--rf-ink);
  font-variant-numeric: tabular-nums;
}

/* The single orange "live" dot. Use sparingly — like a red record dot. */
.rf-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--rf-orange);
  box-shadow: 0 0 8px rgba(255,90,31,0.65);
  vertical-align: 2px;
}

/* Section divider — bracketed all-caps strip in the StudioTop pattern */
.rf-section-strip {
  font-family: var(--rf-font-display);
  font-weight: 500;
  font-size: 6px;
  letter-spacing: var(--rf-tracking-spaced);
  text-transform: uppercase;
  color: var(--rf-ink-3);
}