/* ═══════════════════════════════════════════════════════
   OURO  ·  Base: variables, reset, typography
   ═══════════════════════════════════════════════════════ */

:root {
  /* Brand — Adventure Orange */
  --accent:        #FF6B00;
  --accent-dark:   #CC5500;
  --accent-subtle: rgba(255, 107, 0, 0.10);
  --accent-glow:   rgba(255, 107, 0, 0.25);

  /* Surfaces — warm off-white matching iOS lightTheme */
  --bg:        #FAF8F3;
  --surface:   #FFFFFF;
  --surface-2: #F0EEE8;
  --surface-3: #E6E3DC;

  /* Borders — warm neutral */
  --border:        rgba(60, 60, 50, 0.15);
  --border-strong: rgba(60, 60, 50, 0.25);

  /* Text — warm dark to match iOS */
  --text:     #1A1A1A;
  --text-sub: #4A4A45;
  --text-dim: rgba(60, 60, 50, 0.5);

  /* Semantic — iOS system colors */
  --success: #30D158;
  --warning: #F9B300;
  --danger:  #FF453A;

  /* Layout */
  --sidebar-w: 260px;

  /* Radii */
  --radius-card: 20px;
  --radius-btn:  13px;

  /* Shadows — layered for real depth (warm neutral to match iOS) */
  --shadow-xs:     0 1px 2px rgba(60,60,50,0.05);
  --shadow-sm:     0 2px 8px rgba(60,60,50,0.06), 0 1px 2px rgba(60,60,50,0.05);
  --shadow:        0 4px 20px rgba(60,60,50,0.08), 0 1px 4px rgba(60,60,50,0.05);
  --shadow-lg:     0 16px 56px rgba(60,60,50,0.12), 0 4px 16px rgba(60,60,50,0.07);
  --shadow-accent: 0 8px 32px rgba(255,107,0,0.30), 0 2px 8px rgba(255,107,0,0.18);

  /* Motion */
  --ease:   cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ── SELECTION ──────────────────────────────────────── */
::selection { background: var(--accent-subtle); color: var(--accent-dark); }

/* ── BASE ───────────────────────────────────────────── */
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
  background-blend-mode: multiply;
  background-size: 200px 200px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}