/* Virani Brand System v1.1 — generated from brand/tokens.json. Do not edit by hand. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  color-scheme: dark light;

  /* ink ramp */
  --ink-950: oklch(0.115 0.007 250);
  --ink-900: oklch(0.145 0.008 250);
  --ink-800: oklch(0.185 0.009 250);
  --ink-700: oklch(0.225 0.010 250);
  --ink-600: oklch(0.290 0.011 250);
  --ink-500: oklch(0.370 0.012 250);
  --ink-400: oklch(0.520 0.012 250);
  --ink-300: oklch(0.700 0.011 250);
  --ink-200: oklch(0.840 0.008 250);
  --ink-100: oklch(0.930 0.006 250);
  --ink-000: oklch(0.985 0.003 250);

  /* signal */
  --cyan: oklch(0.82 0.17 190);
  --cyan-dim: oklch(0.62 0.13 190);
  --cyan-hover: oklch(0.88 0.15 190);
  --positive: oklch(0.75 0.16 150);
  --negative: oklch(0.66 0.19 25);

  /* per-app mark — set --mark in the app root, e.g. body { --mark: var(--mark-cfo); } */
  --mark-house: oklch(0.72 0.14 195);
  --mark-cfo: oklch(0.58 0.17 150);
  --mark-packs: oklch(0.60 0.15 65);
  --mark-grows: oklch(0.55 0.22 300);
  --mark-reflects: oklch(0.56 0.20 350);
  /* reserved slots — assign to the next three apps */
  --mark-slot06: oklch(0.53 0.20 25);   /* deep rust */
  --mark-slot07: oklch(0.56 0.15 105);  /* deep olive */
  --mark-slot08: oklch(0.55 0.16 240);  /* deep sapphire */
  --mark: var(--mark-house);

  /* secondary palette — categories, chart series, tags. Use in numbered order. */
  --c01-ember: oklch(0.68 0.18 15);
  --c02-amber: oklch(0.70 0.16 45);
  --c03-ochre: oklch(0.72 0.15 75);
  --c04-citron: oklch(0.74 0.16 105);
  --c05-moss: oklch(0.70 0.16 135);
  --c06-jade: oklch(0.70 0.14 165);
  --c07-teal: oklch(0.70 0.12 195);
  --c08-azure: oklch(0.66 0.13 225);
  --c09-indigo: oklch(0.62 0.17 255);
  --c10-violet: oklch(0.60 0.21 285);
  --c11-magenta: oklch(0.62 0.22 315);
  --c12-rose: oklch(0.64 0.20 345);

  /* semantic — dark is the default, not the option */
  --bg: var(--ink-950);
  --surface: var(--ink-800);
  --surface-raised: var(--ink-700);
  --border: var(--ink-600);
  --border-strong: var(--ink-500);
  --text: var(--ink-100);
  --text-strong: var(--ink-000);
  --text-muted: var(--ink-300);
  --text-faint: var(--ink-400);
  --accent: var(--cyan);
  --accent-hover: var(--cyan-hover);
  --on-accent: var(--ink-900);
  --scrim: oklch(0.115 0.007 250 / 0.72);

  /* type */
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;

  --figure-size: 48px;   --figure-line: 52px;
  --display-size: 34px;  --display-line: 40px;
  --title1-size: 28px;   --title1-line: 34px;
  --title2-size: 22px;   --title2-line: 28px;
  --headline-size: 17px; --headline-line: 22px;
  --body-size: 16px;     --body-line: 24px;
  --subhead-size: 15px;  --subhead-line: 20px;
  --footnote-size: 13px; --footnote-line: 18px;
  --label-size: 11px;    --label-line: 14px;
  --data-size: 15px;     --data-line: 20px;

  /* space */
  --space-xs: 2px;  --space-sm: 4px;  --space-md: 8px;  --space-12: 12px;
  --space-lg: 16px; --space-gutter: 20px; --space-xl: 24px;
  --space-32: 32px; --space-48: 48px; --space-64: 64px;

  /* radius — up one step from v1.0; glass needs a softer corner */
  --radius-input: 8px; --radius-button: 12px; --radius-card: 18px;
  --radius-sheet: 26px; --radius-pill: 999px;

  /* glass — regular is the default; never mix regular and clear in one view */
  --glass-fill: linear-gradient(oklch(0.985 0.003 250 / 0.075), oklch(0.985 0.003 250 / 0.028));
  --glass-blur: blur(28px) saturate(155%);
  --glass-edge: oklch(0.985 0.003 250 / 0.10);
  --glass-highlight: inset 0 1px 0 oklch(0.985 0.003 250 / 0.11);
  --glass-shadow: 0 14px 36px oklch(0.115 0.007 250 / 0.45);

  --glass-clear-fill: linear-gradient(oklch(0.985 0.003 250 / 0.035), oklch(0.985 0.003 250 / 0.012));
  --glass-clear-blur: blur(12px) saturate(130%);
  --glass-clear-edge: oklch(0.985 0.003 250 / 0.07);
  --glass-clear-scrim: oklch(0.115 0.007 250 / 0.42);

  --glass-flat-fill: oklch(0.985 0.003 250 / 0.045);
  --glass-flat-edge: oklch(0.985 0.003 250 / 0.08);

  --glass-overlay-fill: linear-gradient(oklch(0.985 0.003 250 / 0.10), oklch(0.985 0.003 250 / 0.04));
  --glass-overlay-blur: blur(40px) saturate(165%);
  --glass-overlay-edge: oklch(0.985 0.003 250 / 0.14);
  --glass-overlay-highlight: inset 0 1px 0 oklch(0.985 0.003 250 / 0.16);
  --glass-overlay-shadow: 0 26px 60px oklch(0.115 0.007 250 / 0.65);

  /* backdrop — diagonal ribbon, split lobes. One field per screen, static.
     Assets: brand/backdrops/backdrop-<app>.svg */
  --backdrop-canvas: var(--ink-950);
  --backdrop-crest: oklch(0.92 0.11 220);

  /* elevation */
  --shadow-overlay: var(--glass-overlay-shadow);

  /* motion */
  --dur-quick: 120ms; --dur-base: 200ms; --dur-emphasis: 280ms;
  --ease-enter: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* controls */
  --hit-target: 44px;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;

  /* layout */
  --web-gutter: 40px; --web-max: 1120px;
}

/* light mode is derived, never redesigned */
@media (prefers-color-scheme: light) {
  :root {
    --bg: var(--ink-000);
    --surface: #ffffff;
    --surface-raised: var(--ink-000);
    --border: var(--ink-200);
    --border-strong: var(--ink-300);
    --text: var(--ink-900);
    --text-strong: var(--ink-950);
    --text-muted: var(--ink-400);
    --accent: var(--cyan-dim);
    --accent-hover: var(--cyan);
    --on-accent: var(--ink-000);
    --scrim: oklch(0.145 0.008 250 / 0.4);
    --mark-house: oklch(0.58 0.14 195);
    --mark-cfo: oklch(0.50 0.17 150);
    --mark-packs: oklch(0.52 0.15 65);
    --mark-grows: oklch(0.48 0.22 300);
    --mark-reflects: oklch(0.49 0.20 350);
    --mark-slot06: oklch(0.46 0.20 25);
    --mark-slot07: oklch(0.48 0.15 105);
    --mark-slot08: oklch(0.47 0.16 240);
    --c01-ember: oklch(0.50 0.18 15);
    --c02-amber: oklch(0.52 0.16 45);
    --c03-ochre: oklch(0.54 0.15 75);
    --c04-citron: oklch(0.56 0.16 105);
    --c05-moss: oklch(0.52 0.16 135);
    --c06-jade: oklch(0.52 0.14 165);
    --c07-teal: oklch(0.52 0.12 195);
    --c08-azure: oklch(0.48 0.13 225);
    --c09-indigo: oklch(0.46 0.17 255);
    --c10-violet: oklch(0.44 0.21 285);
    --c11-magenta: oklch(0.46 0.22 315);
    --c12-rose: oklch(0.48 0.20 345);
    --positive: oklch(0.52 0.16 150);
    --negative: oklch(0.52 0.19 25);
  }
}

/* base */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--body-size);
  line-height: var(--body-line);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* glass — one layer deep, never nested */
.glass {
  background: var(--glass-fill);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}
.glass-overlay {
  background: var(--glass-overlay-fill);
  backdrop-filter: var(--glass-overlay-blur);
  -webkit-backdrop-filter: var(--glass-overlay-blur);
  border: 1px solid var(--glass-overlay-edge);
  border-radius: var(--radius-sheet);
  box-shadow: var(--glass-overlay-highlight), var(--glass-overlay-shadow);
}
.glass-flat {
  background: var(--glass-flat-fill);
  border: 1px solid var(--glass-flat-edge);
  border-radius: var(--radius-card);
}
.glass :is(.glass, .glass-overlay) { background: var(--glass-flat-fill); backdrop-filter: none; box-shadow: none; }

/* fixed, static backdrop layer; content scrolls over it */
.backdrop {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--backdrop-canvas);
}
.backdrop > :is(svg, img) { width: 100%; height: 100%; display: block; object-fit: cover; }

@supports not (backdrop-filter: blur(1px)) {
  .glass, .glass-overlay { background: var(--ink-800); border-color: var(--ink-600); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass-overlay { background: var(--ink-800); backdrop-filter: none; -webkit-backdrop-filter: none; border-color: var(--ink-600); }
}

/* numbers a system measured */
.data, .figure { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.figure { font-size: var(--figure-size); line-height: var(--figure-line); letter-spacing: -0.03em; color: var(--text-strong); }
.label {
  font-family: var(--font-mono); font-size: var(--label-size); line-height: var(--label-line);
  font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: var(--dur-quick) !important;
    transition-property: opacity, background-color, color, border-color !important;
  }
}