/* ============================================================
   Bow Places — Design Tokens
   Brand refactor: cream + navy + emerald (acento). Sober. Generous.
   Companion: bow-design.css (component classes).
   Hosted brand fonts via Fontshare (Chillax) + Google Fonts (DM Sans),
   declared in index.html — no binary assets required here.
   ============================================================ */

:root {
  /* Brand anchors */
  --bow-navy:      #001B74;
  --bow-forest:    #144835;
  --bow-cream:     #F1EDE4;

  /* Rainbow palette (subset used as semantic) */
  --bow-emerald:   #00C072;
  --bow-green:     #31B700;
  --bow-teal:      #00BBDE;
  --bow-sky:       #0090E2;
  --bow-violet:    #8345BA;
  --bow-magenta:   #C04CAE;
  --bow-amber:     #FFB92A;
  --bow-orange:    #DE7C00;
  --bow-red:       #EE263E;
  --bow-yellow:    #FDDB32;
  --bow-lime:      #98D801;
  --bow-lilac:     #C7B2EA;
  --bow-mint:      #D0E0C9;
  --bow-sky-pale:  #ABCAF6;

  /* Semantic surfaces (light theme — default) */
  --bg:            #F1EDE4;
  --bg-elev:       #FFFFFF;
  --bg-elev-2:     #FCFAF5;
  --bg-muted:      #EAE3D3;
  --bg-overlay:    rgba(0, 27, 116, 0.04);

  /* Ink */
  --fg:            #001B74;
  --fg-2:          #2E3A6B;
  --fg-3:          #6A7090;
  --fg-on-dark:    #F1EDE4;
  --fg-on-dark-2:  #C7B2EA;

  /* Accent (tweakable: emerald default; alts via [data-accent]) */
  --accent:        #00C072;
  --accent-strong: #009E5C;
  --accent-soft:   #D0E0C9;
  --accent-tint:   rgba(0, 192, 114, 0.08);

  /* Status semantic */
  --success:       #00C072;
  --warning:       #FFB92A;
  --danger:        #EE263E;
  --info:          #0090E2;

  /* Lines */
  --line:          rgba(0, 27, 116, 0.10);
  --line-strong:   rgba(0, 27, 116, 0.20);
  --line-faint:    rgba(0, 27, 116, 0.05);
  --line-on-dark:  rgba(241, 237, 228, 0.14);

  /* Typography stacks */
  --font-display: 'Chillax', 'Outfit', system-ui, sans-serif;
  --font-body:    'DM Sans', 'Outfit', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-xs:   11px;
  --fs-sm:   13px;
  --fs-base: 15px;
  --fs-md:   17px;
  --fs-lg:   20px;
  --fs-xl:   26px;
  --fs-2xl:  34px;
  --fs-3xl:  46px;
  --fs-4xl:  62px;

  /* Spacing — density tweakable via --density */
  --density: 1;
  --sp-1:  calc(4px  * var(--density));
  --sp-2:  calc(8px  * var(--density));
  --sp-3:  calc(12px * var(--density));
  --sp-4:  calc(16px * var(--density));
  --sp-5:  calc(24px * var(--density));
  --sp-6:  calc(32px * var(--density));
  --sp-7:  calc(48px * var(--density));
  --sp-8:  calc(64px * var(--density));

  /* Radii */
  --r-xs:  6px;
  --r-sm:  10px;
  --r-md:  16px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* Shadows — navy-tinted */
  --shadow-1: 0 1px 2px rgba(0,27,116,0.04), 0 1px 1px rgba(0,27,116,0.03);
  --shadow-2: 0 4px 14px rgba(0,27,116,0.06), 0 2px 4px rgba(0,27,116,0.04);
  --shadow-3: 0 12px 32px rgba(0,27,116,0.08), 0 4px 8px rgba(0,27,116,0.04);
  --shadow-4: 0 24px 60px rgba(0,27,116,0.12), 0 8px 16px rgba(0,27,116,0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 192, 114, 0.28);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* Shell metrics */
  --sidebar-w:    264px;
  --sidebar-w-c:  76px;
  --topbar-h:     64px;
  --tabbar-h:     72px;

  /* Brand asset path (uses existing logo at project root) */
  --bow-logo-icon: url('/logo-bow.png');
}

/* Accent variants — switch via <html data-accent="sky|solar|magenta"> */
[data-accent="sky"] {
  --accent:        #0090E2;
  --accent-strong: #006FB0;
  --accent-soft:   #ABCAF6;
  --accent-tint:   rgba(0, 144, 226, 0.08);
  --shadow-focus:  0 0 0 3px rgba(0, 144, 226, 0.28);
}
[data-accent="solar"] {
  --accent:        #FFB92A;
  --accent-strong: #DE7C00;
  --accent-soft:   #FDDB32;
  --accent-tint:   rgba(255, 185, 42, 0.10);
  --shadow-focus:  0 0 0 3px rgba(255, 185, 42, 0.32);
}
[data-accent="magenta"] {
  --accent:        #C04CAE;
  --accent-strong: #8345BA;
  --accent-soft:   #C7B2EA;
  --accent-tint:   rgba(192, 76, 174, 0.10);
  --shadow-focus:  0 0 0 3px rgba(192, 76, 174, 0.28);
}

/* Dark theme */
[data-theme="dark"] {
  --bg:            #0A1450;
  --bg-elev:       #122062;
  --bg-elev-2:     #1A2A7A;
  --bg-muted:      #0C1858;
  --bg-overlay:    rgba(241, 237, 228, 0.03);
  --fg:            #F1EDE4;
  --fg-2:          #C7B2EA;
  --fg-3:          #8A95C9;
  --line:          rgba(241, 237, 228, 0.10);
  --line-strong:   rgba(241, 237, 228, 0.22);
  --line-faint:    rgba(241, 237, 228, 0.05);
  --accent-tint:   rgba(0, 192, 114, 0.14);
  --accent-soft:   rgba(0, 192, 114, 0.20);
  --shadow-1: 0 1px 2px rgba(0,0,0,0.20);
  --shadow-2: 0 4px 14px rgba(0,0,0,0.30), 0 2px 4px rgba(0,0,0,0.20);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.40), 0 4px 8px rgba(0,0,0,0.20);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.55), 0 8px 16px rgba(0,0,0,0.30);
}

/* Density variants — switch via <html data-density="compact|regular|spacious"> */
[data-density="compact"]  { --density: 0.85; }
[data-density="spacious"] { --density: 1.20; }

/* Type helpers (opt-in) */
.bow-display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; }
.bow-metric  { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bow-mono    { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.bow-eyebrow {
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-3);
}

/* Scrollbar utility */
.bow-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.bow-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 999px;
  border: 2px solid transparent; background-clip: padding-box;
}
.bow-scroll::-webkit-scrollbar-thumb:hover { background: var(--fg-3); border: 2px solid transparent; background-clip: padding-box; }
.bow-scroll::-webkit-scrollbar-track { background: transparent; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--r-sm); }