/*
 * BrandBrine design tokens. Change brand values here only.
 *
 * FONTS: "Dunbar Low" (headings) and "Dunbar Tall" (branded buttons) are
 * licensed fonts. Until their .woff2 files are placed in /assets/fonts/ and
 * the @font-face rules below are enabled, the FALLBACK "Jost" (open licence,
 * bundled) is used. Inter (open licence, bundled) is the body font.
 */

@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/jost-latin-700-normal.woff2") format("woff2"); }

/* When the licensed files arrive, upload them and remove the comment markers:
@font-face { font-family: "Dunbar Low"; font-weight: 500 700; font-display: swap; src: url("../fonts/DunbarLow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Dunbar Tall"; font-weight: 500; font-display: swap; src: url("../fonts/DunbarTall-Medium.woff2") format("woff2"); }
*/

:root {
  /* Confirmed brand colours */
  --bb-teal: #3EB394;
  --bb-navy: #0D1B2A;
  --bb-slate: #26343A;       /* secondary dark: used sparingly (not for panels) */
  --bb-green: #7FAF9D;
  --bb-white: #FFFFFF;

  /* Navy-first surfaces (matching brandbrine.com) */
  --c-bg: var(--bb-navy);
  --c-bg-deep: #0A1724;      /* sidebar, inputs */
  --c-surface: var(--bb-navy);
  --c-line: #1E3542;         /* panel borders, dividers */
  --c-line-soft: #16293A;    /* table row dividers */
  --c-hover: rgba(62, 179, 148, 0.06);
  --c-selected: rgba(62, 179, 148, 0.12);

  /* Text */
  --c-text: var(--bb-white);
  --c-text-2: #C3CED3;       /* secondary text (≈ 11:1 on navy) */
  --c-text-3: #A9B7BD;       /* muted text (≈ 8:1 on navy) */
  --c-on-teal: var(--bb-navy);

  /* Accents and states */
  --c-accent: var(--bb-teal);
  --c-accent-hover: #52C4A5;
  --c-accent-soft: #5FD3B2;
  --c-support: var(--bb-green);
  --c-support-soft: #9CC9B8;
  --c-warning: #F2C14E;
  --c-danger: #FF9C8E;
  --c-danger-strong: #E8705F;
  --c-success: #5FD3B2;
  --c-focus: var(--bb-teal);

  /* Typography */
  --font-heading: "Dunbar Low", "Jost", "Segoe UI", system-ui, sans-serif;
  --font-button: "Dunbar Tall", "Jost", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-base: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 1.875rem;

  /* Spacing scale (4px grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

  /* Shape */
  --radius-sm: 2px;
  --radius: 4px;
  --radius-pill: 999px;
  --border: 1px solid var(--c-line);
  --border-accent: 1px solid var(--c-accent);
  --focus-ring: 0 0 0 2px var(--bb-navy), 0 0 0 4px var(--c-focus);

  /* Layout */
  --sidebar-w: 240px;
  --content-max: 1320px;
  --control-h: 2.625rem;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 140ms;
}