/* =========================================================================
   Allianceboard — Colors & Type
   Foundation tokens. Import this once per page:
     <link rel="stylesheet" href="/colors_and_type.css" />
   ========================================================================= */

/* -------------------------------------------------------------------------
   Typography — PP Neue Montreal is the brand display/body face.
   OTF files live in fonts/neue-montreal/. Inter is kept as the emergency
   fallback in the stack so text still resolves if the OTFs fail to load.
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-Thin.otf') format('opentype');
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-Book.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-BookItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-MediumItalic.otf') format('opentype');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-SemiBold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-SemiBold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Neue Montreal';
  src: url('/fonts/neue-montreal/PPNeueMontreal-MediumItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: 'FA5Pro';
  src: url('/fonts/FontAwesome5Pro-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}

:root {
  /* =======================================================================
     COLORS — Brand core
     ======================================================================= */

  /* Primary navy — the "alliance" blue from the wordmark */
  --ab-navy-50:  #eef3fb;
  --ab-navy-100: #d5e0f0;
  --ab-navy-200: #a7bcdf;
  --ab-navy-300: #6f8fc5;
  --ab-navy-400: #3f64a8;
  --ab-navy-500: #1e4487;    /* hover tint */
  --ab-navy-600: #0e3976;    /* ← brand primary (logo "alliance") */
  --ab-navy-700: #0b2d5e;    /* header/sidebar base */
  --ab-navy-800: #082146;
  --ab-navy-900: #05162f;

  /* Accent blue — the brighter workspace blue used in icons, tab rules, links */
  --ab-blue-50:  #ecf1fd;
  --ab-blue-100: #d3defb;
  --ab-blue-200: #a7bdf7;
  --ab-blue-300: #7a9cf3;
  --ab-blue-400: #4d7aee;
  --ab-blue-500: #3057d6;    /* ← accent / icons / primary CTA in app */
  --ab-blue-600: #2645ac;
  --ab-blue-700: #1c3383;

  /* Slate — the "board" gray from the wordmark; also body UI chrome */
  --ab-slate-50:  #f6f7f8;
  --ab-slate-100: #edeef0;
  --ab-slate-200: #d9dce0;
  --ab-slate-300: #b8bdc4;
  --ab-slate-400: #868d96;
  --ab-slate-500: #606972;   /* ← brand secondary (logo "board") */
  --ab-slate-600: #4a525a;
  --ab-slate-700: #343a41;
  --ab-slate-800: #20252a;
  --ab-slate-900: #10141a;

  /* Surface neutrals — product backgrounds */
  --ab-bg:        #f3f5f8;   /* app canvas */
  --ab-surface:   #ffffff;   /* cards, panels */
  --ab-surface-2: #fafbfc;   /* subtle zebra */
  --ab-border:    #e5e8ec;   /* 1px dividers */
  --ab-border-strong: #cfd3d9;

  /* Data palette — used in charts, pills, category tags.
     Pulled from product dashboard: teal, sky, violet, sunflower, coral. */
  --ab-data-teal:    #2dd4bf;
  --ab-data-teal-2:  #7eead8;
  --ab-data-sky:     #38bdf8;
  --ab-data-sky-2:   #bae6fd;
  --ab-data-violet:  #8b5cf6;
  --ab-data-violet-2:#d9c9fb;
  --ab-data-sun:     #fbbf24;
  --ab-data-sun-2:   #fde6b0;
  --ab-data-coral:   #f97066;
  --ab-data-coral-2: #fbc5c0;

  /* Semantic */
  --ab-success: #12b76a;
  --ab-success-bg: #d1fadf;
  --ab-warning: #f79009;
  --ab-warning-bg: #fef0c7;
  --ab-danger:  #f04438;
  --ab-danger-bg:  #fee4e2;
  --ab-info:    var(--ab-blue-500);
  --ab-info-bg: var(--ab-blue-50);

  /* Semantic role tokens — prefer these in components */
  --ab-fg:        var(--ab-slate-800);
  --ab-fg-muted:  var(--ab-slate-500);
  --ab-fg-subtle: var(--ab-slate-400);
  --ab-fg-on-navy:#ffffff;
  --ab-link:      var(--ab-blue-500);
  --ab-focus-ring: 0 0 0 3px rgba(48, 87, 214, .28);

  /* =======================================================================
     TYPE
     ======================================================================= */
  --ab-font-sans: 'PP Neue Montreal', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ab-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ab-font-icon: 'FA5Pro';

  /* Type scale — modular, ~1.2 ratio for body, looser at display sizes */
  --ab-fs-xs:   12px;   --ab-lh-xs: 1.4;
  --ab-fs-sm:   13px;   --ab-lh-sm: 1.45;
  --ab-fs-base: 15px;   --ab-lh-base: 1.55;
  --ab-fs-md:   17px;   --ab-lh-md: 1.5;
  --ab-fs-lg:   20px;   --ab-lh-lg: 1.4;
  --ab-fs-xl:   24px;   --ab-lh-xl: 1.3;
  --ab-fs-2xl:  32px;   --ab-lh-2xl: 1.2;
  --ab-fs-3xl:  44px;   --ab-lh-3xl: 1.1;
  --ab-fs-4xl:  60px;   --ab-lh-4xl: 1.05;
  --ab-fs-5xl:  84px;   --ab-lh-5xl: 1;

  --ab-weight-regular: 400;
  --ab-weight-medium:  500;
  --ab-weight-semibold:600;
  --ab-weight-bold:    700;

  --ab-tracking-tight: -0.02em;
  --ab-tracking-normal: 0;
  --ab-tracking-wide:  0.04em;
  --ab-tracking-caps:  0.08em;

  /* =======================================================================
     SHAPE / ELEVATION / SPACING
     ======================================================================= */
  --ab-radius-xs: 4px;
  --ab-radius-sm: 6px;
  --ab-radius-md: 10px;
  --ab-radius-lg: 14px;   /* default card */
  --ab-radius-xl: 20px;   /* marketing cards */
  --ab-radius-2xl: 28px;  /* hero devices */
  --ab-radius-pill: 999px;

  --ab-shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --ab-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .05);
  --ab-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, .08), 0 2px 4px -2px rgba(15, 23, 42, .05);
  --ab-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, .12), 0 4px 8px -4px rgba(15, 23, 42, .06);
  --ab-shadow-xl: 0 24px 48px -12px rgba(15, 23, 42, .18);
  --ab-shadow-inset: inset 0 1px 0 rgba(255,255,255,.6);

  --ab-space-1:  4px;
  --ab-space-2:  8px;
  --ab-space-3:  12px;
  --ab-space-4:  16px;
  --ab-space-5:  20px;
  --ab-space-6:  24px;
  --ab-space-8:  32px;
  --ab-space-10: 40px;
  --ab-space-12: 48px;
  --ab-space-16: 64px;
  --ab-space-20: 80px;
  --ab-space-24: 96px;

  /* Motion — understated. Utility transitions, no bounces. */
  --ab-ease: cubic-bezier(.2, .6, .2, 1);
  --ab-ease-out: cubic-bezier(0, 0, .2, 1);
  --ab-dur-fast: 120ms;
  --ab-dur:      200ms;
  --ab-dur-slow: 320ms;
}

/* ===========================================================================
   SEMANTIC TYPE STYLES
   Use these classes OR element selectors below.
   =========================================================================== */

html { color-scheme: light; }
body {
  font-family: var(--ab-font-sans);
  font-size: var(--ab-fs-base);
  line-height: var(--ab-lh-base);
  color: var(--ab-fg);
  background: var(--ab-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display — marketing hero */
.ab-display, h1.ab-display {
  font-family: var(--ab-font-sans);
  font-size: var(--ab-fs-5xl);
  line-height: var(--ab-lh-5xl);
  font-weight: var(--ab-weight-medium);
  letter-spacing: var(--ab-tracking-tight);
  color: var(--ab-navy-700);
  text-wrap: balance;
}

/* Page/feature titles */
.ab-h1, h1 {
  font-size: var(--ab-fs-3xl);
  line-height: var(--ab-lh-3xl);
  font-weight: var(--ab-weight-medium);
  letter-spacing: var(--ab-tracking-tight);
  color: var(--ab-navy-700);
  text-wrap: balance;
}
.ab-h2, h2 {
  font-size: var(--ab-fs-2xl);
  line-height: var(--ab-lh-2xl);
  font-weight: var(--ab-weight-medium);
  letter-spacing: var(--ab-tracking-tight);
  color: var(--ab-navy-700);
  text-wrap: balance;
}
.ab-h3, h3 {
  font-size: var(--ab-fs-xl);
  line-height: var(--ab-lh-xl);
  font-weight: var(--ab-weight-semibold);
  color: var(--ab-navy-700);
}
.ab-h4, h4 {
  font-size: var(--ab-fs-lg);
  line-height: var(--ab-lh-lg);
  font-weight: var(--ab-weight-semibold);
  color: var(--ab-slate-800);
}

.ab-eyebrow {
  font-size: var(--ab-fs-xs);
  font-weight: var(--ab-weight-semibold);
  letter-spacing: var(--ab-tracking-caps);
  text-transform: uppercase;
  color: var(--ab-blue-500);
}

.ab-lede {
  font-size: var(--ab-fs-lg);
  line-height: 1.55;
  color: var(--ab-slate-600);
  font-weight: var(--ab-weight-regular);
  text-wrap: pretty;
}

p, .ab-p {
  font-size: var(--ab-fs-base);
  line-height: var(--ab-lh-base);
  color: var(--ab-slate-700);
  text-wrap: pretty;
}

.ab-small {
  font-size: var(--ab-fs-sm);
  color: var(--ab-fg-muted);
}

.ab-caption {
  font-size: var(--ab-fs-xs);
  color: var(--ab-fg-subtle);
  letter-spacing: 0.01em;
}

.ab-mono, code, kbd, pre {
  font-family: var(--ab-font-mono);
  font-size: 0.93em;
}

.ab-link, a.ab-link {
  color: var(--ab-link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ab-dur) var(--ab-ease), color var(--ab-dur) var(--ab-ease);
}
.ab-link:hover { border-bottom-color: currentColor; }

/* focus */
*:focus-visible {
  outline: none;
  box-shadow: var(--ab-focus-ring);
  border-radius: var(--ab-radius-sm);
}