/* Baird Financial Services: brand tokens
 * Single source of truth for colour, type, spacing and shape across the build.
 * Import once at the app root. See brand/BRAND.md for usage rules.
 */
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Source+Sans+3:wght@400;500;600;700&display=swap");

:root {
  /* Core brand (sampled from the master logo) */
  --bf-blue: #01009B;        /* Baird Blue: wordmark + outer swirl */
  --bf-silver: #999999;      /* Baird Silver: "Financial Services" + inner swirl */
  --bf-slate: #3C3D42;       /* Slate: heading bands in the company profile */

  /* Blue scale */
  --bf-blue-50:  #EEEEF8;    /* letterhead watermark tint */
  --bf-blue-100: #D9D9F0;
  --bf-blue-200: #B3B3E1;
  --bf-blue-300: #8080CD;
  --bf-blue-400: #4D4DB9;
  --bf-blue-500: #01009B;
  --bf-blue-600: #010086;
  --bf-blue-700: #01006E;
  --bf-blue-800: #000054;
  --bf-blue-900: #00003A;

  /* Neutral scale */
  --bf-white:    #FFFFFF;
  --bf-grey-50:  #F7F7F8;
  --bf-grey-100: #EEEEEE;    /* "Mist": profile page background */
  --bf-grey-200: #E2E2E4;
  --bf-grey-300: #C8C8CC;
  --bf-grey-400: #999999;    /* = Baird Silver. Decorative only, not body text */
  --bf-grey-500: #6B6B70;    /* smallest grey allowed for text on white (5.3:1) */
  --bf-grey-700: #3C3D42;    /* = Slate */
  --bf-grey-900: #1E1E22;    /* Ink: body text */

  /* Status (functional only, never decorative) */
  --bf-success: #1F7A4D;
  --bf-success-bg: #E6F4EC;
  --bf-warning: #A15C00;
  --bf-warning-bg: #FDF1E0;
  --bf-danger:  #B42318;
  --bf-danger-bg: #FDECEA;
  --bf-info:    var(--bf-blue-500);
  --bf-info-bg: var(--bf-blue-50);

  /* Chart series, in order. Blue first, then contrast hues that sit with it */
  --bf-chart-1: #01009B;
  --bf-chart-2: #8C8C8C;
  --bf-chart-3: #2F80C4;
  --bf-chart-4: #3C3D42;
  --bf-chart-5: #7A86D6;
  --bf-chart-6: #B9BCC4;

  /* Semantic roles (use these in components, not the raw scale) */
  --bf-bg: var(--bf-white);
  --bf-bg-subtle: var(--bf-grey-50);
  --bf-bg-band: var(--bf-slate);
  --bf-surface: var(--bf-white);
  --bf-border: var(--bf-grey-200);
  --bf-text: var(--bf-grey-900);
  --bf-text-muted: var(--bf-grey-500);
  --bf-text-on-dark: var(--bf-white);
  --bf-heading: var(--bf-blue-500);
  --bf-link: var(--bf-blue-500);
  --bf-link-hover: var(--bf-blue-700);
  --bf-primary: var(--bf-blue-500);
  --bf-primary-hover: var(--bf-blue-700);
  --bf-primary-text: var(--bf-white);
  --bf-focus: #2F80C4;

  /* Typography */
  --bf-font-display: "Lora", Georgia, "Times New Roman", serif;
  --bf-font-body: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  --bf-font-mono: "Source Code Pro", ui-monospace, Menlo, monospace;

  --bf-text-xs: 0.75rem;     /* 12 */
  --bf-text-sm: 0.875rem;    /* 14 */
  --bf-text-base: 1rem;      /* 16 */
  --bf-text-lg: 1.125rem;    /* 18 */
  --bf-text-xl: 1.375rem;    /* 22 */
  --bf-text-2xl: 1.75rem;    /* 28 */
  --bf-text-3xl: 2.25rem;    /* 36 */
  --bf-text-4xl: 3rem;       /* 48 */

  --bf-leading-tight: 1.2;
  --bf-leading-normal: 1.5;
  --bf-tracking-caps: 0.06em;

  /* Spacing (4px base) */
  --bf-space-1: 4px;
  --bf-space-2: 8px;
  --bf-space-3: 12px;
  --bf-space-4: 16px;
  --bf-space-5: 24px;
  --bf-space-6: 32px;
  --bf-space-7: 48px;
  --bf-space-8: 64px;

  /* Shape and depth: restrained, professional */
  --bf-radius-sm: 4px;
  --bf-radius-md: 8px;
  --bf-radius-lg: 12px;
  --bf-radius-pill: 999px;
  --bf-shadow-sm: 0 1px 2px rgba(30, 30, 34, 0.06);
  --bf-shadow-md: 0 4px 12px rgba(30, 30, 34, 0.08);
  --bf-hairline: 1px solid var(--bf-border);
}

/* Dark theme: Baird Blue is too dark to read on dark grounds, so accents lift to blue-300 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bf-bg: #121216;
    --bf-bg-subtle: #1A1A20;
    --bf-bg-band: #000054;
    --bf-surface: #1E1E24;
    --bf-border: #2E2E36;
    --bf-text: #ECECEF;
    --bf-text-muted: #A3A3AB;
    --bf-heading: #B3B3E1;
    --bf-link: #A6A6E8;
    --bf-link-hover: #D9D9F0;
    --bf-primary: #4D4DB9;
    --bf-primary-hover: #6262C8;
  }
}
:root[data-theme="dark"] {
  --bf-bg: #121216;
  --bf-bg-subtle: #1A1A20;
  --bf-bg-band: #000054;
  --bf-surface: #1E1E24;
  --bf-border: #2E2E36;
  --bf-text: #ECECEF;
  --bf-text-muted: #A3A3AB;
  --bf-heading: #B3B3E1;
  --bf-link: #A6A6E8;
  --bf-link-hover: #D9D9F0;
  --bf-primary: #4D4DB9;
  --bf-primary-hover: #6262C8;
}