/*
 * Brainbase shared UI-token contract (color, type, radius, spacing, rail).
 * Common OSS UI parts and compatible hosts read these token names. The values
 * below remain this repository's current token defaults; they are not the
 * Brainbase brand palette and do not require every host to adopt one theme.
 * For the organization Web app, the effective visual source is
 * brainbase-organization/apps/web/public/styles.css (final :root layer and
 * outcome workspace overrides). The brand palette is documented separately
 * in brainbase-organization/docs/design/brainbase-brand-palette.md.
 * Navy actions, mint surfaces, and Noto Sans JP form the standard theme.
 * Status colors retain their semantic meaning; hosts can still override tokens.
 */
:root {
  /* Shared motion curves and dismissal durations. */
  --bb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --bb-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); /* On-screen movement/position swaps only, not enter/exit. */
  --bb-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --bb-ease-drawer-in: ease-out;
  --bb-duration-drawer-in: 180ms;
  --bb-duration-drawer-out: 150ms;
  --bb-duration-toast-out: 200ms;
  --bb-color-ink: #202939;
  --bb-color-muted: #6b7280;
  /* Small secondary text on tinted surfaces needs a slightly darker mix. */
  --bb-color-muted-on-surface: color-mix(in srgb, var(--bb-color-muted) 92%, var(--bb-color-ink));
  --bb-color-quiet: #6b7280;
  --bb-color-border: #dce4e7;
  --bb-color-border-strong: #dce4e7;
  --bb-color-control-border: #dce4e7;
  --bb-color-paper: #ffffff;
  --bb-color-canvas: #f6f8fa;
  --bb-color-panel: #ffffff;
  --bb-color-surface: #f1f5f4;
  --bb-color-header-start: #ffffff;
  --bb-color-header-end: #f6f8fa;
  --bb-color-eyebrow: #24324b;
  --bb-color-accent: #24324b;
  --bb-color-accent-soft: #eaf6f3;
  --bb-color-accent-strong: #24324b;
  /* Retained token name for existing consumers; standard action is navy. */
  --bb-color-brand-indigo: #24324b;
  --bb-color-action: #24324b;
  --bb-color-action-hover: #3b485e;
  --bb-color-action-text: #ffffff;
  --bb-color-focus: #24324b;
  --bb-color-project-ink: #202939;
  --bb-color-project-muted: #6b7280;
  --bb-color-project-border: #dce4e7;
  --bb-color-project-border-strong: #dce4e7;
  --bb-color-project-accent: #24324b;
  --bb-color-project-accent-strong: #24324b;
  --bb-color-success: #18794e;
  --bb-color-success-soft: #e4f5eb;
  --bb-color-warning: #8a631d;
  --bb-color-warning-soft: #fff0c7;
  --bb-color-danger: #d92335;
  --bb-color-danger-soft: #fde9eb;
  --bb-color-rail: #ffffff;
  --bb-color-rail-border: #dce4e7;
  --bb-color-rail-text: #202939;
  --bb-color-rail-muted: #6b7280;
  --bb-color-rail-hover: #f1f5f4;
  --bb-color-rail-active: #eaf6f3;
  --bb-color-rail-strong: #202939;
  --bb-color-overlay: rgb(32 33 36 / 40%);
  --bb-color-notice-border: #ffffff20;
  --bb-color-notice-danger: #e29494;
  --bb-color-notice-warning: #d9a441;
  --bb-color-notice-background: linear-gradient(110deg,rgb(13 25 46 / 88%),rgb(36 50 75 / 72%));
  --bb-color-notice-text: #ffffff;
  --bb-color-notice-danger-symbol-border: #e2949470;
  --bb-color-notice-danger-text: #f2bbbb;
  --bb-color-notice-warning-text: #f4d68a;
  --bb-color-notice-warning-symbol-border: #d9a44180;
  --bb-color-notice-control-border: #ffffff45;
  --bb-color-inline-error: #9b3d3d;
  --bb-color-record-missing: #80601c;
  --bb-color-drawer-overlay: rgb(13 25 46 / 6%);
  --bb-color-drawer-overlay-clear: rgb(13 25 46 / 0%);
  --bb-shadow-drawer: -18px 0 48px rgb(13 25 46 / 10%);
  --bb-shadow-popover: 0 8px 28px rgb(13 25 46 / 14%);
  --bb-color-dialog-overlay: #0d192e66;
  --bb-color-scrollbar-rgb: 36,50,75;
  --bb-color-scrollbar-dark-rgb: 203,212,225;
  --bb-shadow-help: 0 6px 24px #0d192e20;
  --bb-font-help: Georgia,serif;
  --bb-shadow: 0 16px 42px rgb(32 33 36 / 10%);
  --bb-font-sans: "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;
  --bb-font-weight-body: 400;
  --bb-font-weight-medium: 500;
  --bb-color-mint: #6fc4b5;
  /* Approved compact Inbox presentation; scoped by the opt-in cards layout. */
  --bb-color-review: #d97706;
  --bb-knowledge-type-decision: var(--bb-color-action);
  --bb-knowledge-type-knowledge: var(--bb-color-success);
  --bb-knowledge-type-fact: var(--bb-color-mint-strong);
  --bb-knowledge-type-principle: var(--bb-color-warning);
  --bb-knowledge-type-procedure: color-mix(in srgb, var(--bb-color-action) 70%, var(--bb-color-mint) 30%);
  --bb-knowledge-type-term: color-mix(in srgb, var(--bb-color-action) 60%, var(--bb-color-danger) 40%);
  --bb-knowledge-type-policy: color-mix(in srgb, var(--bb-color-success) 70%, var(--bb-color-action) 30%);
  --bb-inbox-approval-stripe: var(--bb-color-review);
  --bb-inbox-task-stripe: #2563eb;
  --bb-inbox-border-subtle: #ebf0f2;
  --bb-inbox-tab-hover: rgb(255 255 255 / 50%);
  --bb-inbox-card-hover-border: #c4d0d5;
  --bb-inbox-meta-label: var(--bb-color-muted);
  --bb-inbox-badge-border: #bce4dc;
  --bb-inbox-urgent-ink: #b91c1c;
  --bb-inbox-urgent-surface: #fef2f2;
  --bb-inbox-urgent-border: #fecaca;
  --bb-inbox-context-surface: #edf1f7;
  --bb-inbox-card-shadow: 0 1px 2px rgb(15 23 42 / 4%);
  --bb-inbox-card-hover-shadow: 0 4px 12px rgb(15 23 42 / 7%), 0 1px 3px rgb(15 23 42 / 5%);
  --bb-inbox-action-shadow: 0 1px 2px rgb(36 50 75 / 20%);
  --bb-color-mint-strong: #4fa999;
  --bb-color-interaction-hover: #eaf6f3;
  --bb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --bb-radius-sm: 7px;
  --bb-radius-md: 14px;
  --bb-radius-lg: 16px;
  --bb-space-1: 4px;
  --bb-space-2: 8px;
  --bb-space-3: 12px;
  --bb-space-4: 16px;
  --bb-space-5: 24px;
  --bb-space-6: 32px;
  /* Shared search, segmented tabs and anchored-filter presentation. */
  --bb-list-control-height: 36px;
  --bb-list-search-width: 240px;
  --bb-list-search-gap: 10px;
  --bb-list-control-radius: 8px;
  --bb-filter-width: 280px;
  --bb-filter-radius: 12px;
  --bb-filter-enter-duration: 240ms;
  --bb-filter-exit-duration: 180ms;
  --bb-filter-enter-distance: -10px;
  --bb-filter-exit-distance: -8px;
  --bb-filter-enter-ease: cubic-bezier(.2, .8, .2, 1);
  --bb-segmented-height: 36px;
  --bb-segmented-padding: 3px;
  --bb-segmented-radius: 8px;
  --bb-segmented-tab-radius: 6px;
  --bb-segmented-surface: #e8edf0;
  --bb-segmented-shadow: 0 1px 2px rgb(15 23 42 / 8%);
  /* Additive tokens for opt-in compact list controls. */
  --bb-control-compact-height: 32px;
  --bb-toolbar-height: 44px;
  --bb-toolbar-clear-width: 28px;
  --bb-toolbar-query-width: 220px;
  --bb-toolbar-popover-width: 360px;
  --bb-toolbar-icon-size: 16px;
  --bb-toolbar-font-size: 13px;
  --bb-toolbar-caret-x: -6px;
  --bb-toolbar-caret-y: -3px;
  --bb-radius-menu: 4px;
  --bb-color-filter-selected: var(--bb-color-accent-soft);
  /* Explicitly opted-in tab strips. */
  --bb-tab-height: 44px;
  --bb-tab-font-size: 13px;
  --bb-tab-line-height: 20px;
  --bb-tab-font-weight: 500;
  --bb-tab-indicator-size: 2px;
  --bb-tab-indicator-duration: 260ms;
  --bb-tab-indicator-ease: cubic-bezier(.2, .8, .2, 1);
  --bb-tab-count-size: 20px;
  --bb-tab-count-font-size: 12px;
  /* Opt-in search band: dimensions and interaction surfaces. */
  --bb-search-band-query-width: 180px;
  --bb-search-band-placeholder: #9b9ba3;
  --bb-search-band-selected: var(--bb-color-interaction-hover, #e5f8e1);
  --bb-search-band-icon-width: 24px;
  --bb-search-band-icon-stroke: 1.5;
  --bb-search-band-icon-selected-stroke: 2;
  --bb-search-band-chevron-width: 10px;
  --bb-search-band-chevron-height: 6px;
  --bb-search-band-chevron-stroke: 1.2;
  --bb-page-title-font-size: 20px;
  --bb-page-title-line-height: 28px;
  --bb-page-title-font-weight: 600;
  --bb-page-header-padding-top: 0px;
  --bb-page-header-padding-bottom: 0px;
  --bb-page-header-height: 52px;
  --bb-search-band-header-height: var(--bb-page-header-height);
  --bb-search-band-scope-padding: 13px;
  --bb-search-band-scope-viewport-reserve: 192px;
  --bb-search-band-scope-popup-width: 260px;
  --bb-search-band-project-icon-size: 18px;
  --bb-control-small-height: 28px;
  --bb-create-background: #24324b;
  --bb-create-hover: var(--bb-color-action-hover);
  --bb-radius-pill: 999px;

  /* Additive neutral compositions; existing palette aliases retain their values. */
  --bb-color-slate: #475569;
  --bb-color-line-soft: var(--bb-inbox-border-subtle);
  --bb-color-placeholder: #9aa3af;
  --bb-composed-chip-hover: rgb(36 50 75 / .1);
  --bb-shadow-card-row-hover: 0 8px 18px -10px rgb(36 50 75 / .45);
  --bb-shadow-card-preview: 0 8px 18px -12px rgb(36 50 75 / .45);
  --bb-row-move-duration: 320ms;
  --bb-row-move-ease: cubic-bezier(.2,.8,.2,1);
  --bb-shadow-compact-dropdown: 0 0 0 1px rgb(27 36 51 / .08), 0 12px 28px rgb(27 36 51 / .18);
  --bb-shadow-control-panel: 0 0 0 1px rgb(27 36 51 / .08), 0 20px 44px -12px rgb(27 36 51 / .28);
  --bb-input-frame-width: 600px;
  --bb-control-panel-width: 372px;
  --bb-control-panel-duration: 160ms;
  --bb-compact-dropdown-duration: 140ms;
  --bb-compact-dropdown-offset: -6px;
  --bb-compact-dropdown-scale: .98;
  --bb-header-tab-color-duration: 200ms;
  --bb-header-tab-duration: 300ms;
  --bb-header-tab-ease: cubic-bezier(.3,1.4,.5,1);
  --bb-input-frame-duration: 220ms;
  --bb-input-frame-ease: cubic-bezier(.2,.7,.2,1);
  --bb-shadow-input-frame: -12px 0 40px rgb(36 50 75 / .12);
  --bb-color-input-frame-overlay: rgb(32 41 57 / .18);
}