/* ======================================================================
   RK INNOVATIONS — DESIGN TOKENS
   Mission-critical, dark-first, wireframe enterprise UI
   ====================================================================== */

/* Corporate type pairing:
   Display: Manrope — modern, geometric, confident. Reads premium at large sizes.
   Body:    Inter Tight — slightly condensed, very legible at 14–17px, corporate.
   Mono:    JetBrains Mono — for technical accents (IDs, telemetry, footers). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&family=Inter+Tight:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ------------------------------------------------------------------
     COLOR — BASE PALETTE
     ------------------------------------------------------------------ */

  /* Graphite / near-black backgrounds — the surface stack */
  --rk-bg-void:        #05070a;   /* deepest — page background, OLED feel */
  --rk-bg-base:        #0a0e14;   /* default app background */
  --rk-bg-surface:     #0f1520;   /* cards, panels */
  --rk-bg-elevated:    #141b28;   /* hovered cards, popovers */
  --rk-bg-overlay:     #1a2332;   /* modals, focused panels */
  --rk-bg-inset:       #070a10;   /* inset wells, code blocks */

  /* Navy hint — for tinted dark surfaces */
  --rk-navy-900:       #0b1424;
  --rk-navy-800:       #0f1c33;
  --rk-navy-700:       #14264a;

  /* Borders & dividers — thin, technical */
  --rk-border-faint:   rgba(255, 255, 255, 0.04);
  --rk-border-subtle:  rgba(255, 255, 255, 0.06);
  --rk-border-default: rgba(120, 160, 200, 0.12);
  --rk-border-strong:  rgba(120, 180, 220, 0.22);
  --rk-border-accent:  rgba(0, 212, 255, 0.45);
  --rk-grid-line:      rgba(120, 180, 220, 0.06);

  /* Foreground / text */
  --rk-fg-1:           #e6edf5;   /* primary text */
  --rk-fg-2:           #b3c1d1;   /* secondary text */
  --rk-fg-3:           #7a8aa0;   /* tertiary, captions */
  --rk-fg-4:           #4d5b70;   /* quaternary, disabled */
  --rk-fg-5:           #2e3848;   /* near-invisible, scaffolding */

  /* ------------------------------------------------------------------
     COLOR — ACCENTS
     ------------------------------------------------------------------ */

  /* Cyan — primary action, system signals */
  --rk-cyan-100:       #b8f2ff;
  --rk-cyan-300:       #5ee0ff;
  --rk-cyan-500:       #00d4ff;   /* hero accent */
  --rk-cyan-600:       #00b3d9;
  --rk-cyan-700:       #0088a8;
  --rk-cyan-glow:      rgba(0, 212, 255, 0.35);

  /* Electric blue — secondary action, links */
  --rk-blue-300:       #7aa9ff;
  --rk-blue-500:       #3d7dff;
  --rk-blue-600:       #2a5fd9;
  --rk-blue-700:       #1f47a8;

  /* Turquoise — success, "online", verified */
  --rk-teal-300:       #7eecd0;
  --rk-teal-500:       #14d4a8;
  --rk-teal-700:       #0a8e72;

  /* Gold — emphasis, premium, audit highlight (use sparingly) */
  --rk-gold-300:       #ffe39a;
  --rk-gold-500:       #d4a847;
  --rk-gold-700:       #8e6d1e;

  /* Status — semantic */
  --rk-status-ok:      #14d4a8;
  --rk-status-warn:    #f5b53a;
  --rk-status-error:   #ff5470;
  --rk-status-info:    #00d4ff;
  --rk-status-neutral: #7a8aa0;

  /* ------------------------------------------------------------------
     SEMANTIC ROLES
     ------------------------------------------------------------------ */

  --rk-accent:           var(--rk-cyan-500);
  --rk-accent-hover:     var(--rk-cyan-300);
  --rk-accent-pressed:   var(--rk-cyan-600);
  --rk-accent-fg:        #001218;       /* text on cyan */

  --rk-link:             var(--rk-cyan-300);
  --rk-link-hover:       var(--rk-cyan-100);

  --rk-fg-on-dark:       var(--rk-fg-1);
  --rk-fg-muted:         var(--rk-fg-3);

  --rk-surface:          var(--rk-bg-surface);
  --rk-surface-hover:    var(--rk-bg-elevated);
  --rk-surface-active:   var(--rk-bg-overlay);

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------ */

  /* Pairing — Google Fonts substitutes; flagged in fonts/README.md.
     Display: Manrope          → confident geometric sans, premium at scale
     Body:    Inter Tight      → condensed, very legible 14–17px, corporate
     Mono:    JetBrains Mono   → control-center / data feel */
  --rk-font-display: "Manrope", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --rk-font-sans:    "Inter Tight", "Manrope", ui-sans-serif, system-ui, sans-serif;
  --rk-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — tight, technical */
  --rk-text-2xs:   10px;
  --rk-text-xs:    11px;
  --rk-text-sm:    13px;
  --rk-text-base:  14px;
  --rk-text-md:    15px;
  --rk-text-lg:    18px;
  --rk-text-xl:    22px;
  --rk-text-2xl:   28px;
  --rk-text-3xl:   36px;
  --rk-text-4xl:   48px;
  --rk-text-5xl:   64px;
  --rk-text-6xl:   84px;

  /* Line heights */
  --rk-leading-tight:  1.1;
  --rk-leading-snug:   1.25;
  --rk-leading-normal: 1.45;
  --rk-leading-loose:  1.65;

  /* Letter spacing — tight on display, wide on labels */
  --rk-track-tight:    -0.02em;
  --rk-track-normal:   0;
  --rk-track-wide:     0.04em;
  --rk-track-wider:    0.08em;
  --rk-track-widest:   0.16em;

  /* Weights */
  --rk-weight-light:    300;
  --rk-weight-regular:  400;
  --rk-weight-medium:   500;
  --rk-weight-semi:     600;
  --rk-weight-bold:     700;

  /* ------------------------------------------------------------------
     SPACING — 4px base, technical scale
     ------------------------------------------------------------------ */
  --rk-space-0:   0;
  --rk-space-1:   2px;
  --rk-space-2:   4px;
  --rk-space-3:   6px;
  --rk-space-4:   8px;
  --rk-space-5:   12px;
  --rk-space-6:   16px;
  --rk-space-7:   20px;
  --rk-space-8:   24px;
  --rk-space-9:   32px;
  --rk-space-10:  40px;
  --rk-space-11:  56px;
  --rk-space-12:  72px;
  --rk-space-13:  96px;

  /* ------------------------------------------------------------------
     RADII — small / sharp; this brand is technical, not pillowy
     ------------------------------------------------------------------ */
  --rk-radius-0:  0px;
  --rk-radius-1:  2px;        /* default */
  --rk-radius-2:  4px;        /* cards */
  --rk-radius-3:  6px;
  --rk-radius-4:  8px;        /* modals */
  --rk-radius-pill: 999px;    /* tags only */

  /* ------------------------------------------------------------------
     ELEVATION — minimal shadows, more reliance on borders + glow
     ------------------------------------------------------------------ */
  --rk-shadow-0: none;
  --rk-shadow-1: 0 1px 0 rgba(255,255,255,0.02) inset, 0 1px 2px rgba(0,0,0,0.4);
  --rk-shadow-2: 0 1px 0 rgba(255,255,255,0.02) inset, 0 4px 14px rgba(0,0,0,0.5);
  --rk-shadow-3: 0 1px 0 rgba(255,255,255,0.03) inset, 0 12px 32px rgba(0,0,0,0.6);
  --rk-shadow-glow: 0 0 0 1px var(--rk-border-accent), 0 0 24px var(--rk-cyan-glow);
  --rk-shadow-glow-soft: 0 0 0 1px rgba(0,212,255,0.25), 0 0 16px rgba(0,212,255,0.18);

  /* Glass panel — used sparingly */
  --rk-glass-bg: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  --rk-glass-border: 1px solid var(--rk-border-default);
  --rk-glass-blur: blur(8px);

  /* ------------------------------------------------------------------
     MOTION — restrained; this is mission-critical
     ------------------------------------------------------------------ */
  --rk-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --rk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --rk-dur-fast:    120ms;
  --rk-dur-base:    200ms;
  --rk-dur-slow:    320ms;

  /* ------------------------------------------------------------------
     GRID — radar / blueprint background
     ------------------------------------------------------------------ */
  --rk-grid-bg:
    linear-gradient(var(--rk-grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--rk-grid-line) 1px, transparent 1px) 0 0 / 24px 24px;
}

/* ======================================================================
   LIGHT THEME — applied via [data-theme="light"]
   ====================================================================== */
:root[data-theme="light"], [data-theme="light"] {
  --rk-bg-void:        #f4f6fa;
  --rk-bg-base:        #fbfcfe;
  --rk-bg-surface:     #ffffff;
  --rk-bg-elevated:    #f7f9fc;
  --rk-bg-overlay:     #ffffff;
  --rk-bg-inset:       #f0f3f8;

  --rk-border-faint:   rgba(10, 30, 60, 0.04);
  --rk-border-subtle:  rgba(10, 30, 60, 0.06);
  --rk-border-default: rgba(20, 50, 90, 0.10);
  --rk-border-strong:  rgba(20, 50, 90, 0.20);
  --rk-border-accent:  rgba(0, 136, 168, 0.45);
  --rk-grid-line:      rgba(20, 50, 90, 0.05);

  --rk-fg-1:           #0a0e14;
  --rk-fg-2:           #2e3848;
  --rk-fg-3:           #5a6678;
  --rk-fg-4:           #94a0b3;
  --rk-fg-5:           #c8d0dc;

  /* Cyan stays the brand, but use deeper variants for AAA contrast on light */
  --rk-accent:         #0088a8;
  --rk-accent-hover:   #00b3d9;
  --rk-accent-pressed: #006a85;
  --rk-accent-fg:      #ffffff;

  --rk-link:           #0088a8;
  --rk-link-hover:     #006a85;

  --rk-cyan-glow:      rgba(0, 136, 168, 0.18);
}

/* ======================================================================
   SEMANTIC ELEMENT STYLES — drop into any preview card
   ====================================================================== */

.rk-base {
  background: var(--rk-bg-base);
  color: var(--rk-fg-1);
  font-family: var(--rk-font-sans);
  font-size: var(--rk-text-base);
  line-height: var(--rk-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.rk-display-1 {
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-6xl);
  font-weight: var(--rk-weight-light);
  letter-spacing: var(--rk-track-tight);
  line-height: var(--rk-leading-tight);
  color: var(--rk-fg-1);
}

.rk-h1 {
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-4xl);
  font-weight: var(--rk-weight-medium);
  letter-spacing: var(--rk-track-tight);
  line-height: var(--rk-leading-tight);
  color: var(--rk-fg-1);
}

.rk-h2 {
  font-family: var(--rk-font-display);
  font-size: var(--rk-text-2xl);
  font-weight: var(--rk-weight-medium);
  letter-spacing: var(--rk-track-tight);
  line-height: var(--rk-leading-snug);
  color: var(--rk-fg-1);
}

.rk-h3 {
  font-family: var(--rk-font-sans);
  font-size: var(--rk-text-lg);
  font-weight: var(--rk-weight-semi);
  letter-spacing: var(--rk-track-normal);
  line-height: var(--rk-leading-snug);
  color: var(--rk-fg-1);
}

.rk-eyebrow {
  font-family: var(--rk-font-mono);
  font-size: var(--rk-text-xs);
  font-weight: var(--rk-weight-medium);
  letter-spacing: var(--rk-track-widest);
  text-transform: uppercase;
  color: var(--rk-cyan-500);
}

.rk-label {
  font-family: var(--rk-font-mono);
  font-size: var(--rk-text-2xs);
  font-weight: var(--rk-weight-medium);
  letter-spacing: var(--rk-track-wider);
  text-transform: uppercase;
  color: var(--rk-fg-3);
}

.rk-body {
  font-family: var(--rk-font-sans);
  font-size: var(--rk-text-base);
  font-weight: var(--rk-weight-regular);
  line-height: var(--rk-leading-normal);
  color: var(--rk-fg-2);
}

.rk-caption {
  font-family: var(--rk-font-sans);
  font-size: var(--rk-text-sm);
  color: var(--rk-fg-3);
}

.rk-mono {
  font-family: var(--rk-font-mono);
  font-size: var(--rk-text-sm);
  color: var(--rk-fg-2);
  font-feature-settings: "ss01", "zero";
}

.rk-code {
  font-family: var(--rk-font-mono);
  font-size: var(--rk-text-sm);
  color: var(--rk-cyan-300);
  background: var(--rk-bg-inset);
  padding: 1px 6px;
  border: 1px solid var(--rk-border-default);
  border-radius: var(--rk-radius-1);
}

/* Card primitive used by previews */
.rk-card {
  background: var(--rk-bg-surface);
  border: 1px solid var(--rk-border-default);
  border-radius: var(--rk-radius-2);
}

.rk-grid-bg {
  background:
    linear-gradient(var(--rk-grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--rk-grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--rk-bg-base);
}