/* ============================================================
   OneOn — Design tokens (light + dark)
   - Light is the default. [data-theme="dark"] overrides.
   - All tokens are CSS variables, consumed everywhere via var(--...).
   ============================================================ */

:root {
  /* === Theme tokens (overridden by [data-theme="dark"]) === */
  --c-bg:         #FAFAF7;
  --c-card:       #FFFFFF;
  --c-card-2:     #FAFAF7;
  --c-soft:       #F4F2F8;
  --c-border:     #ECEAF2;
  --c-border-soft:#F4F2F8;
  --c-hover:      #FAF8FE;
  --c-ink:        #0F0F14;
  --c-ink-2:      #2A2A33;
  --c-mute:       #6B6E78;
  --c-mute-2:     #9CA0AB;
  --c-input-bg:   #FAFAF7;
  --c-input-border: #ECEAF2;
  --c-accent:        #6B4FE6;
  --c-accent-fg:     #FFFFFF;
  --c-accent-soft:   #F4F0FE;
  --c-accent-softer: #EDE7FE;
  --c-accent-ink:    #B8A8F5;
  --c-shadow:        rgba(15,15,20,0.06);
  --c-shadow-pop:    rgba(15,15,20,0.10);

  /* Brand (fixed across themes) */
  --oo-purple: #6B4FE6;
  --oo-purple-600: #5B3FD6;
  --oo-purple-300: #B8A8F5;
  --oo-purple-200: #D6CBFA;
  --oo-purple-100: #EDE7FE;
  --oo-purple-50:  #F5F2FE;

  /* Neutrals (warm whites — used in light mode primarily) */
  --oo-ink:   #0F0F14;
  --oo-ink-2: #2A2A33;
  --oo-mute:  #6B6E78;
  --oo-mute-2:#9CA0AB;
  --oo-line:  #E8E6EE;
  --oo-line-2:#F1EFF6;
  --oo-bg:    #FAFAF7;
  --oo-card:  #FFFFFF;

  /* Status accents */
  --oo-ok:   #1F8A5B;
  --oo-warn: #C97A1A;
  --oo-bad:  #D14545;
  --oo-info: #2A6FDB;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  /* Shadows */
  --shadow-soft: 0 1px 2px rgba(15,15,20,0.04), 0 8px 24px rgba(15,15,20,0.04);
  --shadow-pop:  0 2px 6px rgba(15,15,20,0.06), 0 24px 48px rgba(15,15,20,0.08);
}

[data-theme="dark"] {
  --c-bg:         #0B0B12;
  --c-card:       #16161E;
  --c-card-2:     #1A1A24;
  --c-soft:       #1F1F28;
  --c-border:     #26262F;
  --c-border-soft:#1F1F28;
  --c-hover:      #1D1B28;
  --c-ink:        #F4F2F8;
  --c-ink-2:      #D5D6DD;
  --c-mute:       #A8ACB8;
  --c-mute-2:     #6B6E78;
  --c-input-bg:   #1A1A24;
  --c-input-border:#2A2A36;
  --c-accent:        #7E62FF;
  --c-accent-fg:     #FFFFFF;
  --c-accent-soft:   #1F1A38;
  --c-accent-softer: #251F40;
  --c-accent-ink:    #B8A8F5;
  --c-shadow:        rgba(0,0,0,0.40);
  --c-shadow-pop:    rgba(0,0,0,0.60);
}

/* ============================================================
   Base reset + body
   ============================================================ */

* { box-sizing: border-box; }

html, body, #root {
  height: 100%;
  margin: 0;
  background: var(--c-bg);
  color: var(--c-ink);
}

html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: 'Inter', 'Helvetica Neue', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--c-ink);
  background: var(--c-bg);
  transition: background .2s ease, color .2s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hide scrollbars on opt-in containers */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* Dark-mode-friendly scrollbar */
[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2A2A36; border-radius: 5px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }