/* Calex UK Design System — flattened stylesheet
   Generated from styles.css and its @import closure.
   Brand purple #4F2A59. Fonts: Archivo + IBM Plex Mono (substitutions — see readme.md).
*/

/* ============================================================
   tokens/fonts.css
   ============================================================ */
/* SUBSTITUTED WEBFONTS — see readme.md "Fonts & substitutions".
   calexuk.com serves its type from a WordPress theme we could not read.
   Archivo is used as the nearest available match for the site's tight,
   heavy, italic-heading corporate sans. Replace with the real Calex
   licensed faces when available. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700;1,800&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ============================================================
   tokens/colors.css
   ============================================================ */
:root{
/* --- base ramp: ink (hero, footer, dark panels) --- */
--calex-ink-900:#0C1116;--calex-ink-800:#141B22;--calex-ink-700:#1E2831;--calex-ink-600:#2B3843;

/* --- base ramp: brand purple --- */
--calex-purple-900:#1F1124;--calex-purple-800:#301A38;--calex-purple-700:#3E2248;--calex-purple-600:#452450;--calex-purple-500:#4F2A59;--calex-purple-400:#6B3A79;--calex-purple-300:#9E6FAC;--calex-purple-200:#C8AAD1;--calex-purple-100:#F2EAF4;

/* --- base ramp: neutral --- */
--calex-white:#FFFFFF;--calex-grey-50:#F6F8FA;--calex-grey-100:#EDF1F5;--calex-grey-200:#DDE3EA;--calex-grey-300:#C3CCD6;--calex-grey-400:#A3AFBB;--calex-grey-500:#7C8A98;--calex-grey-600:#5D6B78;--calex-grey-700:#4A5763;--calex-grey-800:#333E48;

/* --- base ramp: semantic --- */
--calex-green-600:#1C7A4A;--calex-green-100:#E4F3EB;--calex-amber-600:#B26A00;--calex-amber-100:#FBF0DC;--calex-red-600:#B3261E;--calex-red-100:#FBE7E5;

/* --- semantic aliases --- */
--text-heading:var(--calex-ink-900);
--text-body:var(--calex-grey-800);
--text-muted:var(--calex-grey-600);
--text-inverse:var(--calex-white);
--text-inverse-muted:rgba(255,255,255,.72);
--text-link:var(--calex-purple-500);
--text-link-hover:var(--calex-purple-800);

--surface-page:var(--calex-white);
--surface-sunken:var(--calex-grey-50);
--surface-card:var(--calex-white);
--surface-dark:var(--calex-ink-900);
--surface-dark-raised:var(--calex-ink-700);
--surface-accent-soft:var(--calex-purple-100);

--border-subtle:var(--calex-grey-200);
--border-strong:var(--calex-grey-300);
--border-inverse:rgba(255,255,255,.18);

--accent:var(--calex-purple-500);
--accent-hover:var(--calex-purple-700);
--accent-press:var(--calex-purple-800);
--accent-on:var(--calex-white);

--status-success:var(--calex-green-600);
--status-success-soft:var(--calex-green-100);
--status-warning:var(--calex-amber-600);
--status-warning-soft:var(--calex-amber-100);
--status-error:var(--calex-red-600);
--status-error-soft:var(--calex-red-100);

--focus-ring:var(--calex-purple-400);
--scrim-media:linear-gradient(180deg,rgba(12,17,22,.25) 0%,rgba(12,17,22,.78) 100%); /* @kind color */
--scrim-panel:linear-gradient(90deg,rgba(12,17,22,.88) 0%,rgba(12,17,22,.35) 70%,rgba(12,17,22,0) 100%); /* @kind color */
}

/* ============================================================
   tokens/typography.css
   ============================================================ */
:root{
--font-display:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-body:"Archivo","Helvetica Neue",Arial,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;

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

--size-display-xl:64px;--size-display-l:48px;--size-display-m:36px;
--size-heading-l:28px;--size-heading-m:22px;--size-heading-s:18px;
--size-body-l:18px;--size-body:16px;--size-body-s:14px;--size-caption:12px;
--size-eyebrow:13px;--size-button:14px;

--leading-display:1.04; /* @kind font */
--leading-heading:1.18; /* @kind font */
--leading-body:1.62; /* @kind font */
--leading-tight:1.3; /* @kind font */

--tracking-display:-0.02em; /* @kind font */
--tracking-heading:-0.01em; /* @kind font */
--tracking-body:0; /* @kind font */
--tracking-eyebrow:0.18em; /* @kind font */
--tracking-button:0.1em; /* @kind font */

/* the site's signature: italic headings, uppercase letterspaced labels */
--style-heading:italic; /* @kind font */
--transform-label:uppercase; /* @kind font */
}

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

--section-y:var(--space-24);
--section-y-tight:var(--space-16);
--gutter:var(--space-6);
--container-max:1240px;
--container-narrow:760px;
--grid-gap:var(--space-6);

--radius-0:0px;--radius-xs:2px;--radius-sm:4px;--radius-md:8px;--radius-lg:16px;--radius-pill:999px;
--control-h-sm:36px;--control-h-md:44px;--control-h-lg:52px;
--border-w:1px; /* @kind spacing */
--border-w-thick:2px; /* @kind spacing */
--rule-accent-w:3px; /* @kind spacing */
}

/* ============================================================
   tokens/elevation.css
   ============================================================ */
:root{
--shadow-none:none; /* @kind shadow */
--shadow-sm:0 1px 2px rgba(12,17,22,.06),0 1px 1px rgba(12,17,22,.04);
--shadow-md:0 4px 12px rgba(12,17,22,.08),0 1px 3px rgba(12,17,22,.06);
--shadow-lg:0 14px 32px rgba(12,17,22,.12),0 2px 6px rgba(12,17,22,.06);
--shadow-media:0 18px 40px rgba(12,17,22,.22);
--shadow-inset-top:inset 0 1px 0 rgba(255,255,255,.06);
--ring-focus:0 0 0 3px rgba(79,42,89,.38); /* @kind shadow */
}

/* ============================================================
   tokens/motion.css
   ============================================================ */
:root{
--duration-fast:120ms; /* @kind other */
--duration-base:200ms; /* @kind other */
--duration-slow:320ms; /* @kind other */
--duration-media:600ms; /* @kind other */
--ease-out:cubic-bezier(.2,.6,.2,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--hover-lift:translateY(-2px); /* @kind other */
--press-scale:scale(.98); /* @kind other */
--zoom-media:scale(1.04); /* @kind other */
}

/* ============================================================
   tokens/base.css
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);font-size:var(--size-body);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-style:var(--style-heading);font-weight:var(--weight-bold);color:var(--text-heading);letter-spacing:var(--tracking-heading);line-height:var(--leading-heading);margin:0 0 var(--space-4)}
h1{font-size:var(--size-display-l);line-height:var(--leading-display);letter-spacing:var(--tracking-display)}
h2{font-size:var(--size-display-m)}h3{font-size:var(--size-heading-m)}h4{font-size:var(--size-heading-s)}
p{margin:0 0 var(--space-4);text-wrap:pretty}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
img{max-width:100%;display:block}
::selection{background:var(--calex-purple-200)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ============================================================
   shared components
   ============================================================ */
.flash-message{
padding:12px 32px;
background:var(--status-success-soft);
color:var(--status-success);
font-size:13px;
font-weight:600;
text-align:center;
}