/* ============================================================================
   STERiJECT design system
   Imported verbatim from the Claude Design project (tokens/, base/) and flattened
   into one file so WordPress serves a single request instead of ten @imports.

   Hex fallbacks precede every oklch() declaration. Browsers that don't support
   relative-color syntax ignore the second declaration and keep the hex.
   ========================================================================== */

/* --- Host Grotesk (TSK Branding Guidelines p.5) --------------------------- */
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Host Grotesk";src:url("../fonts/HostGrotesk-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}

:root{
  /* --- Primary --- */
  --tsk-blue:#0072BD;
  --white:#FFFFFF;

  /* --- STERiJECT accents --- */
  --sterject-dark:#00374A;
  --sterject-light:#38CBC6;

  /* --- Supporting --- */
  --deep-blue:#003D66;

  /* --- Product accents --- */
  --tin-yellow:#FFF237;
  --lds-purple:#C9A6D2;

  /* --- Brand tints & shades (hex fallback, then oklch) --- */
  --tsk-blue-700:#005E9C;
  --tsk-blue-700:oklch(from var(--tsk-blue) calc(l - .06) c h);
  --tsk-blue-800:#004C7E;
  --tsk-blue-800:oklch(from var(--tsk-blue) calc(l - .12) c h);
  --tsk-blue-100:#D6E8F5;
  --tsk-blue-100:oklch(from var(--tsk-blue) 0.94 calc(c * .28) h);
  --tsk-blue-050:#EFF6FC;
  --tsk-blue-050:oklch(from var(--tsk-blue) 0.975 calc(c * .14) h);
  --sterject-light-600:#2FB3AF;
  --sterject-light-600:oklch(from var(--sterject-light) calc(l - .08) c h);
  --sterject-light-100:#D2F2F1;
  --sterject-light-100:oklch(from var(--sterject-light) 0.945 calc(c * .3) h);
  --sterject-light-050:#EDFAFA;
  --sterject-light-050:oklch(from var(--sterject-light) 0.978 calc(c * .16) h);
  --sterject-dark-800:#005069;
  --sterject-dark-800:oklch(from var(--sterject-dark) calc(l + .08) c h);

  /* --- Neutrals: cool, tinted toward TSK Blue --- */
  --neutral-0:#FFFFFF;
  --neutral-25:#FBFCFD;  --neutral-25:oklch(0.990 0.003 245);
  --neutral-50:#F7F9FB;  --neutral-50:oklch(0.975 0.005 245);
  --neutral-100:#EFF2F6; --neutral-100:oklch(0.950 0.008 245);
  --neutral-200:#E2E7EE; --neutral-200:oklch(0.910 0.012 245);
  --neutral-300:#CBD3DE; --neutral-300:oklch(0.845 0.016 245);
  --neutral-400:#A2AEBF; --neutral-400:oklch(0.720 0.022 245);
  --neutral-500:#7E8B9E; --neutral-500:oklch(0.610 0.026 245);
  --neutral-600:#647184; --neutral-600:oklch(0.505 0.030 245);
  --neutral-700:#4C5766; --neutral-700:oklch(0.405 0.034 240);
  --neutral-800:#353E4B; --neutral-800:oklch(0.300 0.036 238);
  --neutral-900:#232B36; --neutral-900:oklch(0.215 0.038 236);

  /* --- Status --- */
  --status-info:var(--tsk-blue);
  --status-success:#3E9E77; --status-success:oklch(0.585 0.105 165);
  --status-warning:#C98A2E; --status-warning:oklch(0.700 0.130 72);
  --status-danger:#B24236;  --status-danger:oklch(0.545 0.165 26);
  --status-info-surface:var(--tsk-blue-050);
  --status-success-surface:#EDF8F3; --status-success-surface:oklch(0.972 0.022 165);
  --status-warning-surface:#FBF5E9; --status-warning-surface:oklch(0.975 0.035 82);
  --status-danger-surface:#FAF0EE;  --status-danger-surface:oklch(0.970 0.022 26);

  /* ================= SEMANTIC ALIASES ================= */
  --surface-page:var(--white);
  --surface-raised:var(--white);
  --surface-sunken:var(--neutral-50);
  --surface-tint:var(--tsk-blue-050);
  --surface-accent-tint:var(--sterject-light-050);
  --surface-inverse:var(--tsk-blue);
  --surface-technical:var(--sterject-dark);
  --surface-overlay:rgba(0,55,74,.58);
  --surface-overlay:oklch(from var(--sterject-dark) l c h / .58);

  --text-primary:var(--neutral-900);
  --text-secondary:var(--neutral-700);
  --text-muted:var(--neutral-500);
  --text-inverse:var(--white);
  --text-on-technical:rgba(255,255,255,.82);
  --text-on-technical:oklch(from var(--white) l c h / .82);
  --text-brand:var(--tsk-blue);
  --text-accent:var(--sterject-light-600);
  --text-link:var(--tsk-blue);
  --text-link-hover:var(--tsk-blue-800);

  --border-subtle:var(--neutral-200);
  --border-default:var(--neutral-300);
  --border-strong:var(--neutral-400);
  --border-brand:var(--tsk-blue);
  --border-accent:var(--sterject-light);
  --border-on-technical:rgba(255,255,255,.18);
  --border-on-technical:oklch(from var(--white) l c h / .18);

  --brand-primary:var(--tsk-blue);
  --brand-primary-hover:var(--tsk-blue-700);
  --brand-primary-press:var(--tsk-blue-800);
  --accent-interactive:var(--sterject-light);
  --accent-interactive-hover:var(--sterject-light-600);
  --focus-ring:var(--sterject-light);

  --gradient-tsk:linear-gradient(135deg,var(--tsk-blue) 0%,var(--deep-blue) 100%);
  --gradient-technical:linear-gradient(135deg,var(--sterject-dark) 0%,var(--deep-blue) 100%);
  --gradient-tsk-soft:linear-gradient(180deg,var(--tsk-blue-050) 0%,var(--white) 100%);

  /* --- TYPE --- */
  --font-core:"Host Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-data:var(--font-core);
  --weight-light:300; --weight-regular:400; --weight-medium:500;
  --weight-semibold:600; --weight-bold:700;

  --size-3xs:0.6875rem; --size-2xs:0.75rem;  --size-xs:0.8125rem; --size-sm:0.875rem;
  --size-base:1rem;     --size-md:1.0625rem; --size-lg:1.25rem;   --size-xl:1.5rem;
  --size-2xl:1.875rem;  --size-3xl:2.25rem;  --size-4xl:2.75rem;  --size-5xl:3.5rem;
  --size-6xl:4.5rem;
  --size-7xl:6rem;

  --size-display-1:clamp(2.5rem,1.6rem + 4.2vw,4.5rem);
  --size-display-2:clamp(2rem,1.4rem + 2.8vw,3.5rem);
  --size-display-3:clamp(1.625rem,1.25rem + 1.7vw,2.5rem);

  --leading-tight:1.04; --leading-snug:1.14; --leading-heading:1.22;
  --leading-normal:1.5; --leading-body:1.62; --leading-loose:1.75;

  --tracking-display:-0.032em; --tracking-heading:-0.018em; --tracking-tight:-0.008em;
  --tracking-normal:0;         --tracking-label:0.09em;     --tracking-eyebrow:0.14em;

  --measure-narrow:34ch; --measure-body:66ch; --measure-wide:78ch;

  /* --- SPACE --- */
  --space-0:0;      --space-1:0.25rem; --space-2:0.5rem;  --space-3:0.75rem;
  --space-4:1rem;   --space-5:1.25rem; --space-6:1.5rem;  --space-8:2rem;
  --space-10:2.5rem;--space-12:3rem;   --space-16:4rem;   --space-20:5rem;
  --space-24:6rem;  --space-32:8rem;   --space-40:10rem;

  --inset-panel:clamp(1.5rem,1rem + 2.4vw,3rem);
  --section-y:clamp(4rem,2.5rem + 7vw,10rem);
  --section-y-tight:clamp(3rem,2rem + 4vw,6rem);
  --grid-gap:clamp(1rem,0.5rem + 1.6vw,2rem);

  /* --- RADIUS --- */
  --radius-xs:0.25rem; --radius-sm:0.375rem; --radius-md:0.625rem; --radius-lg:0.875rem;
  --radius-xl:1.25rem; --radius-frame:1.75rem; --radius-frame-lg:2.75rem; --radius-pill:999px;
  --stroke-hairline:1px; --stroke-frame:1.5px; --stroke-emphasis:2px; --stroke-heavy:3px;

  /* --- ELEVATION --- */
  --shadow-none:none;
  --shadow-xs:0 1px 2px rgba(0,55,74,.06);
  --shadow-sm:0 1px 3px rgba(0,55,74,.07),0 1px 2px rgba(0,55,74,.04);
  --shadow-md:0 6px 20px -6px rgba(0,55,74,.12),0 1px 2px rgba(0,55,74,.05);
  --shadow-lg:0 20px 48px -16px rgba(0,55,74,.18);
  --ring-focus:0 0 0 3px rgba(56,203,198,.48);

  /* --- MOTION --- */
  --duration-fast:140ms; --duration-base:200ms; --duration-slow:320ms;
  --ease-standard:cubic-bezier(.2,.6,.2,1); --ease-out:cubic-bezier(0,0,.22,1);

  /* --- LAYOUT --- */
  --container-narrow:44rem; --container-max:75rem; --container-wide:88rem;
  --gutter:clamp(1.25rem,0.75rem + 2.4vw,2.5rem);
  --header-height:4.5rem;
  --z-header:200;
}

/* --- Minimal element defaults ------------------------------------------- */
.sj *,.sj *::before,.sj *::after{box-sizing:border-box}
/* :where() drops this to zero specificity so any component class that sets its
   own margin (.sectitle, .fam-note) wins. As a plain
   `.sj p` selector it outranked those and silently ate their spacing. */
:where(.sj) :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd){margin:0}
.sj img,.sj svg,.sj video{display:block;max-width:100%}
.sj button,.sj input,.sj select,.sj textarea{font:inherit;color:inherit}
.sj a:focus-visible,.sj button:focus-visible,.sj input:focus-visible,.sj [tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sj ::selection{background:rgba(56,203,198,.32)}
.sj table{border-collapse:collapse}

/* --- Type roles --------------------------------------------------------- */
.ds-caption{font-size:var(--size-2xs);line-height:1.45;color:var(--text-muted)}

@media (prefers-reduced-motion:reduce){
  .sj *,.sj *::before,.sj *::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}