/* Mailosh design tokens: neutral greys, cobalt for actions, and four chart colors. Inter throughout.
   Light is white surfaces on a white page with hairline borders; dark is near-black with lifted cards. */

:root {
  /* Brand */
  --cobalt: #2B4BFF;
  --cobalt-hover: #1F3BE0;
  --cobalt-soft: #EDF0FF;
  --cobalt-soft-ink: #2440E6;
  --on-cobalt: #FFFFFF;
  --on-cobalt-muted: #DCE2FF;
  --yellow: #FFD23F;
  --yellow-soft: #FFF6D6;
  --yellow-ink: #6B5200;

  /* Surfaces */
  --bg: #FFFFFF;
  --sidebar: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F4F4F6;
  --surface-3: #F7F7F9;
  --raised: #FFFFFF;
  --tile: #1C1C1F;
  --on-tile: #FFFFFF;
  --ink: #111114;
  --ink-2: #2C2C31;
  --muted: #71717A;
  --subtle: #9A9AA3;
  --line: #E8E8EC;
  --line-soft: #F0F0F3;
  --grid: #E4E4E9;

  /* Charts */
  --c-green: #13C47E;
  --c-green-soft: rgba(19, 196, 126, 0.14);
  --c-blue: #2B4BFF;
  --c-blue-soft: #B9C5FF;
  --c-orange: #FF7A1A;
  --c-orange-soft: rgba(255, 122, 26, 0.14);
  --c-purple: #7C5CFF;

  /* Status */
  --success: #13C47E;
  --success-soft: #E5F8EF;
  --success-ink: #0E8A58;
  --danger: #E5484D;
  --danger-soft: #FDECEC;
  --danger-ink: #C4282D;

  /* Shape */
  --r-xs: 6px;
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 14px;
  --r-xl: 20px;
  --pill: 999px;
  --shadow: 0 1px 2px rgba(17, 17, 20, 0.04);
  --shadow-raised: 0 1px 2px rgba(17, 17, 20, 0.06), 0 4px 14px rgba(17, 17, 20, 0.06);
  --shadow-lg: 0 24px 56px rgba(17, 17, 20, 0.16);

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs: 14px;
  --fs-md: 15px;
  --fs-lg: 18px;
  --fs-xl: 24px;
  --fs-2xl: 34px;
  --fs-3xl: 48px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cobalt: #3D5CFF;
    --cobalt-hover: #5873FF;
    --cobalt-soft: #1A2148;
    --cobalt-soft-ink: #AEBBFF;
    --on-cobalt-muted: #DCE2FF;
    --yellow-soft: #3A3010;
    --yellow-ink: #FFE07A;
    --bg: #141415;
    --sidebar: #141415;
    --surface: #19191B;
    --surface-2: #222225;
    --surface-3: #1D1D20;
    --raised: #202023;
    --tile: #333338;
    --on-tile: #FFFFFF;
    --ink: #F4F4F5;
    --ink-2: #D9D9DE;
    --muted: #A1A1AA;
    --subtle: #75757E;
    --line: #2A2A2E;
    --line-soft: #232326;
    --grid: #2E2E33;
    --c-blue: #3D6BFF;
    --c-blue-soft: #1F3A8A;
    --c-green-soft: rgba(19, 196, 126, 0.16);
    --success-soft: #0F2A1F;
    --success-ink: #4ADE9B;
    --danger: #FF5A5F;
    --danger-soft: #3A1517;
    --danger-ink: #FF9A9D;
    --shadow: none;
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --cobalt: #3D5CFF;
  --cobalt-hover: #5873FF;
  --cobalt-soft: #1A2148;
  --cobalt-soft-ink: #AEBBFF;
  --on-cobalt-muted: #DCE2FF;
  --yellow-soft: #3A3010;
  --yellow-ink: #FFE07A;
  --bg: #141415;
  --sidebar: #141415;
  --surface: #19191B;
  --surface-2: #222225;
  --surface-3: #1D1D20;
  --raised: #202023;
  --tile: #333338;
  --on-tile: #FFFFFF;
  --ink: #F4F4F5;
  --ink-2: #D9D9DE;
  --muted: #A1A1AA;
  --subtle: #75757E;
  --line: #2A2A2E;
  --line-soft: #232326;
  --grid: #2E2E33;
  --c-blue: #3D6BFF;
  --c-blue-soft: #1F3A8A;
  --c-green-soft: rgba(19, 196, 126, 0.16);
  --success-soft: #0F2A1F;
  --success-ink: #4ADE9B;
  --danger: #FF5A5F;
  --danger-soft: #3A1517;
  --danger-ink: #FF9A9D;
  --shadow: none;
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}