/* ─────────────────────────────────────────────────────────────────
   Apple Light — shared design tokens for robotics-practice
   Used by guide.html, app.html, and all interactive/*.html demos.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* Binary palette (Apple) */
  --rp-bg:           #ffffff;
  --rp-bg-alt:       #f5f5f7;
  --rp-bg-elev:      #fafafc;
  --rp-bg-panel:     #f5f5f7;
  --rp-bg-canvas:    #f5f5f7;

  /* Text */
  --rp-text:         #1d1d1f;
  --rp-text-body:    rgba(0, 0, 0, 0.80);
  --rp-text-muted:   rgba(0, 0, 0, 0.56);
  --rp-text-faint:   rgba(0, 0, 0, 0.40);
  --rp-text-heading: #1d1d1f;

  /* Single accent — Apple Blue */
  --rp-accent:       #0071e3;
  --rp-accent-soft:  rgba(0, 113, 227, 0.08);
  --rp-accent-alpha: rgba(0, 113, 227, 0.20);
  --rp-link:         #0066cc;
  --rp-focus:        #0071e3;

  /* Borders */
  --rp-border:       rgba(0, 0, 0, 0.08);
  --rp-border-mid:   rgba(0, 0, 0, 0.12);
  --rp-border-strong:rgba(0, 0, 0, 0.16);

  /* Data-series palette (colorblind-aware, keeps chart legibility) */
  --rp-series-1:     #0071e3;   /* blue    — estimate / primary */
  --rp-series-2:     #34c759;   /* green   — truth / secondary */
  --rp-series-3:     #ff3b30;   /* red     — measurement / error */
  --rp-series-4:     #ff9500;   /* orange  — highlight */
  --rp-series-5:     #af52de;   /* purple  — auxiliary */
  --rp-series-axis-x:#ff3b30;
  --rp-series-axis-y:#34c759;
  --rp-series-axis-z:#0071e3;

  /* Typography */
  --rp-font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', sans-serif;
  --rp-font-body:    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', system-ui, sans-serif;
  --rp-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Radii */
  --rp-radius-sm:    5px;
  --rp-radius-md:    8px;
  --rp-radius-lg:    12px;
  --rp-radius-pill:  980px;

  /* Shadow (soft, single — Apple style) */
  --rp-shadow-card:  rgba(0, 0, 0, 0.08) 0 1px 3px, rgba(0, 0, 0, 0.04) 0 4px 12px;
  --rp-shadow-elev:  rgba(0, 0, 0, 0.22) 3px 5px 30px 0px;
}

/* ─────────── Shared form controls (opt-in via .rp-ui class if needed) ─────────── */

.rp-panel {
  background: var(--rp-bg-panel);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-md);
  padding: 14px 16px;
  color: var(--rp-text);
}
.rp-panel h3 {
  font-family: var(--rp-font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--rp-text-heading);
  letter-spacing: -0.012em;
  margin-bottom: 10px;
}

.rp-button {
  background: var(--rp-accent);
  color: #fff;
  border: 1px solid transparent;
  padding: 8px 15px;
  border-radius: var(--rp-radius-md);
  font-family: var(--rp-font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.014em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rp-button:hover { background: #0077ed; }
.rp-button.secondary {
  background: #fff;
  color: var(--rp-text);
  border-color: var(--rp-border);
}
.rp-button.secondary:hover { background: var(--rp-bg-alt); border-color: var(--rp-border-mid); }
.rp-button:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 2px; }

.rp-input, .rp-select {
  background: #fff;
  color: var(--rp-text);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-md);
  padding: 8px 10px;
  font-family: var(--rp-font-body);
  font-size: 13.5px;
  letter-spacing: -0.014em;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.rp-input:focus, .rp-select:focus {
  border-color: var(--rp-accent);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
}

/* Range slider — Apple Blue accent */
input[type="range"].rp-slider,
.rp-ui input[type="range"] { accent-color: var(--rp-accent); }

/* Canvas convention — soft light surface */
.rp-canvas {
  background: var(--rp-bg-canvas);
  border: 1px solid var(--rp-border);
  border-radius: var(--rp-radius-md);
  display: block;
}

/* Selection (global, safe to apply in all demos) */
::selection { background: var(--rp-accent-alpha); color: var(--rp-text); }