/* Bandi Monitor design tokens (CodeLab Brand Guidelines v1.0, DESIGN.md).
   Theming swaps role variables only: light by default, dark when <html data-theme="dark">,
   and automatic (prefers-color-scheme) when the attribute is absent. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("/assets/fonts/SpaceGrotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/JetBrainsMono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* Palette */
  --iris-50: #F2F4FF; --iris-100: #E5E9FF; --iris-200: #CCD2FF; --iris-300: #A7ADFF; --iris-400: #8688FE;
  --iris-500: #6E69F3; --iris-600: #5E51E9; --iris-700: #4A3CC2; --iris-800: #33278D; --iris-900: #19144C;
  --ink-0: #FBFCFE; --ink-50: #F4F5F8; --ink-100: #EAEBF0; --ink-200: #D6D7DD; --ink-300: #B6B7BE;
  --ink-400: #84858D; --ink-500: #5C5D65; --ink-600: #3B3C45; --ink-700: #1E1F25; --ink-800: #0C0D12;
  --ink-900: #030306; --ink-950: #010102;
  --cyan-500: #00ADB8; --mag-500: #DC44B5; --lime-500: #7AC400; --amber-500: #EB9600; --red-500: #E0343B;
  --lime-100: #EEF8D9; --lime-200: #DDF1B3; --lime-300: #C2E77A; --lime-400: #9FD62E; --lime-700: #4A7A00; --lime-800: #355700;

  /* Type, shape, motion */
  --font-sans: "Inter", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --r-hairline: 3px; --r-xs: 4px; --r-sm: 8px; --r-md: 10px; --r-toast: 12px; --r-lg: 14px;

  /* Roles (light) */
  --bg: var(--ink-0); --panel: #FFFFFF; --sunk: var(--ink-50); --rule: var(--ink-100); --line: var(--ink-200);
  --text: var(--ink-900); --text-2: var(--ink-500); --text-3: #6E6F77;
  --brand: var(--iris-600); --brand-hover: var(--iris-700); --brand-soft: var(--iris-50); --brand-line: var(--iris-200);
  --brand-ink: var(--iris-800); --focus: var(--iris-600); --on-brand: #FFFFFF;
  --tab-new: var(--iris-600); --tab-fav: var(--mag-500); --tab-seen: var(--cyan-500); --tab-disc: var(--ink-400); --tab-exp: var(--amber-500);
  --urgent: #C4262D; --urgent-soft: #FDECEC; --soon: #9A5E00; --soon-soft: #FFF3DC;
  --high: var(--iris-600); --high-ink: #FFFFFF; --mid: var(--iris-100); --mid-ink: var(--iris-800); --low: var(--ink-100); --low-ink: var(--ink-500);
  --sheet-line: rgba(94, 81, 233, .14);
  --stamp-rule: var(--ink-300);
  --pin-high: var(--iris-600); --pin-high-ink: #FFFFFF; --pin-mid: var(--iris-200); --pin-mid-ink: var(--iris-800);
  /* Kind of item: tenders keep the brand iris, grants and funding read lime */
  --fin: var(--lime-500); --fin-soft: var(--lime-100); --fin-line: var(--lime-300); --fin-ink: var(--lime-800);
  --fin-high: var(--lime-500); --fin-high-ink: var(--ink-900); --fin-mid: var(--lime-200); --fin-mid-ink: var(--lime-800);
  --pin-fin-high: var(--lime-500); --pin-fin-high-ink: var(--ink-900); --pin-fin-mid: var(--lime-200); --pin-fin-mid-ink: var(--lime-800);
  --shadow: 0 1px 2px rgba(15, 14, 30, .06), 0 8px 24px rgba(15, 14, 30, .08);
  --shadow-float: 0 2px 6px rgba(15, 14, 30, .08), 0 24px 60px rgba(15, 14, 30, .18);
  --scrim: rgba(1, 1, 2, .42); /* behind bottom sheets */
  --tiles: grayscale(1) contrast(.82) brightness(1.08);
  --tiles-tint: rgba(94, 81, 233, .07); --tiles-blend: multiply;
  /* Toast: the inverse bar (dark on the light theme). Accents are picked for contrast on that bar. */
  --toast-bg: var(--ink-900); --toast-fg: var(--ink-50); --toast-fg-2: rgba(244, 245, 248, .68);
  --toast-hover: rgba(255, 255, 255, .09); --toast-focus: var(--iris-400);
  --toast-info: var(--iris-400); --toast-warn: var(--amber-500); --toast-error: #FF7A7F;
  --toast-action: var(--iris-400); --toast-action-ink: var(--ink-950); --toast-action-hover: var(--iris-300);
}

:root[data-theme="dark"] {
  --bg: var(--ink-950); --panel: var(--ink-800); --sunk: #07080C; --rule: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .12);
  --text: var(--ink-50); --text-2: #A6A7B0; --text-3: #8B8C95;
  --brand: var(--iris-400); --brand-hover: var(--iris-300); --brand-soft: rgba(134, 136, 254, .12); --brand-line: rgba(134, 136, 254, .35);
  --brand-ink: var(--iris-200); --focus: var(--iris-400); --on-brand: var(--ink-950);
  --tab-disc: var(--ink-500);
  --urgent: #FF7A7F; --urgent-soft: rgba(224, 52, 59, .16); --soon: #FFC15C; --soon-soft: rgba(235, 150, 0, .14);
  --high: var(--iris-400); --high-ink: var(--ink-950); --mid: rgba(134, 136, 254, .18); --mid-ink: var(--iris-200); --low: rgba(255, 255, 255, .06); --low-ink: #A6A7B0;
  --sheet-line: rgba(134, 136, 254, .16);
  --stamp-rule: rgba(255, 255, 255, .22); --pin-high: var(--iris-400); --pin-high-ink: var(--ink-950); --pin-mid: var(--iris-700); --pin-mid-ink: #FFFFFF;
  --fin: var(--lime-400); --fin-soft: rgba(122, 196, 0, .12); --fin-line: rgba(122, 196, 0, .38); --fin-ink: var(--lime-300);
  --fin-high: var(--lime-400); --fin-high-ink: var(--ink-950); --fin-mid: rgba(122, 196, 0, .18); --fin-mid-ink: var(--lime-300);
  --pin-fin-high: var(--lime-400); --pin-fin-high-ink: var(--ink-950); --pin-fin-mid: var(--lime-700); --pin-fin-mid-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45); --shadow-float: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6);
  --scrim: rgba(0, 0, 0, .6);
  --tiles: invert(1) grayscale(1) brightness(1.4) contrast(.85);
  --tiles-tint: rgba(134, 136, 254, .10); --tiles-blend: screen;
  --toast-bg: var(--ink-50); --toast-fg: var(--ink-900); --toast-fg-2: var(--ink-500);
  --toast-hover: rgba(3, 3, 6, .06); --toast-focus: var(--iris-600);
  --toast-info: var(--iris-600); --toast-warn: #9A5E00; --toast-error: #C4262D;
  --toast-action: var(--iris-600); --toast-action-ink: #FFFFFF; --toast-action-hover: var(--iris-700);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--ink-950); --panel: var(--ink-800); --sunk: #07080C; --rule: rgba(255, 255, 255, .07); --line: rgba(255, 255, 255, .12);
    --text: var(--ink-50); --text-2: #A6A7B0; --text-3: #8B8C95;
    --brand: var(--iris-400); --brand-hover: var(--iris-300); --brand-soft: rgba(134, 136, 254, .12); --brand-line: rgba(134, 136, 254, .35);
    --brand-ink: var(--iris-200); --focus: var(--iris-400); --on-brand: var(--ink-950);
    --tab-disc: var(--ink-500);
    --urgent: #FF7A7F; --urgent-soft: rgba(224, 52, 59, .16); --soon: #FFC15C; --soon-soft: rgba(235, 150, 0, .14);
    --high: var(--iris-400); --high-ink: var(--ink-950); --mid: rgba(134, 136, 254, .18); --mid-ink: var(--iris-200); --low: rgba(255, 255, 255, .06); --low-ink: #A6A7B0;
    --sheet-line: rgba(134, 136, 254, .16);
    --stamp-rule: rgba(255, 255, 255, .22); --pin-high: var(--iris-400); --pin-high-ink: var(--ink-950); --pin-mid: var(--iris-700); --pin-mid-ink: #FFFFFF;
    --fin: var(--lime-400); --fin-soft: rgba(122, 196, 0, .12); --fin-line: rgba(122, 196, 0, .38); --fin-ink: var(--lime-300);
    --fin-high: var(--lime-400); --fin-high-ink: var(--ink-950); --fin-mid: rgba(122, 196, 0, .18); --fin-mid-ink: var(--lime-300);
    --pin-fin-high: var(--lime-400); --pin-fin-high-ink: var(--ink-950); --pin-fin-mid: var(--lime-700); --pin-fin-mid-ink: #FFFFFF;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .45); --shadow-float: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6);
    --scrim: rgba(0, 0, 0, .6);
    --tiles: invert(1) grayscale(1) brightness(1.4) contrast(.85);
    --tiles-tint: rgba(134, 136, 254, .10); --tiles-blend: screen;
    --toast-bg: var(--ink-50); --toast-fg: var(--ink-900); --toast-fg-2: var(--ink-500);
    --toast-hover: rgba(3, 3, 6, .06); --toast-focus: var(--iris-600);
    --toast-info: var(--iris-600); --toast-warn: #9A5E00; --toast-error: #C4262D;
    --toast-action: var(--iris-600); --toast-action-ink: #FFFFFF; --toast-action-hover: var(--iris-700);
  }
}