/*
 * Baresha Design System — tokens
 * Primitive values describe the palette/scale. Components consume semantic tokens.
 * Theme activation follows the existing html.dark-mode / data-theme contract.
 */
:root,
html[data-theme="light"] {
  color-scheme: light;

  /* Primitive colors */
  --bn-color-neutral-0: #ffffff;
  --bn-color-neutral-25: #fcfcfd;
  --bn-color-neutral-50: #f8f9fc;
  --bn-color-neutral-100: #f1f3f7;
  --bn-color-neutral-150: #e8ecf4;
  --bn-color-neutral-200: #dfe4ed;
  --bn-color-neutral-300: #cbd2df;
  --bn-color-neutral-400: #98a2b3;
  --bn-color-neutral-500: #667085;
  --bn-color-neutral-600: #475467;
  --bn-color-neutral-700: #344054;
  --bn-color-neutral-800: #1d2939;
  --bn-color-neutral-900: #101828;
  --bn-color-neutral-950: #0b0f17;

  --bn-color-brand-50: #fff1f0;
  --bn-color-brand-100: #ffe1de;
  --bn-color-brand-200: #ffc7c2;
  --bn-color-brand-300: #ff9f97;
  --bn-color-brand-400: #ff6b60;
  --bn-color-brand-500: #ed3023;
  --bn-color-brand-600: #d4281c;
  --bn-color-brand-700: #b42318;
  --bn-color-brand-800: #912018;
  --bn-color-brand-900: #781e18;

  --bn-color-success-50: #ecfdf3;
  --bn-color-success-100: #d1fadf;
  --bn-color-success-200: #a6f4c5;
  --bn-color-success-500: #12b76a;
  --bn-color-success-600: #039855;
  --bn-color-success-700: #027a48;
  --bn-color-success-800: #05603a;

  --bn-color-warning-50: #fffaeb;
  --bn-color-warning-100: #fef0c7;
  --bn-color-warning-200: #fedf89;
  --bn-color-warning-500: #f79009;
  --bn-color-warning-600: #dc6803;
  --bn-color-warning-700: #b54708;
  --bn-color-warning-800: #93370d;

  --bn-color-danger-50: #fef3f2;
  --bn-color-danger-100: #fee4e2;
  --bn-color-danger-200: #fecdca;
  --bn-color-danger-500: #f04438;
  --bn-color-danger-600: #d92d20;
  --bn-color-danger-700: #b42318;
  --bn-color-danger-800: #912018;

  --bn-color-info-50: #eff8ff;
  --bn-color-info-100: #d1e9ff;
  --bn-color-info-200: #b2ddff;
  --bn-color-info-500: #2e90fa;
  --bn-color-info-600: #1570ef;
  --bn-color-info-700: #175cd3;
  --bn-color-info-800: #1849a9;

  /* Spacing: 4px base rhythm */
  --bn-space-0: 0;
  --bn-space-0-5: 0.125rem;
  --bn-space-1: 0.25rem;
  --bn-space-1-5: 0.375rem;
  --bn-space-2: 0.5rem;
  --bn-space-2-5: 0.625rem;
  --bn-space-3: 0.75rem;
  --bn-space-4: 1rem;
  --bn-space-5: 1.25rem;
  --bn-space-6: 1.5rem;
  --bn-space-8: 2rem;
  --bn-space-10: 2.5rem;
  --bn-space-12: 3rem;
  --bn-space-16: 4rem;
  --bn-space-20: 5rem;
  --bn-space-24: 6rem;

  /* Typography */
  --bn-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bn-font-family-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --bn-font-weight-regular: 400;
  --bn-font-weight-medium: 500;
  --bn-font-weight-semibold: 600;
  --bn-font-weight-bold: 700;
  --bn-font-size-xs: 0.75rem;
  --bn-font-size-sm: 0.8125rem;
  --bn-font-size-md: 0.875rem;
  --bn-font-size-lg: 1rem;
  --bn-font-size-xl: 1.125rem;
  --bn-font-size-2xl: 1.375rem;
  --bn-font-size-3xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --bn-font-size-4xl: clamp(1.875rem, 1.55rem + 1.25vw, 2.5rem);
  --bn-line-height-tight: 1.2;
  --bn-line-height-snug: 1.35;
  --bn-line-height-normal: 1.5;
  --bn-line-height-relaxed: 1.65;
  --bn-letter-spacing-tight: -0.02em;
  --bn-letter-spacing-normal: 0;
  --bn-letter-spacing-wide: 0.04em;

  /* Shape and elevation */
  --bn-radius-sm: 0.375rem;
  --bn-radius-md: 0.625rem;
  --bn-radius-lg: 0.875rem;
  --bn-radius-xl: 1.125rem;
  --bn-radius-pill: 999rem;
  --bn-shadow-xs: 0 1px 2px rgb(16 24 40 / 0.04);
  --bn-shadow-sm: 0 1px 3px rgb(16 24 40 / 0.08), 0 1px 2px rgb(16 24 40 / 0.04);
  --bn-shadow-md: 0 4px 10px rgb(16 24 40 / 0.08), 0 2px 4px rgb(16 24 40 / 0.04);
  --bn-shadow-lg: 0 12px 28px rgb(16 24 40 / 0.12), 0 4px 8px rgb(16 24 40 / 0.06);
  --bn-shadow-overlay: 0 24px 64px rgb(16 24 40 / 0.2), 0 8px 20px rgb(16 24 40 / 0.1);

  /* Motion */
  --bn-duration-instant: 80ms;
  --bn-duration-fast: 140ms;
  --bn-duration-normal: 220ms;
  --bn-duration-slow: 320ms;
  --bn-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --bn-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --bn-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* Layout and layers */
  --bn-page-max-width: 100rem;
  --bn-content-min-width: 0;
  --bn-sidebar-width: 16.75rem;
  --bn-sidebar-collapsed-width: 4.25rem;
  --bn-control-height-sm: 2rem;
  --bn-control-height-md: 2.5rem;
  --bn-control-height-lg: 3rem;
  --bn-touch-target: 2.75rem;
  --bn-z-base: 0;
  --bn-z-raised: 10;
  --bn-z-sticky: 100;
  --bn-z-topbar: 200;
  --bn-z-sidebar: 300;
  --bn-z-dropdown: 500;
  --bn-z-tooltip: 550;
  --bn-z-bottom-nav: 600;
  --bn-z-drawer: 700;
  --bn-z-modal-backdrop: 800;
  --bn-z-modal: 810;
  --bn-z-dialog: 900;
  --bn-z-toast: 1000;
  --bn-z-command: 1050;
  --bn-z-call: 1100;
  --bn-z-emergency: 1200;

  /* Semantic surfaces */
  --bn-bg-app: var(--bn-color-neutral-50);
  --bn-bg-surface: var(--bn-color-neutral-0);
  --bn-bg-surface-raised: var(--bn-color-neutral-0);
  --bn-bg-surface-muted: var(--bn-color-neutral-100);
  --bn-bg-surface-subtle: var(--bn-color-neutral-25);
  --bn-bg-overlay: rgb(11 15 23 / 0.58);
  --bn-bg-hover: var(--bn-color-neutral-100);
  --bn-bg-active: var(--bn-color-neutral-150);
  --bn-bg-selected: var(--bn-color-brand-50);

  /* Mobile surface hierarchy */
  --bn-surface-primary: var(--bn-bg-surface);
  --bn-surface-secondary: var(--bn-bg-surface-muted);
  --bn-surface-tertiary: var(--bn-bg-surface-subtle);
  --bn-surface-elevated: var(--bn-bg-surface-raised);

  /* Liquid glass materials (contextual chrome only) */
  --bn-glass-bg: rgb(255 255 255 / 0.78);
  --bn-glass-bg-strong: rgb(255 255 255 / 0.9);
  --bn-glass-bg-subtle: rgb(255 255 255 / 0.62);
  --bn-glass-border: rgb(16 24 40 / 0.08);
  --bn-glass-border-highlight: rgb(255 255 255 / 0.55);
  --bn-glass-shadow: 0 8px 28px rgb(16 24 40 / 0.1), 0 2px 8px rgb(16 24 40 / 0.04);
  --bn-glass-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.55);
  --bn-glass-blur: 18px;
  --bn-glass-blur-strong: 24px;
  --bn-glass-saturation: 1.35;
  --bn-glass-fallback: rgb(252 252 253 / 0.96);

  /* Mobile shell geometry — compact density @390px */
  --bn-mob-radius-sm: 8px;
  --bn-mob-radius-md: 12px;
  --bn-mob-radius-lg: 16px;
  --bn-mob-radius-sheet: 22px;
  --bn-mob-control-height: 44px;
  --bn-mob-control-height-sm: 42px;
  --bn-mob-tab-height: 36px;
  --bn-mob-record-padding: 12px;
  --bn-mob-topbar-height: 52px;
  --bn-mob-nav-height: 58px;
  --bn-mob-nav-inset: 10px;
  --bn-mob-page-gutter: 12px;
  --bn-mob-card-radius: var(--bn-mob-radius-md);
  --bn-mob-sheet-radius: var(--bn-mob-radius-sheet);
  --bn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Semantic text and border */
  --bn-text-primary: var(--bn-color-neutral-900);
  --bn-text-secondary: var(--bn-color-neutral-700);
  --bn-text-muted: var(--bn-color-neutral-500);
  --bn-text-disabled: var(--bn-color-neutral-400);
  --bn-text-inverse: var(--bn-color-neutral-0);
  --bn-text-link: var(--bn-color-brand-700);
  --bn-text-link-hover: var(--bn-color-brand-800);
  --bn-border-muted: var(--bn-color-neutral-150);
  --bn-border-default: var(--bn-color-neutral-200);
  --bn-border-strong: var(--bn-color-neutral-300);
  --bn-border-focus: var(--bn-color-info-600);
  --bn-focus-ring: 0 0 0 3px rgb(21 112 239 / 0.24);

  /* Semantic actions */
  /* Brand-600 is the accessible action tone (5.10:1 against white). */
  --bn-action-primary-bg: var(--bn-color-brand-600);
  --bn-action-primary-hover: var(--bn-color-brand-700);
  --bn-action-primary-active: var(--bn-color-brand-800);
  --bn-action-primary-text: var(--bn-color-neutral-0);
  --bn-action-secondary-bg: var(--bn-color-neutral-900);
  --bn-action-secondary-hover: var(--bn-color-neutral-800);
  --bn-action-secondary-active: var(--bn-color-neutral-700);
  --bn-action-secondary-text: var(--bn-color-neutral-0);
  --bn-action-neutral-bg: var(--bn-bg-surface);
  --bn-action-neutral-hover: var(--bn-bg-hover);
  --bn-action-neutral-active: var(--bn-bg-active);
  --bn-action-neutral-text: var(--bn-text-secondary);
  --bn-action-danger-bg: var(--bn-color-danger-600);
  --bn-action-danger-hover: var(--bn-color-danger-700);
  --bn-action-danger-active: var(--bn-color-danger-800);
  --bn-action-danger-text: var(--bn-color-neutral-0);

  /* Semantic statuses */
  --bn-status-neutral-bg: var(--bn-color-neutral-100);
  --bn-status-neutral-text: var(--bn-color-neutral-700);
  --bn-status-neutral-border: var(--bn-color-neutral-200);
  --bn-status-success-bg: var(--bn-color-success-50);
  --bn-status-success-text: var(--bn-color-success-800);
  --bn-status-success-border: var(--bn-color-success-200);
  --bn-status-warning-bg: var(--bn-color-warning-50);
  --bn-status-warning-text: var(--bn-color-warning-800);
  --bn-status-warning-border: var(--bn-color-warning-200);
  --bn-status-danger-bg: var(--bn-color-danger-50);
  --bn-status-danger-text: var(--bn-color-danger-800);
  --bn-status-danger-border: var(--bn-color-danger-200);
  --bn-status-info-bg: var(--bn-color-info-50);
  --bn-status-info-text: var(--bn-color-info-800);
  --bn-status-info-border: var(--bn-color-info-200);

  /* Component semantics */
  --bn-control-bg: var(--bn-bg-surface);
  --bn-control-border: var(--bn-border-default);
  --bn-control-placeholder: var(--bn-text-muted);
  --bn-table-header-bg: var(--bn-bg-surface-muted);
  --bn-table-row-bg: var(--bn-bg-surface);
  --bn-table-row-alt-bg: var(--bn-bg-surface-subtle);
  --bn-table-row-hover-bg: var(--bn-bg-hover);
  --bn-sidebar-bg: #fbfcfe;
  --bn-sidebar-surface: var(--bn-color-neutral-0);
  --bn-sidebar-text: #182230;
  --bn-sidebar-muted: var(--bn-color-neutral-500);
  --bn-sidebar-border: #e4e7ec;
  --bn-sidebar-hover: var(--bn-color-neutral-100);
  --bn-sidebar-active: var(--bn-color-brand-50);
  --bn-sidebar-active-bg: var(--bn-color-brand-50);
  --bn-sidebar-active-text: var(--bn-color-brand-700);
  --bn-sidebar-brand-soft: var(--bn-color-brand-50);
  --bn-sidebar-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 6px 18px rgb(16 24 40 / 0.07);
  --bn-sidebar-shell-shadow: 8px 0 28px rgb(16 24 40 / 0.04);
}

html.dark-mode,
html[data-theme="dark"],
body.dark-mode {
  color-scheme: dark;
  --bn-bg-app: #0b0f17;
  --bn-bg-surface: #121826;
  --bn-bg-surface-raised: #161e2e;
  --bn-bg-surface-muted: #1a2233;
  --bn-bg-surface-subtle: #0f1521;
  --bn-bg-overlay: rgb(0 0 0 / 0.72);
  --bn-bg-hover: #1e283a;
  --bn-bg-active: #253146;
  --bn-bg-selected: rgb(237 48 35 / 0.16);

  --bn-text-primary: #f2f4f7;
  --bn-text-secondary: #d0d5dd;
  --bn-text-muted: #98a2b3;
  --bn-text-disabled: #667085;
  --bn-text-inverse: #101828;
  --bn-text-link: #ff8c84;
  --bn-text-link-hover: #ffb4ae;
  --bn-border-muted: #1f2a3c;
  --bn-border-default: #2b384d;
  --bn-border-strong: #3b4a63;
  --bn-border-focus: #84caff;
  --bn-focus-ring: 0 0 0 3px rgb(132 202 255 / 0.32);

  --bn-action-primary-bg: var(--bn-color-brand-600);
  --bn-action-primary-hover: var(--bn-color-brand-700);
  --bn-action-primary-active: var(--bn-color-brand-800);
  --bn-action-primary-text: #ffffff;
  --bn-action-secondary-bg: #f2f4f7;
  --bn-action-secondary-hover: #d0d5dd;
  --bn-action-secondary-active: #98a2b3;
  --bn-action-secondary-text: #0b0f17;
  --bn-action-neutral-bg: var(--bn-bg-surface);
  --bn-action-neutral-hover: var(--bn-bg-hover);
  --bn-action-neutral-active: var(--bn-bg-active);
  --bn-action-neutral-text: var(--bn-text-secondary);
  --bn-action-danger-bg: #f04438;
  --bn-action-danger-hover: #ff5b50;
  --bn-action-danger-active: #ff746b;
  --bn-action-danger-text: #ffffff;

  --bn-status-neutral-bg: #1a2233;
  --bn-status-neutral-text: #d0d5dd;
  --bn-status-neutral-border: #344054;
  --bn-status-success-bg: rgb(18 183 106 / 0.14);
  --bn-status-success-text: #75e0a7;
  --bn-status-success-border: rgb(117 224 167 / 0.34);
  --bn-status-warning-bg: rgb(247 144 9 / 0.14);
  --bn-status-warning-text: #fec84b;
  --bn-status-warning-border: rgb(254 200 75 / 0.34);
  --bn-status-danger-bg: rgb(240 68 56 / 0.14);
  --bn-status-danger-text: #fda29b;
  --bn-status-danger-border: rgb(253 162 155 / 0.34);
  --bn-status-info-bg: rgb(46 144 250 / 0.14);
  --bn-status-info-text: #84caff;
  --bn-status-info-border: rgb(132 202 255 / 0.34);

  --bn-control-bg: #121826;
  --bn-control-border: #344054;
  --bn-control-placeholder: #98a2b3;
  --bn-table-header-bg: #1a2233;
  --bn-table-row-bg: #121826;
  --bn-table-row-alt-bg: #151d2c;
  --bn-table-row-hover-bg: #1e283a;
  --bn-sidebar-bg: #0b0f17;
  --bn-sidebar-surface: #121826;
  --bn-sidebar-text: #eef2fa;
  --bn-sidebar-muted: #93a0b8;
  --bn-sidebar-border: #243044;
  --bn-sidebar-hover: rgb(255 255 255 / 0.05);
  --bn-sidebar-active: #1a2233;
  --bn-sidebar-active-bg: #1a2233;
  --bn-sidebar-active-text: #ffffff;
  --bn-sidebar-brand-soft: rgb(237 48 35 / 0.18);
  --bn-sidebar-shadow: 0 8px 28px rgb(0 0 0 / 0.4);
  --bn-sidebar-shell-shadow: 8px 0 32px rgb(0 0 0 / 0.2);
  --bn-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.2);
  --bn-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.32), 0 1px 2px rgb(0 0 0 / 0.24);
  --bn-shadow-md: 0 4px 12px rgb(0 0 0 / 0.38), 0 2px 4px rgb(0 0 0 / 0.22);
  --bn-shadow-lg: 0 12px 32px rgb(0 0 0 / 0.48), 0 4px 8px rgb(0 0 0 / 0.28);
  --bn-shadow-overlay: 0 28px 72px rgb(0 0 0 / 0.66), 0 8px 24px rgb(0 0 0 / 0.38);

  --bn-surface-primary: var(--bn-bg-surface);
  --bn-surface-secondary: var(--bn-bg-surface-muted);
  --bn-surface-tertiary: var(--bn-bg-surface-subtle);
  --bn-surface-elevated: var(--bn-bg-surface-raised);

  --bn-glass-bg: rgb(18 24 38 / 0.72);
  --bn-glass-bg-strong: rgb(18 24 38 / 0.88);
  --bn-glass-bg-subtle: rgb(18 24 38 / 0.58);
  --bn-glass-border: rgb(255 255 255 / 0.08);
  --bn-glass-border-highlight: rgb(255 255 255 / 0.12);
  --bn-glass-shadow: 0 10px 32px rgb(0 0 0 / 0.42), 0 2px 8px rgb(0 0 0 / 0.28);
  --bn-glass-inner-highlight: inset 0 1px 0 rgb(255 255 255 / 0.08);
  --bn-glass-blur: 20px;
  --bn-glass-blur-strong: 28px;
  --bn-glass-saturation: 1.4;
  --bn-glass-fallback: rgb(18 24 38 / 0.96);
}

/* Compatibility aliases for first-generation Baresha and panel theme consumers. */
:root {
  --bn-bg: var(--bn-bg-app);
  --bn-surface: var(--bn-bg-surface);
  --bn-surface-secondary: var(--bn-bg-surface-muted);
  --bn-surface-tertiary: var(--bn-bg-active);
  --bn-border: var(--bn-border-default);
  --bn-text: var(--bn-text-primary);
  --bn-primary: var(--bn-color-neutral-900);
  --bn-primary-hover: var(--bn-color-neutral-800);
  --bn-primary-active: var(--bn-color-neutral-700);
  --bn-primary-text: var(--bn-color-neutral-0);
  --bn-brand: var(--bn-color-brand-500);
  --bn-brand-hover: var(--bn-color-brand-600);
  --bn-brand-soft: var(--bn-color-brand-50);
  --bn-brand-border: var(--bn-color-brand-200);
  --bn-success: var(--bn-status-success-text);
  --bn-success-soft: var(--bn-status-success-bg);
  --bn-success-border: var(--bn-status-success-border);
  --bn-warning: var(--bn-status-warning-text);
  --bn-warning-soft: var(--bn-status-warning-bg);
  --bn-warning-border: var(--bn-status-warning-border);
  --bn-danger: var(--bn-status-danger-text);
  --bn-danger-soft: var(--bn-status-danger-bg);
  --bn-danger-border: var(--bn-status-danger-border);
  --bn-info: var(--bn-status-info-text);
  --bn-info-soft: var(--bn-status-info-bg);
  --bn-info-border: var(--bn-status-info-border);
  --bn-radius-full: var(--bn-radius-pill);
  --bn-shadow-xl: var(--bn-shadow-overlay);
  --bn-font-sans: var(--bn-font-family-sans);
  --bn-font-mono: var(--bn-font-family-mono);
  --bn-font-size-base: var(--bn-font-size-md);
  --bn-spacing-0: var(--bn-space-0);
  --bn-spacing-1: var(--bn-space-1);
  --bn-spacing-2: var(--bn-space-2);
  --bn-spacing-3: var(--bn-space-3);
  --bn-spacing-4: var(--bn-space-4);
  --bn-spacing-5: var(--bn-space-5);
  --bn-spacing-6: var(--bn-space-6);
  --bn-spacing-8: var(--bn-space-8);
  --bn-spacing-10: var(--bn-space-10);
  --bn-spacing-12: var(--bn-space-12);
  --bn-transition-fast: var(--bn-duration-fast) var(--bn-ease-standard);
  --bn-transition-base: var(--bn-duration-normal) var(--bn-ease-standard);
  --bn-transition-slow: var(--bn-duration-slow) var(--bn-ease-standard);
  --panel-bg: var(--bn-bg-app);
  --panel-surface: var(--bn-bg-surface);
  --panel-surface-raised: var(--bn-bg-surface-raised);
  --panel-text: var(--bn-text-primary);
  --panel-muted: var(--bn-text-muted);
  --panel-border: var(--bn-border-default);
  --panel-border-strong: var(--bn-border-strong);
  --panel-accent: var(--bn-color-brand-500);
  --panel-accent-2: var(--bn-color-brand-600);
  --panel-control-bg: var(--bn-control-bg);
  --panel-control-hover: var(--bn-bg-hover);
  --panel-table-row: var(--bn-table-row-bg);
  --panel-table-row-alt: var(--bn-table-row-alt-bg);
  --panel-table-head: var(--bn-table-header-bg);
  --panel-overlay: var(--bn-bg-overlay);
  --panel-shadow: var(--bn-shadow-sm);
}

html.dark-mode,
html[data-theme="dark"],
body.dark-mode {
  --bn-primary: #f2f4f7;
  --bn-primary-hover: #d0d5dd;
  --bn-primary-active: #98a2b3;
  --bn-primary-text: #0b0f17;
  --bn-brand-hover: #ff4a3d;
}