:root {
  /* Light Mode Defaults */
  --bg-color: #f4f5f7;
  --card-bg: #ffffff;
  --stroke-color: #e4e5e7;
  --highlight-color: #ffffff;
  --primary-blue: #3b82f6;
  --text-main: #1a1a1a;
  --text-secondary: #6b7280;
  --dot-color: #e4e5e7;
  --card-dot-color: #e4e5e7;
  --icon-bg: #ffffff;
}

/* Dark Mode Overrides - Gemini/Claude Inspired */
.dark {
  --bg-color: #0f1115;
  /* Deep Obsidian */
  --card-bg: #181a1f;
  /* Soft Charcoal */
  --stroke-color: #2a2d35;
  --highlight-color: #000000;
  /* Dark shadow for depth instead of white highlight */
  --text-main: #ededed;
  --text-secondary: #9ca3af;
  --dot-color: #23262e;
  --card-dot-color: #2a2d35;
  --icon-bg: #23262e;
}

body {
  background-color: var(--bg-color);
  font-family: "Inter", "Inter Display", sans-serif;
  font-weight: 500;
  color: var(--text-main);
  font-size: 15px;
  transition:
    background-color 0.1s ease,
    color 0.1s ease;
}

.font-mono-tech {
  font-family: "Geist Mono", monospace;
  font-weight: 500;
}

.rolo-logo {
  /* Use Instrument Serif (Google Fonts) for the logo, fall back to Brush Script */
  font-family: "Instrument Serif", "Brush Script MT", cursive;
  font-size: 2.5rem;
  color: var(--text-secondary);
  font-weight: 400;
  letter-spacing: 0.5px;
}

/* Version badge container stroke (matches text color) */
.version-badge {
  border: 1px solid currentColor;
  box-sizing: border-box;
}

/* --- Etched Borders --- */
.etched-border-t {
  border-top: 1px solid var(--stroke-color);
  box-shadow: 0 1px 0 0 var(--highlight-color) inset;
}

.etched-border-b {
  border-bottom: 1px solid var(--stroke-color);
  box-shadow: 0 1px 0 0 var(--highlight-color);
}

.etched-border-r {
  border-right: 1px solid var(--stroke-color);
  box-shadow: 1px 0 0 0 var(--highlight-color);
}

.etched-border-l {
  border-left: 1px solid var(--stroke-color);
  box-shadow: -1px 0 0 0 var(--highlight-color);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  body {
    font-size: 13px;
  }

  .rolo-logo {
    font-size: 1.8rem;
  }

  header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .version-badge {
    padding: 0.15rem 0.5rem;
    font-size: 8px;
  }
}

/* Card Styles */
.design-border {
  border: 1px solid var(--stroke-color);
  background-color: var(--card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.1s ease,
    border-color 0.1s ease;
}

.design-border-xl {
  border: 1px solid var(--stroke-color);
  background-color: var(--card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 1rem;
  transition:
    background-color 0.1s ease,
    border-color 0.1s ease;
}

.separator-dashed {
  border-top: 1px dashed var(--stroke-color);
  width: 100%;
  height: 1px;
  margin-top: 2px;
  margin-bottom: 2px;
}

.dot-grid-bg {
  position: relative;
  z-index: 0;
}

.dot-grid-bg::before {
  content: "";
  position: absolute;
  inset: 20px;
  z-index: -1;
  background-image: radial-gradient(var(--dot-color) 1.5px, transparent 1.5px);
  background-size: var(--dot-spacing-x, 26px) var(--dot-spacing-y, 24px);
  background-position: center;
  pointer-events: none;
}

.dot-grid-bg-mobile {
  position: relative;
  z-index: 0;
}

.dot-grid-bg-mobile::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: -1;
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: var(--dot-spacing-x-mobile, 26px)
    var(--dot-spacing-y-mobile, 24px);
  background-position: center;
  pointer-events: none;
}

.card-dot-grid {
  background-image: radial-gradient(var(--card-dot-color) 1px, transparent 1px);
  background-size: 18px 18px;
  background-position: center;
}

/* Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--dot-color);
  border-radius: 99px;
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--primary-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

input[type="range"].slider-progress {
  background: linear-gradient(
    to right,
    #3b82f6 var(--slider-progress),
    var(--dot-color) var(--slider-progress)
  );
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--primary-blue);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border: none;
}

.tooltip-arrow {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #1a1a1a transparent transparent transparent;
}

.pill-header-text {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  color: var(--text-secondary);
}

.pill-value-text {
  font-size: 0.75rem;
  line-height: 0.75rem;
}

.pill-container {
  padding: 0.375rem;
  height: 32px;
  border-radius: 0.5rem;
}

.pill-value-wrapper {
  height: 22px;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  display: flex;
  align-items: center;
}

.color-block {
  border: 1px solid var(--stroke-color);
  cursor: pointer;
  transition: border-color 0.15s;
}

.color-block:hover {
  border-color: #9ca3af;
}

/* SVG stroke adaption */
.dark .svg-icon-stroke {
  stroke: #6b7280;
}

.dark .text-gray-600 {
  color: #d1d5db;
}

.dark .text-gray-500 {
  color: #9ca3af;
}

.dark .text-gray-400 {
  color: #6b7280;
}

.dark .bg-white {
  background-color: var(--card-bg);
}

.dark .border-gray-200,
.dark .border-gray-100 {
  border-color: var(--stroke-color);
}

.dark .bg-gray-50 {
  background-color: #23262e;
}

.dark .text-gray-900 {
  color: #f3f4f6;
}

/* Loading state for better FCP */
#root:empty::before {
  content: "";
  display: block;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-color, #f4f5f7);
}