/* Synced from the Sophors brand guide by scripts/sync_brand.py on 2026-10-01. Do not edit here. */

/* ---- colors.css ---- */
/* COLOR HIERARCHY — ranked, not equal. See readme.md "Color hierarchy".
   1 navy-800  DOMINANT — default brand color: logo, headers, primary text/buttons, most saturated area
   2 teal-600  SECONDARY ANCHOR, not co-equal — used with intention (service lines, secondary CTA, success, data separation)
   3 blue-500  NAVY TINT, not a standalone brand color — links, hover/focus, chart gradient steps ONLY
   4 tan-500   ACCENT ONLY — badges, callout tints, highlights. Never body text, never a large fill
   5 off-white BASE — default page background, no brand meaning
   Target ratio ~60% neutral / 25% navy / 10% teal / 5% tan+blue-tint. One saturated field per composition. */
:root{
--navy-900:#152944;
--navy-800:#1E3864;
--navy-700:#2A4A7C;
--teal-700:#0A5B47;
--teal-600:#0F6E56;
--teal-500:#1B8A6E;
--blue-500:#2E75B6;
--blue-400:#5A96CC;
--blue-100:#DCE9F5;
--tan-500:#D8C9A3;
--tan-300:#EAE1CB;
--tan-100:#F5F0E3;
--off-white:#F5F6F4;
--white:#FFFFFF;
--ink-900:#1A2430;
--ink-700:#42505F;
--ink-500:#6B7784;
--ink-300:#A6AEB6;
--ink-100:#DCE0E3;
--success:#0F6E56;
--warning:#B8863B;
--danger:#B4433A;
/* DIVERGING DATA ONLY — above/below benchmark, +/- variance, up/down. Never categorical or decorative. */
--data-positive:#1B7A36;
--data-negative:#C5221F;
--data-neutral:#DCE0E3;

--color-primary:var(--navy-800);
--color-primary-hover:var(--navy-900);
--color-secondary:var(--teal-600);
--color-secondary-hover:var(--teal-700);
--color-link:var(--blue-500);
--color-link-hover:var(--navy-800);
--color-accent:var(--tan-500);
--surface-page:var(--off-white);
--surface-card:var(--white);
--surface-sunken:var(--tan-100);
--surface-inverse:var(--navy-800);
--border-subtle:var(--ink-100);
--border-default:#C9CFD4;
--text-heading:var(--navy-900);
--text-body:var(--ink-900);/* COLOR, not a size — font sizes are --size-* in typography.css */
--text-muted:var(--ink-500);
--text-inverse:var(--off-white);
--overlay-photo:linear-gradient(135deg,rgba(30,56,100,0.80),rgba(30,56,100,0.86));/* @kind color */ /* standard photo treatment */
}

/* ---- typography.css ---- */
/* NAMING: --size-* are font SIZES. --text-* are text COLORS (see colors.css).
   Keep these families distinct — never name a size --text-*. */
:root{
--font-heading:'Barlow Condensed',Impact,sans-serif;
--font-body:'Barlow Condensed','Arial Narrow',sans-serif;/* Barlow Condensed throughout (decided 2026-09-28) */
--font-document:'Arial Narrow',Arial,sans-serif;/* Word, email, locally-opened files — official, permanent */
--font-mono:'IBM Plex Mono',ui-monospace,monospace;

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

--size-display:clamp(40px,5vw,72px);
--size-h1:40px;
--size-h2:32px;
--size-h3:24px;
--size-h4:20px;
--size-body-lg:18px;
--size-body:16px;
--size-body-sm:14px;
--size-caption:12px;
--size-stat:clamp(48px,6vw,88px);

--leading-tight:1.05;
--leading-heading:1.15;
--leading-body:1.55;
--leading-caption:1.4;

--tracking-heading:0.01em;
--tracking-caps:0.08em;
--tracking-body:0.01em;/* positive tracking offsets condensed counters at 14–18px */
}

/* ---- spacing.css ---- */
:root{
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:96px;
--space-10:128px;

--radius-sm:4px;
--radius-md:8px;
--radius-lg:12px;
--radius-pill:999px;

--shadow-sm:0 1px 2px rgba(21,41,68,0.08);
--shadow-md:0 4px 12px rgba(21,41,68,0.10);
--shadow-lg:0 12px 32px rgba(21,41,68,0.14);

--border-width:1px;
--container-max:1200px;
}

/* ---- layout.css ---- */
/* Breakpoints — 720px matches the live website's mobile-nav collapse. CSS vars can't be used in @media; use the literal values. */
:root{
--bp-sm:480px;
--bp-md:720px;
--bp-lg:1024px;
--bp-xl:1280px;
--grid-cols-mobile:4;/* @kind other */
--grid-cols-tablet:8;/* @kind other */
--grid-cols-desktop:12;/* @kind other */
--grid-gutter-mobile:16px;
--grid-gutter:24px;
--grid-margin-mobile:16px;
--grid-margin-tablet:32px;
}