/* Industry design tokens — the single source for every surface: the public
   landing (via website/tokens.css, a tracked copy kept identical by
   tests/websiteApp.test.js), the extension side panel and the web app.
   Derived from the "Industry" Claude Design project. Retune the theme here.

   Every color is defined once with light-dark(). The dark scheme inverts the
   tonal ramps: the ramps share one perceptual lightness scale, so step N on
   the dark ground keeps the visual weight step N had on the light ground.
   Default follows the OS; html[data-theme="light"|"dark"] forces a scheme
   (the side panel and web app expose that as the footer theme toggle). */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;700&family=Barlow+Condensed:wght@400;600&display=swap');

:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

:root {
  --color-bg: light-dark(#f2f2f3, #1d1f20);
  --color-surface: light-dark(#e9e9ea, #26282b);
  --color-text: light-dark(#1d1f20, #f2f2f3);
  --color-accent: light-dark(#5980a6, #749dc4);
  --color-accent-2: light-dark(#728fab, #7e9cb8);
  --color-divider: light-dark(
    color-mix(in srgb, #1d1f20 16%, transparent),
    color-mix(in srgb, #f2f2f3 18%, transparent)
  );

  --color-neutral-100: light-dark(#f5f5f8, #2b2b2d);
  --color-neutral-200: light-dark(#e7e7ea, #424244);
  --color-neutral-300: light-dark(#d4d4d7, #5d5d60);
  --color-neutral-400: light-dark(#b7b7ba, #7a7a7d);
  --color-neutral-500: #98989b;
  --color-neutral-600: light-dark(#7a7a7d, #b7b7ba);
  --color-neutral-700: light-dark(#5d5d60, #d4d4d7);
  --color-neutral-800: light-dark(#424244, #e7e7ea);
  --color-neutral-900: light-dark(#2b2b2d, #f5f5f8);

  --color-accent-100: light-dark(#eef6ff, #1d2d3d);
  --color-accent-200: light-dark(#d6ebff, #2c455d);
  --color-accent-300: light-dark(#b5d9fd, #416180);
  --color-accent-400: light-dark(#94bce3, #597ea3);
  --color-accent-500: #749dc4;
  --color-accent-600: light-dark(#597ea3, #94bce3);
  --color-accent-700: light-dark(#416180, #b5d9fd);
  --color-accent-800: light-dark(#2c455d, #d6ebff);
  --color-accent-900: light-dark(#1d2d3d, #eef6ff);

  --color-accent-2-100: light-dark(#eef6ff, #1f2d3a);
  --color-accent-2-200: light-dark(#d6ebff, #314457);
  --color-accent-2-300: light-dark(#bdd8f2, #486077);
  --color-accent-2-400: light-dark(#9ebbd8, #627d98);
  --color-accent-2-500: #7e9cb8;
  --color-accent-2-600: light-dark(#627d98, #9ebbd8);
  --color-accent-2-700: light-dark(#486077, #bdd8f2);
  --color-accent-2-800: light-dark(#314457, #d6ebff);
  --color-accent-2-900: light-dark(#1f2d3a, #eef6ff);

  /* Functional, not decorative: errors and destructive actions keep one
     muted red the mono steel palette cannot express. */
  --color-danger: light-dark(#8f4646, #c9a0a0);
  --color-danger-soft: light-dark(#c9a0a0, #7a4444);
  --color-danger-bg: light-dark(#f3eaea, #332525);

  /* Semantic money movement: gains and losses carry meaning, so they keep
     green/red alongside the mono steel interface chrome. */
  --color-positive: light-dark(#1e7d4e, #5cd695);
  --color-negative: light-dark(#b3423a, #f0968c);

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  /* Elevation — soft ink-tinted shadows on the light ground, deeper ambient
     darkness on the dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, light-dark(#2b2b2d, #000000) 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, light-dark(#2b2b2d, #000000) 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, light-dark(#2b2b2d, #000000) 22%, transparent);
}