/* bivo design tokens — generated from the bivo Design canvas (All app screens + Brand book).
   Light is the default. Dark applies with [data-theme="dark"] on <html>, or automatically
   via prefers-color-scheme when data-theme="auto" or no data-theme is set. */

@font-face { font-family: 'Bowlby One'; src: url('../fonts/BowlbyOne-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('../fonts/FamiljenGrotesk-Variable.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Familjen Grotesk'; src: url('../fonts/FamiljenGrotesk-Italic-Variable.ttf') format('truetype'); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/IBMPlexMono-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

/* .theme-light keeps a block light inside dark mode (the white plan card on
   the Join screen's cobalt panel). */
:root,
.theme-light {
  /* Brand constants (same in both themes) */
  --brand-cobalt: #2340FF;
  --brand-cobalt-dark: #1730C9;
  --brand-cobalt-darker: #0F2196;
  --brand-periwinkle: #8C9BFF;
  --brand-ice: #DCE3FF;
  --brand-tomato: #FF4A1C;
  --brand-ink: #141014;
  --brand-white: #FFFFFF;
  --brand-night: #0E0F1A;

  /* Fonts */
  --font-display: 'Bowlby One', Impact, sans-serif;
  --font-sans: 'Familjen Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Type sizes */
  --fs-display: 44px;
  --fs-display-phone: 36px;
  --fs-number-xl: 44px;
  --fs-number-lg: 38px;
  --fs-number-md: 30px;
  --fs-number-sm: 24px;
  --fs-title-lg: 28px;
  --fs-title: 26px;
  --fs-title-phone: 18px;
  --fs-section: 18px;
  --fs-card-title: 19px;
  --fs-row-title: 15px;
  --fs-body: 15px;
  --fs-body-sm: 14px;
  --fs-meta: 13px;
  --fs-caption: 12px;
  --fs-tab: 11px;

  /* Radii */
  --radius-xs: 5px;
  --radius-icon-tile: 10px;
  --radius-icon-button: 11px;
  --radius-input: 10px;
  --radius-select: 12px;
  --radius-nav-item: 12px;
  --radius-alert: 16px;
  --radius-tile: 18px;
  --radius-card: 20px;
  --radius-card-lg: 22px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  /* Semantic colours — light */
  color-scheme: light;
  --bg: #F6F7FB;
  --sidebar: #FFFFFF;
  --surface: #FFFFFF;
  --raised: #F6F7FB;
  --line: #E3E6F0;
  --line-soft: #EEF0F5;
  --text: #141014;
  --text-muted: #4B4F63;
  --text-faint: #6B7086;
  --accent: #2340FF;
  --primary: #2340FF;
  --primary-hover: #1730C9;
  --primary-pressed: #0F2196;
  --on-primary: #FFFFFF;
  --on-primary-muted: #DCE3FF;
  --wordmark: #2340FF;
  --icon-tile: #EEF1FF;
  --icon-tile-fg: #2340FF;
  --track: #E3E6F0;
  --empty: #F6F7FB;
  --selected: #2340FF;
  --tab-active-bg: #DCE3FF;
  --tab-active-fg: #2340FF;
  --focus: #2340FF;
  --pos-bg: #DDF3E4;
  --pos-fg: #13693A;
  --info-bg: #DCE3FF;
  --info-fg: #1A2FBF;
  --warn-bg: #FFF1C7;
  --warn-fg: #6B4A00;
  --alert-bg: #FFE1D9;
  --alert-fg: #9A1F05;
  --done-bg: #EEF0F5;
  --done-fg: #2B2F3D;
  --shadow-popover: 0 18px 48px rgba(20,16,20,0.14);
  --shadow-menu: 0 2px 12px rgba(20,16,20,0.12);
  --shadow-sheet: 0 12px 32px rgba(20,16,20,0.18);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E0F1A;
  --sidebar: #121423;
  --surface: #171A2B;
  --raised: #20243A;
  --line: #2C3150;
  --line-soft: #232741;
  --text: #F2F3F8;
  --text-muted: #A3A8C3;
  --text-faint: #8389A6;
  --accent: #8C9BFF;
  --primary: #2340FF;
  --primary-hover: #3A55FF;
  --primary-pressed: #1730C9;
  --on-primary: #FFFFFF;
  --on-primary-muted: #DCE3FF;
  --wordmark: #FFFFFF;
  --icon-tile: #20243A;
  --icon-tile-fg: #A3A8C3;
  --track: #2C3150;
  --empty: #141726;
  --selected: #8C9BFF;
  --tab-active-bg: #1C2350;
  --tab-active-fg: #A9B6FF;
  --focus: #8C9BFF;
  --pos-bg: #12301F;
  --pos-fg: #6FD69A;
  --info-bg: #1C2350;
  --info-fg: #A9B6FF;
  --warn-bg: #3A2D07;
  --warn-fg: #FFD166;
  --alert-bg: #3D140B;
  --alert-fg: #FF8A70;
  --done-bg: #23263A;
  --done-fg: #C3C7DA;
  --shadow-popover: 0 18px 48px rgba(0,0,0,0.5);
  --shadow-menu: 0 2px 12px rgba(0,0,0,0.4);
  --shadow-sheet: 0 12px 32px rgba(0,0,0,0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]),
  :root[data-theme="auto"] {
    color-scheme: dark;
    --bg: #0E0F1A;
    --sidebar: #121423;
    --surface: #171A2B;
    --raised: #20243A;
    --line: #2C3150;
    --line-soft: #232741;
    --text: #F2F3F8;
    --text-muted: #A3A8C3;
    --text-faint: #8389A6;
    --accent: #8C9BFF;
    --primary: #2340FF;
    --primary-hover: #3A55FF;
    --primary-pressed: #1730C9;
    --on-primary: #FFFFFF;
    --on-primary-muted: #DCE3FF;
    --wordmark: #FFFFFF;
    --icon-tile: #20243A;
    --icon-tile-fg: #A3A8C3;
    --track: #2C3150;
    --empty: #141726;
    --selected: #8C9BFF;
    --tab-active-bg: #1C2350;
    --tab-active-fg: #A9B6FF;
    --focus: #8C9BFF;
    --pos-bg: #12301F;
    --pos-fg: #6FD69A;
    --info-bg: #1C2350;
    --info-fg: #A9B6FF;
    --warn-bg: #3A2D07;
    --warn-fg: #FFD166;
    --alert-bg: #3D140B;
    --alert-fg: #FF8A70;
    --done-bg: #23263A;
    --done-fg: #C3C7DA;
    --shadow-popover: 0 18px 48px rgba(0,0,0,0.5);
    --shadow-menu: 0 2px 12px rgba(0,0,0,0.4);
    --shadow-sheet: 0 12px 32px rgba(0,0,0,0.5);
  }
}

/* Base */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: var(--fs-body); line-height: 1.45; }
.tabular, [data-money] { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }