/*
 * BRI design system tokens, v1.
 * Copy this file into the app unchanged and import it once, before other styles.
 * Status of each value is recorded in references/decisions.md:
 *   (palette)   Bellomy PowerPoint Palettes 2026, confirmed
 *   (logo)      taken from the official logo files, confirmed
 *   (ext)       extension derived for UI use, proposed
 *   (proposed)  not in the brand palette, proposed pending approval
 * Theme: light by default. <html data-theme="dark"> forces dark, data-theme="light" forces light,
 * and no attribute follows the operating system.
 */

:root {
  color-scheme: light;

  /* ---------- Primitives ---------- */
  --bri-white: #FFFFFF;             /* palette */
  --bri-gray-25: #FAFAFA;           /* palette */
  --bri-gray-50: #F4F4F4;           /* palette */
  --bri-gray-75: #EDEDED;           /* palette */
  --bri-gray-100: #E9E9E9;          /* palette */
  --bri-gray-125: #E5E5E5;          /* palette */
  --bri-gray-150: #D6D6D6;          /* palette */
  --bri-gray-200: #D1D1D1;          /* palette */
  --bri-gray-400: #AAAAAA;          /* palette */
  --bri-gray-500: #8A8D90;          /* ext: input borders, 3:1 on white and on dark surfaces */
  --bri-gray-600: #5C5F61;          /* palette */
  --bri-gray-700: #3B3E40;          /* palette */
  --bri-gray-950: #0F1214;          /* palette */
  --bri-ink-900: #16191C;           /* ext: dark canvas */
  --bri-ink-850: #1C1F22;           /* ext: dark surface */
  --bri-ink-800: #1E2226;           /* ext: dark sidebar hover */
  --bri-ink-750: #262A2E;           /* ext: dark hover */
  --bri-ink-700: #2C3034;           /* ext: dark border */
  --bri-ink-teal-800: #0F2F2B;      /* ext: dark AskBell tints */
  --bri-ink-teal-850: #0E2A2F;      /* ext */
  --bri-ink-amber: #3D2A06;         /* ext: dark warning background */

  --bri-green-50: #D0F4EA;          /* palette, Bellomy green column */
  --bri-green-100: #95DBC9;
  --bri-green-300: #4AAF94;
  --bri-green-500: #00A78E;         /* palette: Bellomy brand green (logo files: #00A78D) */
  --bri-green-700: #30725D;
  --bri-green-900: #174C3C;
  --bri-teal-50: #D2F7F6;           /* palette, teal column */
  --bri-teal-100: #95E7E3;
  --bri-teal-300: #31BBB1;
  --bri-teal-500: #009A99;
  --bri-teal-700: #00827B;          /* palette: action color, the brand-family teal that carries white text */
  --bri-teal-900: #00544E;
  --bri-logo-accent: #00DAB8;       /* logo: arrow color in the two-tone logo */
  --bri-blue-50: #D7E7F4;           /* palette */
  --bri-blue-100: #8DB7E2;
  --bri-blue-300: #4386C9;
  --bri-blue-500: #4D82BF;
  --bri-blue-700: #23679E;
  --bri-blue-900: #044B84;
  --bri-leaf-50: #D7F9DF;           /* palette, green column */
  --bri-leaf-100: #9AE2AB;
  --bri-leaf-300: #56BA6D;
  --bri-leaf-500: #40A858;
  --bri-leaf-700: #2A7A3B;
  --bri-leaf-900: #11541A;
  --bri-lime-500: #9FD130;          /* palette */
  --bri-lime-700: #547700;
  --bri-yellow-50: #FFEAB0;         /* palette: yellow is an accent, use sparingly */
  --bri-yellow-100: #FFD96E;
  --bri-yellow-300: #F3B42D;
  --bri-yellow-500: #F6D155;
  --bri-yellow-700: #DD9210;
  --bri-yellow-900: #BD5B0D;
  --bri-purple-300: #997CD6;        /* palette: purple is reserved for FAC, SmartLab and extra chart series */
  --bri-purple-500: #7950C1;
  --bri-purple-700: #6744B2;
  --bri-red-50: #FDECEC;            /* proposed: the palette has no red */
  --bri-red-100: #FECACA;
  --bri-red-300: #F87171;
  --bri-red-350: #FCA5A5;
  --bri-red-600: #C62828;
  --bri-red-700: #B42318;
  --bri-red-800: #9B1C1C;
  --bri-red-900: #5C1414;

  /* ---------- Typography ---------- */
  --font-sans: "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --text-xs: 11px;                  /* overlines and section labels (uppercase, 700, +0.08em) */
  --text-sm: 12px;                  /* captions, metadata, tooltips, pills */
  --text-md: 13px;                  /* helper text, compact controls */
  --text-base: 14px;                /* default UI text */
  --text-lg: 16px;                  /* subsection titles, AskBell title */
  --text-xl: 18px;                  /* section and panel titles */
  --text-2xl: 28px;                 /* page titles */
  --text-stat: 30px;                /* big numbers in stat tiles */
  --leading-tight: 1.2;
  --leading-snug: 1.3;
  --leading-caption: 1.4;           /* 12 and 13px text */
  --leading-normal: 1.43;
  --leading-relaxed: 1.5;
  --weight-regular: 400;
  --weight-bold: 700;
  --weight-black: 900;              /* product name in the sidebar lockup, AskBell label */
  --tracking-overline: 0.08em;

  /* ---------- Space, size, shape ---------- */
  --space-0-5: 2px;
  --space-1: 4px;
  --space-1-5: 6px;
  --space-2: 8px;
  --space-2-5: 10px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --size-control-xs: 28px;          /* chips, AskBell bar */
  --size-control-sm: 32px;          /* compact buttons and fields, small icon buttons */
  --size-control: 36px;             /* default buttons and fields */
  --size-row: 40px;                 /* nav rows, default icon buttons, table rows */
  --size-composer: 48px;            /* AskBell text box */
  --size-icon: 16px;
  --size-avatar: 36px;              /* sidebar user row; centers on the nav icons */
  --size-handle: 24px;              /* collapse handles on column lines */
  --size-sidebar: 256px;
  --size-sidebar-rail: 64px;
  --size-sidebar-askbell: 360px;
  --size-panel: 320px;
  --size-content-min: 600px;
  --size-dialog: 480px;
  --size-dialog-wide: 640px;
  --size-wordmark: 104px;
  --size-bmark: 19px;               /* the b inside the 104px wordmark */

  --radius-xs: 4px;                 /* tooltips, keyboard hints */
  --radius-sm: 6px;                 /* controls, nav items, chips, handles */
  --radius-md: 8px;                 /* cards, popovers, panels */
  --radius-pill: 999px;             /* status pills, scope label */
  --radius-round: 50%;              /* avatars only */
  --border-width: 1px;
  --focus-width: 2px;

  /* ---------- Motion and layering ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-sheen: 900ms;
  --ease-standard: ease;
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --z-sticky: 2;                    /* sticky table headers */
  --z-sidebar: 3;
  --z-scrim: 6;
  --z-overlay: 7;
  --z-popover: 8;
  --z-handle: 9;
  --z-dialog: 10;
  --z-tooltip: 11;

  /* ---------- Semantic colors: light ---------- */
  --color-canvas: var(--bri-gray-50);
  --color-canvas-hover: var(--bri-gray-125);
  --color-row-hover: var(--bri-gray-50);          /* table and list rows on surfaces; stays lighter than the row lines */
  --color-surface: var(--bri-white);
  --color-surface-raised: var(--bri-gray-25);
  --color-field: var(--bri-white);
  --color-text: var(--bri-gray-950);
  --color-text-secondary: var(--bri-gray-700);
  --color-text-muted: var(--bri-gray-600);
  --color-text-brand: var(--bri-teal-900);
  --color-text-on-action: var(--bri-white);
  --color-border: var(--bri-gray-125);
  --color-border-strong: var(--bri-gray-500);
  --color-action: var(--bri-teal-700);
  --color-action-hover: var(--bri-teal-900);
  --color-focus: var(--bri-teal-700);
  --color-selected: var(--bri-teal-700);

  --color-sidebar-bg: var(--bri-white);
  --color-sidebar-text: var(--bri-gray-700);
  --color-sidebar-muted: var(--bri-gray-600);
  --color-sidebar-hover: var(--bri-gray-50);
  --color-sidebar-current-bg: var(--bri-green-50);
  --color-sidebar-current-text: var(--bri-teal-900);
  --color-sidebar-current-bar: var(--bri-teal-700);

  --color-popover-bg: var(--bri-white);
  --color-popover-hover: var(--bri-gray-50);
  --color-tooltip-bg: var(--bri-gray-950);
  --color-tooltip-text: var(--bri-white);
  --color-scrim: rgba(15, 18, 20, .45);
  --color-tile-bg: var(--bri-green-50);
  --color-tile-icon: var(--bri-teal-900);
  --color-tile-neutral-bg: var(--bri-gray-75);
  --color-tile-neutral-icon: var(--bri-gray-700);
  --color-pill-bg: var(--bri-gray-75);
  --color-pill-text: var(--bri-gray-700);

  --color-success-bg: var(--bri-leaf-50);
  --color-success-text: var(--bri-leaf-900);
  --color-success-icon: var(--bri-leaf-700);
  --color-warning-bg: var(--bri-yellow-50);
  --color-warning-text: var(--bri-gray-700);
  --color-warning-icon: var(--bri-yellow-900);
  --color-info-bg: var(--bri-blue-50);
  --color-info-text: var(--bri-blue-900);
  --color-info-icon: var(--bri-blue-700);
  --color-danger-bg: var(--bri-red-50);            /* proposed */
  --color-danger-text: var(--bri-red-800);         /* proposed */
  --color-danger: var(--bri-red-700);              /* proposed: error text on surfaces; buttons use --color-danger-fill */
  --color-danger-icon: var(--bri-red-600);         /* proposed: error icons and field borders */
  --color-danger-fill: var(--bri-red-700);         /* proposed: destructive buttons, both themes */
  --color-danger-fill-hover: var(--bri-red-800);   /* proposed */
  --color-text-on-danger: var(--bri-white);

  /* AskBell */
  --color-ai: var(--bri-teal-700);                 /* sparkle and AskBell accents; the logo accent is too faint on white */
  --color-ai-badge-bg: var(--bri-teal-50);
  --color-ai-badge-text: var(--bri-teal-900);
  --color-askbar-start: var(--bri-teal-900);
  --color-askbar-end: var(--bri-teal-700);
  --color-askbar-bg: linear-gradient(90deg, var(--color-askbar-start), var(--color-askbar-end));
  --color-askbar-text: var(--bri-white);
  --color-askbar-icon: var(--bri-logo-accent);
  --color-askbar-edge: var(--bri-teal-900);
  --color-askbar-glow: var(--bri-logo-accent);
  --color-askbar-kbd-bg: var(--bri-teal-900);
  --color-askbar-kbd-text: var(--bri-white);
  --color-askbar-sheen: rgba(255, 255, 255, .35);
  --color-askbar-focus: var(--bri-white);
  --color-compose-start: var(--bri-teal-50);
  --color-compose-end: var(--bri-green-50);
  --color-compose-bg: linear-gradient(90deg, var(--color-compose-start), var(--color-compose-end));
  --color-compose-edge: var(--bri-teal-100);
  --color-drop-bg: rgba(210, 247, 246, .94);

  /* Charts (proposed): categorical series in this order; direct-label every series */
  --color-chart-1: var(--bri-teal-700);
  --color-chart-2: var(--bri-blue-700);
  --color-chart-3: var(--bri-yellow-900);
  --color-chart-4: var(--bri-lime-700);
  --color-chart-5: var(--bri-purple-700);
  --color-chart-6: var(--bri-gray-600);

  --shadow-popover: 0 8px 24px rgba(15, 18, 20, .14), 0 1px 3px rgba(15, 18, 20, .10);
  --shadow-handle: 0 1px 3px rgba(15, 18, 20, .18);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-canvas: var(--bri-ink-900);
    --color-canvas-hover: var(--bri-ink-750);
    --color-row-hover: var(--bri-ink-750);
    --color-surface: var(--bri-ink-850);
    --color-surface-raised: var(--bri-ink-850);
    --color-field: var(--bri-ink-900);
    --color-text: var(--bri-gray-100);
    --color-text-secondary: var(--bri-gray-200);
    --color-text-muted: var(--bri-gray-400);
    --color-text-brand: var(--bri-teal-300);
    --color-text-on-action: var(--bri-white);
    --color-border: var(--bri-ink-700);
    --color-border-strong: var(--bri-gray-500);
    --color-action: var(--bri-teal-700);
    --color-action-hover: var(--bri-teal-900);
    --color-focus: var(--bri-teal-300);
    --color-selected: var(--bri-teal-300);
    --color-sidebar-bg: var(--bri-gray-950);
    --color-sidebar-text: var(--bri-gray-200);
    --color-sidebar-muted: var(--bri-gray-400);
    --color-sidebar-hover: var(--bri-ink-800);
    --color-sidebar-current-bg: var(--bri-teal-900);
    --color-sidebar-current-text: var(--bri-white);
    --color-sidebar-current-bar: var(--bri-logo-accent);
    --color-popover-bg: var(--bri-ink-850);
    --color-popover-hover: var(--bri-ink-750);
    --color-tooltip-bg: var(--bri-gray-100);
    --color-tooltip-text: var(--bri-gray-950);
    --color-scrim: rgba(0, 0, 0, .6);
    --color-tile-bg: var(--bri-teal-900);
    --color-tile-icon: var(--bri-green-100);
    --color-tile-neutral-bg: var(--bri-ink-700);
    --color-tile-neutral-icon: var(--bri-gray-200);
    --color-pill-bg: var(--bri-ink-700);
    --color-pill-text: var(--bri-gray-200);
    --color-success-bg: var(--bri-leaf-900);
    --color-success-text: var(--bri-leaf-100);
    --color-success-icon: var(--bri-leaf-300);
    --color-warning-bg: var(--bri-ink-amber);
    --color-warning-text: var(--bri-yellow-100);
    --color-warning-icon: var(--bri-yellow-300);
    --color-info-bg: var(--bri-blue-900);
    --color-info-text: var(--bri-blue-50);
    --color-info-icon: var(--bri-blue-100);
    --color-danger-bg: var(--bri-red-900);
    --color-danger-text: var(--bri-red-100);
    --color-danger: var(--bri-red-350);
    --color-danger-icon: var(--bri-red-300);
    --color-ai: var(--bri-logo-accent);
    --color-ai-badge-bg: var(--bri-ink-teal-800);
    --color-ai-badge-text: var(--bri-teal-100);
    --color-askbar-start: var(--bri-green-500);
    --color-askbar-end: var(--bri-logo-accent);
    --color-askbar-text: var(--bri-gray-950);
    --color-askbar-icon: var(--bri-gray-950);
    --color-askbar-edge: var(--bri-green-500);
    --color-askbar-glow: var(--bri-teal-50);
    --color-askbar-kbd-bg: var(--bri-gray-950);
    --color-askbar-kbd-text: var(--bri-logo-accent);
    --color-askbar-sheen: rgba(255, 255, 255, .45);
    --color-askbar-focus: var(--bri-gray-950);
    --color-compose-start: var(--bri-ink-teal-800);
    --color-compose-end: var(--bri-ink-teal-850);
    --color-compose-edge: var(--bri-teal-900);
    --color-drop-bg: rgba(15, 47, 43, .95);
    --color-chart-1: var(--bri-green-500);
    --color-chart-2: var(--bri-blue-100);
    --color-chart-3: var(--bri-yellow-300);
    --color-chart-4: var(--bri-lime-500);
    --color-chart-5: var(--bri-purple-300);
    --color-chart-6: var(--bri-gray-400);
    --shadow-popover: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
    --shadow-handle: 0 1px 3px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-canvas: var(--bri-ink-900);
  --color-canvas-hover: var(--bri-ink-750);
  --color-row-hover: var(--bri-ink-750);
  --color-surface: var(--bri-ink-850);
  --color-surface-raised: var(--bri-ink-850);
  --color-field: var(--bri-ink-900);
  --color-text: var(--bri-gray-100);
  --color-text-secondary: var(--bri-gray-200);
  --color-text-muted: var(--bri-gray-400);
  --color-text-brand: var(--bri-teal-300);
  --color-text-on-action: var(--bri-white);
  --color-border: var(--bri-ink-700);
  --color-border-strong: var(--bri-gray-500);
  --color-action: var(--bri-teal-700);
  --color-action-hover: var(--bri-teal-900);
  --color-focus: var(--bri-teal-300);
  --color-selected: var(--bri-teal-300);
  --color-sidebar-bg: var(--bri-gray-950);
  --color-sidebar-text: var(--bri-gray-200);
  --color-sidebar-muted: var(--bri-gray-400);
  --color-sidebar-hover: var(--bri-ink-800);
  --color-sidebar-current-bg: var(--bri-teal-900);
  --color-sidebar-current-text: var(--bri-white);
  --color-sidebar-current-bar: var(--bri-logo-accent);
  --color-popover-bg: var(--bri-ink-850);
  --color-popover-hover: var(--bri-ink-750);
  --color-tooltip-bg: var(--bri-gray-100);
  --color-tooltip-text: var(--bri-gray-950);
  --color-scrim: rgba(0, 0, 0, .6);
  --color-tile-bg: var(--bri-teal-900);
  --color-tile-icon: var(--bri-green-100);
  --color-tile-neutral-bg: var(--bri-ink-700);
  --color-tile-neutral-icon: var(--bri-gray-200);
  --color-pill-bg: var(--bri-ink-700);
  --color-pill-text: var(--bri-gray-200);
  --color-success-bg: var(--bri-leaf-900);
  --color-success-text: var(--bri-leaf-100);
  --color-success-icon: var(--bri-leaf-300);
  --color-warning-bg: var(--bri-ink-amber);
  --color-warning-text: var(--bri-yellow-100);
  --color-warning-icon: var(--bri-yellow-300);
  --color-info-bg: var(--bri-blue-900);
  --color-info-text: var(--bri-blue-50);
  --color-info-icon: var(--bri-blue-100);
  --color-danger-bg: var(--bri-red-900);
  --color-danger-text: var(--bri-red-100);
  --color-danger: var(--bri-red-350);
  --color-danger-icon: var(--bri-red-300);
  --color-ai: var(--bri-logo-accent);
  --color-ai-badge-bg: var(--bri-ink-teal-800);
  --color-ai-badge-text: var(--bri-teal-100);
  --color-askbar-start: var(--bri-green-500);
  --color-askbar-end: var(--bri-logo-accent);
  --color-askbar-text: var(--bri-gray-950);
  --color-askbar-icon: var(--bri-gray-950);
  --color-askbar-edge: var(--bri-green-500);
  --color-askbar-glow: var(--bri-teal-50);
  --color-askbar-kbd-bg: var(--bri-gray-950);
  --color-askbar-kbd-text: var(--bri-logo-accent);
  --color-askbar-sheen: rgba(255, 255, 255, .45);
  --color-askbar-focus: var(--bri-gray-950);
  --color-compose-start: var(--bri-ink-teal-800);
  --color-compose-end: var(--bri-ink-teal-850);
  --color-compose-edge: var(--bri-teal-900);
  --color-drop-bg: rgba(15, 47, 43, .95);
  --color-chart-1: var(--bri-green-500);
  --color-chart-2: var(--bri-blue-100);
  --color-chart-3: var(--bri-yellow-300);
  --color-chart-4: var(--bri-lime-500);
  --color-chart-5: var(--bri-purple-300);
  --color-chart-6: var(--bri-gray-400);
  --shadow-popover: 0 8px 24px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04);
  --shadow-handle: 0 1px 3px rgba(0, 0, 0, .5);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 0ms; --duration-base: 0ms; --duration-sheen: 0ms; }
}