/* ==========================================================================
   RIPlay Design System (RDS) — Unified CSS Foundation
   Version: 1.0.0
   
   Freelancer Cyberpunk Aesthetic:
   Cold steel, dark interfaces, sharp accents of fire (ember oranges, molten reds)
   against cool metallic grays, deep charcoal, and matte blacks.
   Precise typography, clean geometry, subtle glowing edges, monospaced font accents.
   Engineered precision throughout.

   This file is self-contained and importable by any page on the site:
   - Main site (index.html, en.html, de.html)
   - Universal Converter (tools/converter/)
   - GoogleFont2SVG (tools/googlefont2svg/)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. GOOGLE FONTS IMPORT
   -------------------------------------------------------------------------- */

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

/* --------------------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES — All prefixed with --rds-
   -------------------------------------------------------------------------- */

:root {

  /* ---- 1.1 Core Backgrounds ---- */
  --rds-void: #08090d;                /* Deepest background */
  --rds-obsidian: #0c0e14;            /* Primary background */
  --rds-gunmetal: #141821;            /* Card / section background */
  --rds-graphite: #1c2030;            /* Elevated surfaces */
  --rds-steel: #2a3040;               /* Borders, dividers */
  --rds-iron: #3d4560;                /* Subtle text, disabled states */
  --rds-silver: #8892a8;              /* Secondary text */
  --rds-chrome: #c8cdd8;              /* Primary text */
  --rds-white: #eef0f4;              /* Bright text, headings */

  /* ---- 1.2 Accent Colors — Fire ---- */
  --rds-ember: #e85d26;               /* Primary fire accent */
  --rds-molten: #ff4d1a;              /* Intense / hover fire accent */
  --rds-forge: #ff6b35;               /* Bright / warm fire accent */
  --rds-heat: #ff9a5c;                /* Soft warm glow */
  --rds-ash: #b84a1c;                 /* Muted / pressed fire state */

  /* ---- 1.3 Semantic / Utility Colors ---- */
  --rds-cyan: #22d3ee;                /* Data / info accent (sparingly) */
  --rds-green: #10b981;               /* Success states */
  --rds-red: #ef4444;                 /* Error / danger states */
  --rds-yellow: #f59e0b;              /* Warning states */

  /* ---- 1.4 Gradients ---- */
  --rds-gradient-fire: linear-gradient(135deg, #e85d26, #ff4d1a);
  --rds-gradient-ember-glow: linear-gradient(135deg, rgba(232, 93, 38, 0.15), rgba(255, 77, 26, 0.05));
  --rds-gradient-hero: radial-gradient(ellipse at 20% 50%, rgba(232, 93, 38, 0.08) 0%, transparent 50%),
                        radial-gradient(ellipse at 80% 20%, rgba(34, 211, 238, 0.04) 0%, transparent 50%),
                        linear-gradient(180deg, #08090d, #0c0e14);
  --rds-gradient-card: linear-gradient(145deg, rgba(28, 32, 48, 0.6), rgba(20, 24, 33, 0.8));

  /* ---- 1.5 Typography ---- */
  --rds-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --rds-font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --rds-font-heading: 'Inter', system-ui, -apple-system, sans-serif;

  /* Type scale */
  --rds-text-xs: 0.75rem;             /* 12px */
  --rds-text-sm: 0.875rem;            /* 14px */
  --rds-text-base: 1rem;              /* 16px */
  --rds-text-lg: 1.125rem;            /* 18px */
  --rds-text-xl: 1.25rem;             /* 20px */
  --rds-text-2xl: 1.5rem;             /* 24px */
  --rds-text-3xl: 2rem;               /* 32px */
  --rds-text-4xl: 2.5rem;             /* 40px */
  --rds-text-5xl: 3rem;               /* 48px */
  --rds-text-display: 4rem;           /* 64px — hero display */

  /* Line heights */
  --rds-leading-tight: 1.25;
  --rds-leading-snug: 1.375;
  --rds-leading-normal: 1.5;
  --rds-leading-relaxed: 1.75;

  /* Letter spacing */
  --rds-tracking-tight: -0.02em;
  --rds-tracking-normal: 0;
  --rds-tracking-wide: 0.025em;
  --rds-tracking-wider: 0.05em;
  --rds-tracking-widest: 0.1em;

  /* ---- 1.6 Spacing Scale ---- */
  --rds-space-1: 0.25rem;             /*  4px */
  --rds-space-2: 0.5rem;              /*  8px */
  --rds-space-3: 0.75rem;             /* 12px */
  --rds-space-4: 1rem;                /* 16px */
  --rds-space-5: 1.25rem;             /* 20px */
  --rds-space-6: 1.5rem;              /* 24px */
  --rds-space-8: 2rem;                /* 32px */
  --rds-space-10: 2.5rem;             /* 40px */
  --rds-space-12: 3rem;               /* 48px */
  --rds-space-16: 4rem;               /* 64px */
  --rds-space-20: 5rem;               /* 80px */
  --rds-space-24: 6rem;               /* 96px */
  --rds-space-32: 8rem;               /* 128px */

  /* ---- 1.7 Border Radius ---- */
  --rds-radius-sm: 4px;
  --rds-radius-md: 8px;
  --rds-radius-lg: 12px;
  --rds-radius-xl: 16px;
  --rds-radius-2xl: 20px;
  --rds-radius-full: 9999px;

  /* ---- 1.8 Shadows ---- */
  --rds-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --rds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --rds-shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 4px 10px -5px rgba(0, 0, 0, 0.3);
  --rds-shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
  --rds-shadow-glow: 0 0 20px rgba(232, 93, 38, 0.2), 0 0 40px rgba(232, 93, 38, 0.1);
  --rds-shadow-glow-intense: 0 0 30px rgba(232, 93, 38, 0.3), 0 0 60px rgba(232, 93, 38, 0.15);
  --rds-shadow-glow-molten: 0 0 30px rgba(239, 68, 68, 0.15);

  /* ---- 1.9 Transitions ---- */
  --rds-transition-fast: 150ms ease;
  --rds-transition-base: 250ms ease;
  --rds-transition-slow: 350ms ease;
  --rds-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- 1.10 Glass Effects ---- */
  --rds-glass-bg: rgba(20, 24, 33, 0.7);
  --rds-glass-border: rgba(42, 48, 64, 0.5);
  --rds-glass-blur: blur(12px);

  /* ---- 1.11 Hover Transforms ---- */
  --rds-hover-lift: translateY(-4px);
  --rds-hover-lift-lg: translateY(-8px);
}


/* ==========================================================================
   2. CSS RESET & BASE STYLES
   ========================================================================== */

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

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--rds-obsidian);
  color: var(--rds-chrome);
  font-family: var(--rds-font-body);
  font-size: var(--rds-text-base);
  line-height: var(--rds-leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent scroll when mobile nav is open */
body.nav-open {
  overflow: hidden;
}

/* Selection */
::selection {
  background: var(--rds-ember);
  color: var(--rds-white);
}

::-moz-selection {
  background: var(--rds-ember);
  color: var(--rds-white);
}

/* Scrollbar — WebKit */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--rds-void);
}

::-webkit-scrollbar-thumb {
  background: var(--rds-steel);
  border-radius: var(--rds-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rds-ember);
}

/* Scrollbar — Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rds-steel) var(--rds-void);
}

/* Images */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form reset */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove default button styles */
button {
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Links */
a {
  color: var(--rds-ember);
  text-decoration: none;
  transition: color var(--rds-transition-fast);
}

a:hover {
  color: var(--rds-molten);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rds-font-heading);
  color: var(--rds-white);
  line-height: var(--rds-leading-tight);
  font-weight: 700;
}

h1 { font-size: var(--rds-text-4xl); }
h2 { font-size: var(--rds-text-3xl); }
h3 { font-size: var(--rds-text-2xl); }
h4 { font-size: var(--rds-text-xl); }
h5 { font-size: var(--rds-text-lg); }
h6 { font-size: var(--rds-text-base); }

/* Paragraphs */
p {
  line-height: var(--rds-leading-relaxed);
  color: var(--rds-chrome);
}

/* Lists */
ul, ol {
  list-style: none;
}

/* Code */
code, pre {
  font-family: var(--rds-font-mono);
}

pre {
  overflow-x: auto;
  padding: var(--rds-space-4);
  background: var(--rds-void);
  border: 1px solid var(--rds-steel);
  border-radius: var(--rds-radius-md);
}

code {
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: rgba(42, 48, 64, 0.5);
  border-radius: var(--rds-radius-sm);
}

pre code {
  padding: 0;
  background: none;
}

/* Horizontal rule */
hr {
  border: none;
  border-top: 1px solid var(--rds-steel);
  margin: var(--rds-space-8) 0;
}

/* Focus visible — accessibility */
:focus-visible {
  outline: 2px solid var(--rds-ember);
  outline-offset: 2px;
}


/* ==========================================================================
   3. UTILITY CLASSES
   ========================================================================== */

/* ---- Monospace font ---- */
.rds-mono {
  font-family: var(--rds-font-mono);
}

/* ---- Fire gradient text ---- */
.rds-text-gradient {
  background: var(--rds-gradient-fire);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Heading gradient (white to ember) ---- */
.rds-heading-gradient {
  background: linear-gradient(135deg, var(--rds-white) 0%, var(--rds-ember) 60%, var(--rds-molten) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Ember glow shadow ---- */
.rds-glow {
  box-shadow: var(--rds-shadow-glow);
}

/* ---- Glass morphism card ---- */
.rds-glass {
  background: var(--rds-glass-bg);
  backdrop-filter: var(--rds-glass-blur);
  -webkit-backdrop-filter: var(--rds-glass-blur);
  border: 1px solid var(--rds-glass-border);
}

/* ---- Scroll-triggered fade-in (IntersectionObserver) ---- */
.rds-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rds-fade-in.rds-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Alternate class name for animate-in pattern ---- */
.rds-animate-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.rds-animate-in.rds-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Container (centered, max-width) ---- */
.rds-container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--rds-space-6);
  padding-right: var(--rds-space-6);
}

/* ---- Standard section padding ---- */
.rds-section {
  padding: var(--rds-space-20) 0;
}

/* ---- Visually hidden (screen readers only) ---- */
.rds-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Text alignment ---- */
.rds-text-center { text-align: center; }
.rds-text-left   { text-align: left; }
.rds-text-right  { text-align: right; }


/* ==========================================================================
   4. COMPONENT CLASSES
   ========================================================================== */

/* --------------------------------------------------------------------------
   4.1 BUTTONS
   -------------------------------------------------------------------------- */

/* Base button */
.rds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rds-space-2);
  padding: 0.875rem 2rem;
  border-radius: var(--rds-radius-lg);
  font-family: var(--rds-font-body);
  font-size: var(--rds-text-base);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all var(--rds-transition-base);
  position: relative;
  overflow: hidden;
}

.rds-btn:focus-visible {
  outline: 2px solid var(--rds-ember);
  outline-offset: 2px;
}

/* Primary — fire gradient */
.rds-btn-primary {
  background: var(--rds-gradient-fire);
  color: #fff;
  box-shadow: 0 4px 20px rgba(232, 93, 38, 0.3);
}

.rds-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(232, 93, 38, 0.4);
  color: #fff;
}

.rds-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(232, 93, 38, 0.3);
}

/* Secondary — transparent with ember border */
.rds-btn-secondary {
  background: transparent;
  color: var(--rds-ember);
  border: 1px solid var(--rds-ember);
}

.rds-btn-secondary:hover {
  background: var(--rds-ember);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--rds-shadow-glow);
}

.rds-btn-secondary:active {
  background: var(--rds-ash);
  border-color: var(--rds-ash);
  transform: translateY(0);
}

/* Ghost — transparent, subtle */
.rds-btn-ghost {
  background: transparent;
  color: var(--rds-silver);
  border: 1px solid var(--rds-steel);
}

.rds-btn-ghost:hover {
  color: var(--rds-chrome);
  background: rgba(42, 48, 64, 0.3);
  border-color: var(--rds-iron);
  transform: translateY(-2px);
}

.rds-btn-ghost:active {
  background: rgba(42, 48, 64, 0.5);
  transform: translateY(0);
}

/* Tool button — mono font, technical feel */
.rds-btn-tool {
  background: var(--rds-graphite);
  color: var(--rds-ember);
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(232, 93, 38, 0.2);
  border-radius: var(--rds-radius-md);
  font-family: var(--rds-font-mono);
  font-weight: 600;
  font-size: var(--rds-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--rds-tracking-wider);
}

.rds-btn-tool:hover {
  background: rgba(232, 93, 38, 0.1);
  border-color: var(--rds-ember);
  box-shadow: var(--rds-shadow-glow);
}

/* Size variants */
.rds-btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: var(--rds-text-sm);
  border-radius: var(--rds-radius-md);
}

.rds-btn-lg {
  padding: 1.125rem 2.5rem;
  font-size: var(--rds-text-lg);
  border-radius: var(--rds-radius-xl);
}


/* --------------------------------------------------------------------------
   4.2 CARDS
   -------------------------------------------------------------------------- */

.rds-card {
  background: var(--rds-glass-bg);
  backdrop-filter: var(--rds-glass-blur);
  -webkit-backdrop-filter: var(--rds-glass-blur);
  border: 1px solid var(--rds-glass-border);
  border-radius: var(--rds-radius-xl);
  padding: var(--rds-space-8);
  transition: all var(--rds-transition-slow);
  position: relative;
  overflow: hidden;
}

/* Top accent line on hover */
.rds-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rds-gradient-fire);
  opacity: 0;
  transition: opacity var(--rds-transition-base);
}

.rds-card:hover {
  transform: var(--rds-hover-lift);
  border-color: rgba(232, 93, 38, 0.15);
  box-shadow: var(--rds-shadow-glow);
}

.rds-card:hover::before {
  opacity: 1;
}

/* Card header */
.rds-card-header {
  padding-bottom: var(--rds-space-4);
  margin-bottom: var(--rds-space-4);
  border-bottom: 1px solid var(--rds-steel);
}

.rds-card-header .rds-card-label {
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--rds-tracking-widest);
  color: var(--rds-silver);
}

/* CAD/Blueprint card variant */
.rds-card-cad {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(34, 211, 238, 0.02) 0px,
      rgba(34, 211, 238, 0.02) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(34, 211, 238, 0.02) 0px,
      rgba(34, 211, 238, 0.02) 1px,
      transparent 1px,
      transparent 20px
    ),
    var(--rds-glass-bg);
  backdrop-filter: var(--rds-glass-blur);
  -webkit-backdrop-filter: var(--rds-glass-blur);
  border: 1px solid rgba(34, 211, 238, 0.1);
  border-radius: var(--rds-radius-xl);
  padding: var(--rds-space-8);
  transition: all var(--rds-transition-slow);
  position: relative;
  overflow: hidden;
}

.rds-card-cad:hover {
  transform: var(--rds-hover-lift);
  border-color: rgba(34, 211, 238, 0.2);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.1);
}


/* --------------------------------------------------------------------------
   4.3 NAVIGATION
   -------------------------------------------------------------------------- */

.rds-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--rds-space-4) var(--rds-space-8);
  background: rgba(8, 9, 13, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rds-glass-border);
  transition: background var(--rds-transition-base);
}

/* Scrolled state — applied via JS */
.rds-nav--scrolled {
  background: rgba(8, 9, 13, 0.97);
  border-bottom-color: rgba(232, 93, 38, 0.08);
}

/* Nav inner container — flex row, space between brand + links */
.rds-nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Brand (logo + text) */
.rds-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--rds-space-3);
  text-decoration: none;
  flex-shrink: 0;
}

.rds-nav-brand-text {
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-lg);
  font-weight: 700;
  color: var(--rds-white);
}

/* Logo image — constrained height */
.rds-nav-logo {
  height: 48px;
  max-height: 48px;
  width: auto;
  display: block;
}

/* Nav links container */
.rds-nav-links {
  display: flex;
  align-items: center;
  gap: var(--rds-space-8);
}

/* Individual nav link */
.rds-nav-link {
  color: var(--rds-silver);
  font-size: var(--rds-text-sm);
  font-weight: 500;
  text-decoration: none;
  position: relative;
  padding: var(--rds-space-2) 0;
  transition: color var(--rds-transition-fast);
}

/* Underline animation */
.rds-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--rds-ember);
  transition: width var(--rds-transition-base);
}

.rds-nav-link:hover {
  color: var(--rds-white);
}

.rds-nav-link:hover::after {
  width: 100%;
}

.rds-nav-link.active {
  color: var(--rds-white);
}

.rds-nav-link.active::after {
  width: 100%;
}

/* Hamburger menu */
.rds-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: var(--rds-space-2);
  z-index: 1001;
  background: none;
  border: none;
}

.rds-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--rds-chrome);
  transition: all var(--rds-transition-base);
  transform-origin: center;
}

.rds-hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.rds-hamburger.active span:nth-child(2) {
  opacity: 0;
}

.rds-hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* Language switcher */
.rds-lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--rds-space-3);
}

.rds-lang-flag img {
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: all var(--rds-transition-base);
  opacity: 0.6;
}

.rds-lang-flag.active img,
.rds-lang-flag img:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(232, 93, 38, 0.3);
}


/* --------------------------------------------------------------------------
   4.4 FORMS
   -------------------------------------------------------------------------- */

/* Input */
.rds-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--rds-steel);
  border-radius: var(--rds-radius-lg);
  background: rgba(12, 14, 20, 0.6);
  color: var(--rds-chrome);
  font-family: var(--rds-font-body);
  font-size: var(--rds-text-base);
  transition: all var(--rds-transition-base);
}

.rds-input:focus {
  outline: none;
  border-color: var(--rds-ember);
  box-shadow: 0 0 0 3px rgba(232, 93, 38, 0.15);
}

.rds-input::placeholder {
  color: var(--rds-iron);
}

/* Textarea */
textarea.rds-input {
  resize: vertical;
  min-height: 120px;
}

/* Select */
.rds-select {
  width: 100%;
  padding: 0.875rem 2.5rem 0.875rem 1.25rem;
  border: 1px solid var(--rds-steel);
  border-radius: var(--rds-radius-lg);
  background: rgba(12, 14, 20, 0.6);
  color: var(--rds-chrome);
  font-family: var(--rds-font-body);
  font-size: var(--rds-text-base);
  transition: all var(--rds-transition-base);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238892a8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
}

.rds-select:focus {
  outline: none;
  border-color: var(--rds-ember);
  box-shadow: 0 0 0 3px rgba(232, 93, 38, 0.15);
}

/* Label */
.rds-label {
  display: block;
  color: var(--rds-silver);
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--rds-tracking-widest);
  margin-bottom: var(--rds-space-2);
}


/* --------------------------------------------------------------------------
   4.5 BADGES / TAGS
   -------------------------------------------------------------------------- */

.rds-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--rds-space-1) var(--rds-space-3);
  border-radius: var(--rds-radius-full);
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--rds-tracking-wider);
  line-height: 1.4;
}

/* Ember badge */
.rds-badge-ember {
  background: rgba(232, 93, 38, 0.12);
  color: var(--rds-ember);
  border: 1px solid rgba(232, 93, 38, 0.25);
}

/* Cyan badge */
.rds-badge-cyan {
  background: rgba(34, 211, 238, 0.1);
  color: var(--rds-cyan);
  border: 1px solid rgba(34, 211, 238, 0.2);
}

/* CAD/engineering badge */
.rds-badge-cad {
  background: rgba(232, 93, 38, 0.05);
  color: var(--rds-ember);
  border: 1px solid rgba(232, 93, 38, 0.3);
  border-radius: var(--rds-radius-sm);
  font-weight: 700;
  letter-spacing: var(--rds-tracking-widest);
}

/* Success badge */
.rds-badge-success {
  background: rgba(16, 185, 129, 0.1);
  color: var(--rds-green);
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Warning badge */
.rds-badge-warning {
  background: rgba(245, 158, 11, 0.1);
  color: var(--rds-yellow);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

/* Error badge */
.rds-badge-error {
  background: rgba(239, 68, 68, 0.1);
  color: var(--rds-red);
  border: 1px solid rgba(239, 68, 68, 0.2);
}


/* --------------------------------------------------------------------------
   4.6 LOADING STATES
   -------------------------------------------------------------------------- */

/* Spinner — CSS-only */
.rds-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--rds-steel);
  border-top-color: var(--rds-ember);
  border-radius: 50%;
  animation: rds-spin 0.8s linear infinite;
}

.rds-spinner-lg {
  width: 40px;
  height: 40px;
  border-width: 3px;
}

/* Pulse animation */
.rds-pulse {
  animation: rds-glow-pulse 2s ease-in-out infinite;
}

/* Skeleton loading placeholder */
.rds-skeleton {
  background: linear-gradient(
    90deg,
    var(--rds-gunmetal) 25%,
    var(--rds-graphite) 50%,
    var(--rds-gunmetal) 75%
  );
  background-size: 200% 100%;
  animation: rds-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--rds-radius-md);
}

/* Progress bar */
.rds-progress {
  height: 4px;
  background: var(--rds-graphite);
  border-radius: var(--rds-radius-full);
  overflow: hidden;
}

.rds-progress-bar {
  height: 100%;
  background: var(--rds-gradient-fire);
  border-radius: var(--rds-radius-full);
  transition: width var(--rds-transition-slow);
}


/* --------------------------------------------------------------------------
   4.7 MODAL / OVERLAY
   -------------------------------------------------------------------------- */

.rds-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 9, 13, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rds-modal {
  background: var(--rds-gunmetal);
  border: 1px solid var(--rds-glass-border);
  border-radius: var(--rds-radius-2xl);
  padding: var(--rds-space-8);
  max-width: 480px;
  width: 90%;
  box-shadow: var(--rds-shadow-xl);
  position: relative;
}

.rds-modal-close {
  position: absolute;
  top: var(--rds-space-4);
  right: var(--rds-space-4);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rds-silver);
  background: transparent;
  border: none;
  border-radius: var(--rds-radius-md);
  cursor: pointer;
  transition: all var(--rds-transition-fast);
}

.rds-modal-close:hover {
  background: rgba(42, 48, 64, 0.5);
  color: var(--rds-white);
}


/* --------------------------------------------------------------------------
   4.8 TOOLTIPS
   -------------------------------------------------------------------------- */

.rds-tooltip {
  position: relative;
  display: inline-block;
}

.rds-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: var(--rds-space-2) var(--rds-space-3);
  background: var(--rds-gunmetal);
  color: var(--rds-chrome);
  font-size: var(--rds-text-xs);
  font-family: var(--rds-font-body);
  white-space: nowrap;
  border-radius: var(--rds-radius-md);
  border: 1px solid var(--rds-steel);
  box-shadow: var(--rds-shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: all var(--rds-transition-fast);
  pointer-events: none;
  z-index: 100;
}

/* Arrow */
.rds-tooltip::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 5px solid transparent;
  border-top-color: var(--rds-steel);
  opacity: 0;
  visibility: hidden;
  transition: all var(--rds-transition-fast);
  pointer-events: none;
  z-index: 101;
}

.rds-tooltip:hover::after,
.rds-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}


/* --------------------------------------------------------------------------
   4.9 HERO SECTION
   -------------------------------------------------------------------------- */

.rds-hero {
  min-height: 100vh;
  background: var(--rds-gradient-hero);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Radial glow overlay */
.rds-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(232, 93, 38, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(255, 77, 26, 0.04) 0%, transparent 50%);
  pointer-events: none;
}

/* Subtle grid overlay */
.rds-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(42, 48, 64, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(42, 48, 64, 0.08) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0.4;
}

.rds-hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 800px;
  padding: var(--rds-space-8);
}


/* ==========================================================================
   5. ANIMATIONS (@keyframes)
   ========================================================================== */

/* Fade in + slide up */
@keyframes rds-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Glow pulse — shadow intensity cycling */
@keyframes rds-glow-pulse {
  0%, 100% {
    box-shadow: 0 0 20px rgba(232, 93, 38, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(232, 93, 38, 0.25);
  }
}

/* Spin — 360deg rotation for spinner */
@keyframes rds-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Skeleton shimmer — left-to-right highlight sweep */
@keyframes rds-skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Slide up — subtle entry */
@keyframes rds-slide-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ember flicker — subtle opacity/color variation */
@keyframes rds-ember-flicker {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }
  25% {
    opacity: 0.92;
    filter: brightness(1.05);
  }
  50% {
    opacity: 1;
    filter: brightness(0.98);
  }
  75% {
    opacity: 0.96;
    filter: brightness(1.02);
  }
}

/* Border glow — cycling border color */
@keyframes rds-border-glow {
  0%, 100% {
    border-color: rgba(232, 93, 38, 0.1);
  }
  50% {
    border-color: rgba(232, 93, 38, 0.25);
  }
}


/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES
   ========================================================================== */

/* --------------------------------------------------------------------------
   6.1 Tablet (768px - 1024px)
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --rds-text-display: 3rem;
    --rds-text-4xl: 2rem;
    --rds-text-3xl: 1.75rem;
    --rds-text-5xl: 2.5rem;
  }

  .rds-container {
    padding-left: var(--rds-space-4);
    padding-right: var(--rds-space-4);
  }

  .rds-section {
    padding: var(--rds-space-16) 0;
  }
}

/* --------------------------------------------------------------------------
   6.2 Mobile (< 768px)
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  :root {
    --rds-text-display: 2.25rem;
    --rds-text-5xl: 2rem;
    --rds-text-4xl: 1.75rem;
    --rds-text-3xl: 1.5rem;
    --rds-text-2xl: 1.25rem;
  }

  body {
    font-size: var(--rds-text-sm);
  }

  .rds-section {
    padding: var(--rds-space-12) 0;
  }

  .rds-container {
    padding-left: var(--rds-space-4);
    padding-right: var(--rds-space-4);
  }

  /* Touch-friendly targets — 44px minimum */
  .rds-btn,
  .rds-nav-link,
  .rds-input,
  .rds-select {
    min-height: 44px;
  }

  .rds-btn {
    padding: 0.75rem 1.5rem;
    width: 100%;
  }

  .rds-card {
    padding: var(--rds-space-6);
  }

  /* Hamburger visible */
  .rds-hamburger {
    display: flex;
  }

  /* Nav links become slide-out drawer */
  .rds-nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background: var(--rds-gunmetal);
    border-left: 1px solid var(--rds-glass-border);
    flex-direction: column;
    padding: var(--rds-space-20) var(--rds-space-8);
    transition: right var(--rds-transition-slow);
    z-index: 1000;
    gap: var(--rds-space-4);
  }

  .rds-nav-links.open {
    right: 0;
  }

  .rds-nav-link {
    font-size: var(--rds-text-base);
    padding: var(--rds-space-3) 0;
  }

  /* Modal full-width on mobile */
  .rds-modal {
    width: 95%;
    max-width: none;
    border-radius: var(--rds-radius-lg);
    padding: var(--rds-space-6);
  }

  /* Hero adjustments */
  .rds-hero {
    min-height: 80vh;
  }

  .rds-hero-content {
    padding: var(--rds-space-4);
  }
}

/* --------------------------------------------------------------------------
   6.3 Reduced motion preference
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .rds-fade-in,
  .rds-animate-in {
    opacity: 1;
    transform: none;
  }
}


/* ==========================================================================
   7. CAD/CAM BLUEPRINT VARIANT
   ========================================================================== */

/* Blueprint container — engineering grid background */
.rds-blueprint {
  background:
    /* Major grid lines */
    linear-gradient(rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.03) 1px, transparent 1px),
    /* Minor grid lines */
    linear-gradient(rgba(34, 211, 238, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.015) 1px, transparent 1px),
    var(--rds-void);
  background-size:
    100px 100px,
    100px 100px,
    20px 20px,
    20px 20px;
}

/* Blueprint card — grid background with cyan-tinted border */
.rds-blueprint-card {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(34, 211, 238, 0.015) 0px,
      rgba(34, 211, 238, 0.015) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(34, 211, 238, 0.015) 0px,
      rgba(34, 211, 238, 0.015) 1px,
      transparent 1px,
      transparent 20px
    ),
    var(--rds-glass-bg);
  backdrop-filter: var(--rds-glass-blur);
  -webkit-backdrop-filter: var(--rds-glass-blur);
  border: 1px solid rgba(34, 211, 238, 0.08);
  border-radius: var(--rds-radius-xl);
  padding: var(--rds-space-8);
  transition: all var(--rds-transition-slow);
  position: relative;
  overflow: hidden;
}

.rds-blueprint-card:hover {
  transform: var(--rds-hover-lift);
  border-color: rgba(34, 211, 238, 0.2);
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.08);
}

/* CAD format badge — technical label */
.rds-cad-format-badge {
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--rds-tracking-widest);
  padding: var(--rds-space-1) var(--rds-space-3);
  border: 1px solid rgba(232, 93, 38, 0.3);
  border-radius: var(--rds-radius-sm);
  color: var(--rds-ember);
  background: rgba(232, 93, 38, 0.05);
}


/* ==========================================================================
   END OF RIPLAY DESIGN SYSTEM
   ========================================================================== */