/* Colorgraphics design tokens — do not hand-edit values; source of truth is the design system export. */
:root{
/* ── Brand — sampled directly from the Colorgraphics logo ─────────────── */
--brand-navy:#2E2B63;
--brand-navy-deep:#1F1D45;
--brand-magenta:#E11D6E;
--brand-amber:#F5A83C;
--brand-blue:#3E63A8;
/* Logo spectrum, for the rare hairline/edge accent. Never a section background. */
--brand-spectrum:linear-gradient(96deg,var(--brand-amber) 0%,var(--brand-magenta) 46%,var(--brand-blue) 78%,var(--brand-navy) 100%); /* @kind other */

/* ── Accent — THE single interactive colour. Replace these five to rebrand ── */
--accent-100:#FFE7F0;
--accent-300:#F79BBF;
--accent-500:#E11D6E;
--accent-600:#C4145D;
--accent-700:#9E0F4A;

/* ── Neutrals — cool industrial ramp ──────────────────────────────────── */
--n-0:#FFFFFF;
--n-25:#FAFAF9;   /* warm off-white, default page */
--n-50:#F4F4F2;
--n-100:#EBEBE8;
--n-200:#DCDCD8;
--n-300:#C2C2BE;
--n-400:#9A9A97;
--n-500:#6F7075;
--n-600:#4C4E54;
--n-700:#2F3238;
--n-800:#1D2025;
--n-900:#131519;
--n-950:#0B0C0F;

/* ── Semantic ─────────────────────────────────────────────────────────── */
--success:#1B7F4B;
--warning:#B87503;
--danger:#B3261E;
--info:var(--brand-blue);

/* ── Aliases: light mode (default) ────────────────────────────────────── */
--surface-page:var(--n-25);
--surface-raised:var(--n-0);
--surface-sunken:var(--n-50);
--surface-card:var(--n-0);
--surface-inverse:var(--n-950);
--surface-brand:var(--brand-navy-deep);
--surface-accent-soft:var(--accent-100);

--text-strong:var(--n-950);
--text-body:var(--n-700);
--text-muted:var(--n-500);
--text-faint:var(--n-400);
--text-accent:var(--accent-600);
--text-on-accent:var(--n-0);
--text-on-inverse:var(--n-0);

--border-hairline:rgba(11,12,15,.08);
--border-subtle:var(--n-200);
--border-strong:var(--n-300);
--border-accent:var(--accent-500);
--border-focus:var(--accent-500);

--overlay-scrim:rgba(11,12,15,.56); /* @kind color */
--overlay-glass:rgba(255,255,255,.72); /* @kind color */
}

/* ── Dark sections. Apply .cg-dark to any section, panel or card. ──────── */
.cg-dark{
--surface-page:var(--n-950);
--surface-raised:var(--n-900);
--surface-sunken:#08090B;
--surface-card:rgba(255,255,255,.035);
--surface-inverse:var(--n-0);
--surface-accent-soft:rgba(225,29,110,.12);

--text-strong:var(--n-0);
--text-body:rgba(255,255,255,.72);
--text-muted:rgba(255,255,255,.52);
--text-faint:rgba(255,255,255,.36);
--text-accent:#FF5E96;
--text-on-inverse:var(--n-950);

--border-hairline:rgba(255,255,255,.09);
--border-subtle:rgba(255,255,255,.14);
--border-strong:rgba(255,255,255,.24);

--overlay-glass:rgba(11,12,15,.66); /* @kind color */
color:var(--text-body);
background:var(--surface-page);
}

:root{
--font-sans:"Archivo","Helvetica Neue",Helvetica,sans-serif; /* @kind font */
--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* @kind font */

--fw-light:300; /* @kind other */
--fw-regular:400; /* @kind other */
--fw-medium:500; /* @kind other */
--fw-semibold:600; /* @kind other */
--fw-bold:700; /* @kind other */
--fw-black:800; /* @kind other */

/* Fluid scale — desktop-first, degrades without shrinking the layout. */
--fs-display:clamp(3rem,1.4rem + 6.6vw,7.5rem); /* @kind other */   /* 48 → 120 */
--fs-h1:clamp(2.5rem,1.5rem + 4vw,4.5rem); /* @kind other */        /* 40 → 72  */
--fs-h2:clamp(1.875rem,1.2rem + 2.4vw,3rem); /* @kind other */      /* 30 → 48  */
--fs-h3:clamp(1.375rem,1.1rem + 1vw,1.75rem); /* @kind other */     /* 22 → 28  */
--fs-h4:1.25rem; /* @kind other */
--fs-lead:clamp(1.0625rem,1rem + .35vw,1.3125rem); /* @kind other */
--fs-body:1rem; /* @kind other */
--fs-body-sm:.9375rem; /* @kind other */
--fs-small:.8125rem; /* @kind other */
--fs-label:.6875rem; /* @kind other */

--lh-display:.92; /* @kind other */
--lh-heading:1.06; /* @kind other */
--lh-tight:1.2; /* @kind other */
--lh-body:1.65; /* @kind other */
--lh-relaxed:1.75; /* @kind other */

--ls-display:-.035em; /* @kind other */
--ls-heading:-.025em; /* @kind other */
--ls-tight:-.012em; /* @kind other */
--ls-body:-.005em; /* @kind other */
--ls-label:.13em;   /* uppercase eyebrows / nav metadata only */
--ls-mono:.02em; /* @kind other */

--measure-prose:66ch; /* @kind other */
--measure-narrow:46ch; /* @kind other */
}

:root{
/* 8px base grid */
--sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:32px;--sp-5:40px;--sp-6:48px;
--sp-8:64px;--sp-10:80px;--sp-12:96px;--sp-15:120px;--sp-20:160px;
/* sub-grid, for optical alignment inside controls only */
--sp-half:4px;--sp-quarter:2px;

/* Section rhythm */
--section-y:var(--sp-15);
--section-y-lg:var(--sp-20);
--section-y-sm:var(--sp-10);

/* Layout */
--container-max:1360px;
--container-narrow:880px;
--gutter:var(--sp-4);
--gutter-lg:var(--sp-8);
--grid-cols:12; /* @kind other */
--grid-gap:var(--sp-3);
--header-h:76px;
--header-h-scrolled:60px;
}

:root{
--r-xs:2px;      /* hairline chips, focus outlines */
--r-sm:6px;      /* inputs, small tags */
--r-md:12px;     /* default: cards, buttons, panels */
--r-lg:16px;     /* large cards, mega-menu */
--r-xl:24px;     /* full-bleed media, hero plates */
--r-pill:999px;  /* eyebrow chips and icon buttons only */
--r-none:0; /* @kind radius */      /* product/machinery imagery, tables, technical blocks */
}

:root{
/* Depth comes from contrast and hairlines first; shadow is the last resort. */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(11,12,15,.04);
--shadow-2:0 2px 8px rgba(11,12,15,.05),0 1px 2px rgba(11,12,15,.04);
--shadow-3:0 12px 32px -12px rgba(11,12,15,.14),0 2px 6px rgba(11,12,15,.04);
--shadow-4:0 32px 64px -24px rgba(11,12,15,.22);
--shadow-accent:0 10px 28px -12px rgba(225,29,110,.5);
--ring-focus:0 0 0 3px rgba(225,29,110,.28); /* @kind other */
--blur-glass:saturate(180%) blur(16px); /* @kind other */
}

:root{
--ease-out:cubic-bezier(.22,1,.36,1); /* @kind other */       /* default — cinematic settle */
--ease-in-out:cubic-bezier(.65,0,.35,1); /* @kind other */
--ease-entrance:cubic-bezier(.16,1,.3,1); /* @kind other */   /* reveals, masks */
--ease-linear:linear; /* @kind other */                        /* marquees only */

--dur-instant:120ms; /* @kind other */
--dur-fast:200ms; /* @kind other */
--dur-base:320ms; /* @kind other */
--dur-slow:600ms; /* @kind other */
--dur-reveal:900ms; /* @kind other */
--dur-marquee:38s; /* @kind other */

--t-color:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out); /* @kind other */
--t-transform:transform var(--dur-base) var(--ease-out); /* @kind other */
--t-arrow:transform var(--dur-fast) var(--ease-out); /* @kind other */
--t-media:transform var(--dur-slow) var(--ease-out); /* @kind other */

--reveal-y:24px; /* @kind spacing */
--hover-lift:-3px; /* @kind other */
--press-scale:.985; /* @kind other */
}
@media (prefers-reduced-motion:reduce){
:root{
--dur-base:1ms; /* @kind other */
--dur-slow:1ms; /* @kind other */
--dur-reveal:1ms; /* @kind other */
--reveal-y:0px; /* @kind spacing */
--hover-lift:0px; /* @kind other */
}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{color:var(--text-strong);font-weight:var(--fw-semibold);letter-spacing:var(--ls-heading);line-height:var(--lh-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-accent);text-decoration:none;transition:var(--t-color)}
a:hover{color:var(--accent-700)}
.cg-dark a:hover{color:#FF8AB4}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-xs)}
img,svg,video{display:block;max-width:100%}
::selection{background:var(--accent-500);color:#fff}
.cg-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
@media(min-width:1024px){.cg-container{padding-inline:var(--gutter-lg)}}
.cg-grid{display:grid;grid-template-columns:repeat(var(--grid-cols),minmax(0,1fr));gap:var(--grid-gap)}
.cg-eyebrow{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:var(--fw-medium);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}
.cg-mono{font-family:var(--font-mono);letter-spacing:var(--ls-mono);font-variant-numeric:tabular-nums}
.cg-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-semibold)}
.cg-rule{height:1px;background:var(--border-subtle);border:0}