/* AUTO-GENERATED by Birko.DesignTokens from tokens.json. DO NOT EDIT.
   Change a value in tokens.json, then: dotnet run --project Birko.DesignTokens -- generate
   A hand-edit here is silently deleted by the next generate — that has happened twice, and both
   times the lost edit was a real fix (see Birko.DesignTokens/CLAUDE.md). */

:root {
  /* ── Colors ── */
  --b-color-primary: #2563eb;
  --b-color-primary-hover: #1d4ed8;
  --b-color-primary-light: #dbeafe;
  --b-color-primary-text: #235edf;
  --b-color-secondary: #64748b;
  --b-color-secondary-hover: #475569;

  --b-color-success: #16a34a;
  --b-color-success-light: #dcfce7;
  --b-color-success-text: #11803a;
  --b-color-warning: #d97706;
  --b-color-warning-light: #fef3c7;
  --b-color-warning-text: #a65b05;
  --b-rating-color: var(--b-color-warning);  /* b-rating fill; a theme whose warning colour is under 3:1 overrides it (TASK-608) */
  --b-color-danger: #dc2626;
  /* Danger as TEXT, kept separate from the danger used for surfaces/borders/buttons. A red that reads well
     as a button fill is often too low-contrast as small text on the page background, and darkening the one
     token would recolour every danger affordance. Defaults to --b-color-danger (custom-property
     substitution is lazy, so a theme that overrides only --b-color-danger gets its own red here too);
     themes override it where the measured contrast falls below WCAG AA 4.5:1. Used by `.field .error`
     and `.required-mark`. */
  --b-color-danger-text: #ca2323;
  --b-color-danger-hover: #b91c1c;
  --b-color-danger-light: #fee2e2;
  --b-color-info: #0891b2;
  --b-color-info-light: #cffafe;
  --b-color-info-text: #077893;

  /* ── Status alpha (semi-transparent tints for backgrounds/borders) ── */
  --b-color-danger-alpha-bg: rgba(220, 38, 38, 0.08);
  --b-color-danger-alpha-border: rgba(220, 38, 38, 0.3);
  --b-color-success-alpha-bg: rgba(22, 163, 74, 0.08);
  --b-color-success-alpha-border: rgba(22, 163, 74, 0.3);
  --b-color-warning-alpha-bg: rgba(217, 119, 6, 0.08);
  --b-color-warning-alpha-border: rgba(217, 119, 6, 0.3);
  --b-color-info-alpha-bg: rgba(8, 145, 178, 0.08);
  --b-color-info-alpha-border: rgba(8, 145, 178, 0.3);

  /* ── Overlay (neutral semi-transparent for tints, dividers, hover states).
        Themes flip these to light/white on dark surfaces. ── */
  --b-overlay-subtle: rgba(0, 0, 0, 0.06);
  --b-overlay-light: rgba(0, 0, 0, 0.08);
  --b-overlay-medium: rgba(0, 0, 0, 0.2);

  /* ── Surfaces ── */
  --b-bg: #ffffff;
  --b-bg-secondary: #f8fafc;
  --b-bg-tertiary: #f1f5f9;
  --b-bg-elevated: #ffffff;

  /* ── Data table / hoverable rows ── */
  --b-table-header-bg: var(--b-bg);          /* <th> band (b-table + b-data-table) */
  --b-table-header-text: var(--b-text-secondary);
  --b-table-header-text-hover: var(--b-text); /* sortable <th> on hover */
  --b-row-hover-bg: var(--b-bg-tertiary);    /* hoverable table rows / list items */

  /* ── Card header band (override per instance for an accent header) ── */
  --b-card-header-bg: transparent;
  --b-card-header-text: var(--b-text);

  /* ── Tooltip ── */
  --b-tooltip-bg: #1e293b;
  --b-tooltip-text: #e2e8f0;
  --b-tooltip-border: #334155;

  /* ── Text ── */
  --b-text: #0f172a;
  --b-text-secondary: #475569;
  /* Muted text floor: 4.76:1 on --b-bg, 4.55:1 on --b-bg-secondary. #94a3b8 measured 2.56 / 2.45 (TASK-562). */
  --b-text-muted: #607086;
  --b-text-inverse: #ffffff;
  /* Text on a --b-color-primary fill (b-button primary, b-pagination active page). A theme whose primary
     is too light for white text overrides it rather than darkening primary, which is also a text colour. */
  --b-text-on-primary: var(--b-text-inverse);
  --b-text-on-success: #0f172a;
  --b-text-on-warning: #0f172a;
  --b-text-on-danger: #ffffff;
  --b-text-on-info: #0f172a;

  /* ── Borders (px — stay crisp) ── */
  --b-border: #e2e8f0;
  --b-border-hover: #cbd5e1;
  --b-border-focus: var(--b-color-primary);
  --b-border-width: 1px;
  --b-border-width-thick: 2px;

  /* ── Border radius (rem — scales with font size) ── */
  --b-radius-sm: 0.25rem;   /* 4px */
  --b-radius: 0.375rem;     /* 6px */
  --b-radius-lg: 0.625rem;  /* 10px */
  --b-radius-xl: 1rem;      /* 16px */
  --b-radius-full: 9999px;

  /* ── Spacing (rem — scales with font size) ── */
  --b-space-2xs: 0.125rem;  /* 2px */
  --b-space-xs: 0.25rem;    /* 4px */
  --b-space-sm: 0.5rem;     /* 8px */
  --b-space-md: 0.75rem;    /* 12px */
  --b-space-lg: 1rem;       /* 16px */
  --b-space-xl: 1.5rem;     /* 24px */
  --b-space-2xl: 2rem;      /* 32px */
  --b-space-3xl: 3rem;      /* 48px */

  /* ── Typography (rem — scales with font size) ── */
  --b-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --b-font-heading: var(--b-font);  /* title / heading family — defaults to body font */
  --b-font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --b-text-xs: 0.6875rem;   /* 11px */
  --b-text-2xs: 0.625rem;   /* 10px */
  --b-text-sm: 0.8125rem;   /* 13px */
  --b-text-base: 0.875rem;  /* 14px */
  --b-text-lg: 1rem;        /* 16px */
  --b-text-xl: 1.25rem;     /* 20px */
  --b-text-2xl: 1.5rem;     /* 24px */
  --b-text-3xl: 1.875rem;   /* 30px */
  --b-text-4xl: 2.5rem;     /* 40px — hero / display numbers */
  --b-line-height: 1.5;
  --b-line-height-tight: 1.4;
  --b-letter-spacing-caps: 0.03125rem; /* 0.5px */
  --b-font-weight-normal: 400;
  --b-font-weight-medium: 500;
  --b-font-weight-semibold: 600;
  --b-font-weight-bold: 700;

  /* ── Icons (rem — scales with font size) ── */
  --b-icon-sm: 0.875rem;    /* 14px */
  --b-icon-base: 1rem;      /* 16px */
  --b-icon-lg: 1.25rem;     /* 20px */
  --b-icon-xl: 2.5rem;      /* 40px */
  --b-icon-2xl: 3rem;       /* 48px — decorative / empty-state icons */

  /* ── Shadows (px — fixed depth regardless of font size) ── */
  --b-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --b-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --b-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --b-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --b-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* ── Focus rings (px — fixed ring size for precision) ── */
  --b-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.15);
  --b-focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.15);

  /* ── Opacity ── */
  --b-disabled-opacity: 0.5;
  --b-muted-opacity: 0.4;

  /* ── Backdrop ── */
  --b-backdrop-bg: rgba(0, 0, 0, 0.4);
  --b-backdrop-bg-light: rgba(0, 0, 0, 0.15);
  --b-backdrop-overlay: rgba(0, 0, 0, 0.06);

  /* ── Motion: durations (ms — composable with easing tokens below) ── */
  --b-duration-instant: 75ms;   /* press feedback, taps */
  --b-duration-fast: 150ms;     /* hover, focus, small toggles */
  --b-duration-base: 250ms;     /* default UI transitions */
  --b-duration-slow: 400ms;     /* drawers, modals, large reveals */

  /* ── Motion: easing curves ── */
  --b-ease: cubic-bezier(0.4, 0, 0.2, 1);          /* standard — most transitions */
  --b-ease-out: cubic-bezier(0, 0, 0.2, 1);        /* entering elements (decelerate) */
  --b-ease-in: cubic-bezier(0.4, 0, 1, 1);         /* exiting elements (accelerate) */
  --b-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* playful overshoot — chips, badges */

  /* ── Transitions (back-compat shorthands; prefer duration+easing tokens) ── */
  --b-transition: var(--b-duration-fast) var(--b-ease);
  --b-transition-slow: var(--b-duration-slow) var(--b-ease);

  /* ── Animation speeds ── */
  --b-animation-speed: 0.6s;      /* spinner, tree loading */
  --b-animation-slow: 1.5s;       /* skeleton pulse, table loading */
  --b-animation-progress: 1.4s;   /* progress indeterminate, typing bounce */

  /* ── Z-index ── */
  --b-z-sticky: 200;
  --b-z-dropdown: 220;            /* above sticky bars (ribbon/header) so menus overlay them */
  --b-z-drawer-backdrop: 250;
  --b-z-drawer: 260;
  --b-z-modal-backdrop: 300;
  --b-z-modal: 400;
  --b-z-toast: 500;

  /* ── Modal / Drawer / Dialog widths (rem — scales with font size) ── */
  --b-modal-width-sm: 23.75rem;  /* 380px */
  --b-modal-width: 32.5rem;      /* 520px */
  --b-modal-width-lg: 45rem;     /* 720px */
  --b-modal-width-xl: 60rem;     /* 960px */
  --b-modal-width-xxl: 80rem;    /* 1280px */
  --b-modal-full-inset: 2rem;    /* size="full" gutter — viewport minus this on all four sides */
  --b-drawer-width-sm: 22.5rem;  /* 360px */
  --b-drawer-width: 30rem;       /* 480px */
  --b-drawer-width-lg: 40rem;    /* 640px */
  --b-drawer-width-xl: 53.75rem; /* 860px */
  --b-drawer-width-xxl: 72.5rem; /* 1160px */

  /* ── Spinner (rem — scales with font size) ── */
  --b-spinner-size-sm: 1rem;     /* 16px */
  --b-spinner-size: 1.5rem;      /* 24px */
  --b-spinner-size-lg: 2.5rem;   /* 40px */
  --b-spinner-speed: 0.7s;

  /* ── Toast (rem — scales with font size) ── */
  --b-toast-offset: var(--b-space-lg);
  --b-toast-min-width: 17.5rem;  /* 280px */
  --b-toast-max-width: 26.25rem; /* 420px */

  /* ── Pagination (rem — scales with font size) ── */
  --b-page-btn-size: 2rem;       /* 32px */

  /* ── Shell layout (rem — scales with font size) ── */
  --b-header-height: 3rem;            /* 48px */
  --b-status-bar-height: 1.75rem;     /* 28px */
  --b-ribbon-tab-height: 2.75rem;     /* 44px */
  --b-ribbon-panel-height: 8rem;      /* 128px */
  --b-ribbon-group-gap: 1.5rem;       /* 24px — between groups */
  --b-ribbon-item-gap: 0.25rem;       /* 4px — between items in a group */
  --b-ribbon-icon-large: 2rem;        /* 32px — Large variant, icon above label */
  --b-ribbon-icon-small: 1rem;        /* 16px — Medium + Small variants */
  --b-ribbon-chunk-width: 3.5rem;     /* 56px — collapsed group's Popup button */

  /* ── Split panel (rem — scales with font size) ── */
  /* Gap between the sticky detail column and the top of the scrolling pane. Also its bottom
     inset — the card is capped at the pane height minus this twice. */
  --b-split-detail-sticky-top: 0.75rem;

  /* ── Sidebar (rem — scales with font size) ── */
  --b-sidebar-width: 15rem;      /* 240px */
  --b-sidebar-collapsed-width: 3.5rem; /* 56px */

  /* ── Form controls — interactive knobs / glyphs that always need white on a
        colored active state (checkbox check, switch/range thumb). Not theme-
        flipped because the surface they sit on is already a colored brand
        token. Override per-component if a dark thumb is desired. ── */
  --b-input-thumb-bg: #ffffff;

  /* ── Form-control font size. Defaults to the base body size so inputs match
        labels/buttons/b-select on desktop. iOS Safari auto-zooms into a focused
        control whose text is < 16px, so the formControl sheet bumps this to 16px
        under @media (pointer: coarse); no need to inflate the desktop size here. ── */
  --b-input-font-size: var(--b-text-base, 0.875rem);

  /* ── Unified form-control minimum height (rem — scales with font size).
        Applied to <input>/<select>/<textarea> via formControlSheet, to
        `.combo-container` via comboControlSheet, and to b-tag-input's
        container, so every form chrome (plain, searchable, multi-select,
        tag-input) has the same vertical footprint. Default ≈ 38px matches
        the natural height of an input padded with --b-space-sm × --b-space-md
        at --b-text-base font size. Use `size="sm"` / `size="lg"` on the host
        component to switch to the compact / comfortable variant. ── */
  --b-control-min-height-sm: 1.75rem;  /* 28px — dense grids, toolbars */
  --b-control-min-height: 2.375rem;    /* 38px — default */
  --b-control-min-height-lg: 2.75rem;  /* 44px — touch targets */

  /* ── Popover / picker / dropdown widths (rem — tunable in one place) ── */
  --b-date-picker-width: 17rem;       /* 272px */
  --b-time-picker-width: 11rem;       /* 176px */
  --b-tooltip-max-width: 16rem;       /* 256px */
  --b-dropdown-min-width: 10rem;      /* 160px */
  --b-kanban-col-min-width: 16rem;    /* 256px */
  --b-kanban-col-max-width: 22rem;    /* 352px */
  --b-dropzone-icon-size: 3rem;       /* 48px */
  --b-file-thumb-size: 5rem;          /* 80px */
  --b-filter-chip-width: 12rem;       /* 192px */
  --b-filter-chip-width-lg: 16rem;    /* 256px */
  --b-filter-chip-width-xl: 24rem;    /* 384px */
  --b-app-brand-max-width: 8rem;      /* 128px */
  --b-app-user-max-width: 12rem;      /* 192px */
}

/* ── Alternate themes ──────────────────────────────────────────────────────────
   The base/light tokens above (`:root`) are the only ones shipped here. Every
   alternate theme lives in its own file under `css/themes/` (`dark.css`,
   `neon.css`, `finstat.css`) so a project links/bundles ONLY the ones it wants:

     <link rel="stylesheet" href="css/tokens.css" />          (required base)
     <link rel="stylesheet" href="css/themes/finstat.css" />  (opt-in)

   Then register the matching switcher entry in your shell bootstrap:
     import { registerThemes, BUILTIN_THEMES } from 'birko-web-shell';
     registerThemes([BUILTIN_THEMES.finstat]);

   To author a project-private theme, drop a `[data-theme="my-brand"]` block in
   your app's own CSS and `registerTheme({ id: 'my-brand', label: '…' })`. ── */

/* ── Reduced motion (accessibility) ───────────────────────────────────────────
   When the OS requests reduced motion, collapse all motion-token durations to a
   near-instant value so every component using --b-duration-* / --b-transition
   stops animating without each one needing its own media query. Light-DOM
   (page chrome) and host-level styles inherit these custom-property overrides
   through the Shadow DOM boundary, since inherited CSS variables cross it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --b-duration-instant: 0.01ms;
    --b-duration-fast: 0.01ms;
    --b-duration-base: 0.01ms;
    --b-duration-slow: 0.01ms;
    --b-transition: 0.01ms linear;
    --b-transition-slow: 0.01ms linear;
    --b-animation-speed: 0.01ms;
    --b-animation-slow: 0.01ms;
    --b-animation-progress: 0.01ms;
  }
}