/* WeZimplify — complete design system stylesheet (flattened).
   Generated from tokens/*.css. Drop this file plus ./assets/ into a project and link it.
   Asset URLs are relative to this file: ./assets/fonts/, ./assets/gradients/ */

/* ===== fonts.css ===== */
/* WeZimplify webfonts — variable TTFs supplied in the det nye sort identity package. */
@font-face{font-family:"Faustina";src:url("./assets/fonts/Faustina-VariableFont_wght.ttf") format("truetype-variations");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Faustina";src:url("./assets/fonts/Faustina-Italic-VariableFont_wght.ttf") format("truetype-variations");font-weight:300 800;font-style:italic;font-display:swap}
@font-face{font-family:"Sometype Mono";src:url("./assets/fonts/SometypeMono-VariableFont_wght.ttf") format("truetype-variations");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Sometype Mono";src:url("./assets/fonts/SometypeMono-Italic-VariableFont_wght.ttf") format("truetype-variations");font-weight:400 700;font-style:italic;font-display:swap}

/* ===== colors.css ===== */
:root{
/* Core brand — WeZimplify Blue is the only named colour in the supplied .ase swatch file */
--wz-blue:#17283F;
--wz-lime:#D1F269;
--wz-sky:#D4E4F3;
--wz-black:#000000;
--wz-white:#FFFFFF;

/* Blue ramp — mixes of WeZimplify Blue toward black/white. --blue-900 sampled from the darkest core of Gradient 01. */
--wz-blue-900:#0A1524;
--wz-blue-800:#17283F;
--wz-blue-700:#253048;
--wz-blue-600:#344158;
--wz-blue-500:#4E5A70;
--wz-blue-400:#6B7688;
--wz-blue-300:#8B94A3;
--wz-blue-200:#A8B2C0;
--wz-blue-100:#D4E4F3;
--wz-blue-050:#EDF3FA;

/* Lime ramp — base sampled from the identity illustrations (#D1F269) */
--wz-lime-600:#7E9C2C;
--wz-lime-500:#A8C93F;
--wz-lime-400:#D1F269;
--wz-lime-200:#E8F9B4;
--wz-lime-100:#F4FCDA;

/* Ink neutrals — illustration line work is pure black */
--wz-ink-900:#000000;
--wz-ink-700:#2B2B2B;
--wz-ink-500:#6E6E6E;
--wz-ink-300:#B4B4B4;
--wz-ink-100:#E6E6E6;
--wz-ink-050:#F4F4F4;

/* Semantic text */
--text-body:var(--wz-blue-800);
--text-heading:var(--wz-blue-800);
--text-muted:var(--wz-blue-400);
--text-inverse:var(--wz-white);
--text-inverse-muted:var(--wz-blue-200);
--text-on-lime:var(--wz-blue-800);
--text-link:var(--wz-blue-800);
--text-link-hover:var(--wz-lime-600);

/* Semantic surface */
--surface-page:var(--wz-white);
--surface-subtle:var(--wz-blue-050);
--surface-card:var(--wz-white);
--surface-sky:var(--wz-sky);
--surface-deep:var(--wz-blue-800);
--surface-deepest:var(--wz-blue-900);
--surface-accent:var(--wz-lime);
--surface-accent-subtle:var(--wz-lime-100);

/* Semantic border — hairlines, matching the illustration stroke language */
--border-hairline:var(--wz-blue-800);
--border-subtle:#DCE3EC;
--border-strong:var(--wz-blue-800);
--border-inverse:rgba(255,255,255,.28);
--border-accent:var(--wz-lime-500);

/* Interaction */
--focus-ring:var(--wz-lime-400);
--overlay-scrim:rgba(10,21,36,.62);

/* Status — not defined in the identity package; derived to sit beside the brand blue. Flagged in readme.md. */
--status-success:#3F8F5F;
--status-warning:#C98A21;
--status-danger:#B23A32;
--status-info:var(--wz-blue-600);
}

/* ===== typography.css ===== */
:root{
/* Families. Faustina (serif) and Sometype Mono are the two supplied brand faces.
   The WeZimplify wordmark is drawn in a neo-grotesk that was NOT supplied — always use assets/logo/*, never re-set it in type. */
--font-serif:"Faustina",Georgia,"Times New Roman",serif; /* @kind font */
--font-mono:"Sometype Mono","IBM Plex Mono",ui-monospace,monospace; /* @kind font */
--font-display:var(--font-serif); /* @kind font */
--font-body:var(--font-serif); /* @kind font */
--font-ui:var(--font-mono); /* @kind font */

/* Weights — Faustina axis 300..800 */
--fw-light:300; /* @kind font */
--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semibold:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-extrabold:800; /* @kind font */

/* Size scale (1.25 major third, 16px base) */
--fs-3xs:11px; /* @kind font */
--fs-2xs:12px; /* @kind font */
--fs-xs:13px; /* @kind font */
--fs-sm:15px; /* @kind font */
--fs-md:17px; /* @kind font */
--fs-lg:20px; /* @kind font */
--fs-xl:25px; /* @kind font */
--fs-2xl:31px; /* @kind font */
--fs-3xl:39px; /* @kind font */
--fs-4xl:49px; /* @kind font */
--fs-5xl:61px; /* @kind font */
--fs-6xl:76px; /* @kind font */
--fs-7xl:96px; /* @kind font */

/* Line heights */
--lh-tight:1.04; /* @kind font */
--lh-snug:1.14; /* @kind font */
--lh-heading:1.2; /* @kind font */
--lh-body:1.55; /* @kind font */
--lh-loose:1.7; /* @kind font */

/* Tracking — display serif sits tight, mono labels sit wide and uppercase */
--ls-display:-0.02em; /* @kind font */
--ls-heading:-0.01em; /* @kind font */
--ls-body:0; /* @kind font */
--ls-label:0.14em; /* @kind font */
--ls-mono:0.02em; /* @kind font */

/* Composed roles */
--type-display:var(--fw-semibold) var(--fs-6xl)/var(--lh-tight) var(--font-display); /* @kind font */
--type-h1:var(--fw-semibold) var(--fs-4xl)/var(--lh-snug) var(--font-display); /* @kind font */
--type-h2:var(--fw-semibold) var(--fs-3xl)/var(--lh-heading) var(--font-display); /* @kind font */
--type-h3:var(--fw-semibold) var(--fs-xl)/var(--lh-heading) var(--font-display); /* @kind font */
--type-lead:var(--fw-regular) var(--fs-lg)/var(--lh-body) var(--font-body); /* @kind font */
--type-body:var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font-body); /* @kind font */
--type-small:var(--fw-regular) var(--fs-sm)/var(--lh-body) var(--font-body); /* @kind font */
--type-label:var(--fw-medium) var(--fs-2xs)/1.3 var(--font-mono); /* @kind font */
--type-mono:var(--fw-regular) var(--fs-sm)/1.5 var(--font-mono); /* @kind font */
}

/* ===== spacing.css ===== */
:root{
/* 4px base step */
--space-0:0;--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;--space-40:160px;

/* Layout */
--layout-max:1240px; /* @kind spacing */--layout-narrow:720px;--layout-gutter:24px;--layout-gutter-lg:48px;
--section-y:var(--space-24); /* @kind spacing */--section-y-sm:var(--space-16);

/* The identity's core shape: "aflang firkant" — an upright rectangle, 88x167 in the supplied artwork */
--shape-ratio:88 / 167; /* @kind other */
}

/* ===== radius.css ===== */
:root{
/* The identity is built from hard-edged rectangles and squares. Radius is near-zero by default;
   2px exists only for small interactive chrome. Pills and heavy rounding are off-brand. */
--radius-none:0;--radius-xs:2px;--radius-sm:4px;--radius-full:999px;
--radius-control:var(--radius-none);
--radius-card:var(--radius-none);
--radius-image:var(--radius-none);
--border-width-hairline:1px; /* @kind other */--border-width-strong:2px;
}

/* ===== elevation.css ===== */
:root{
/* Flat by default. Shadows are used sparingly and are always cool blue, never neutral grey. */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(10,21,36,.08);
--shadow-md:0 8px 24px -8px rgba(10,21,36,.18);
--shadow-lg:0 24px 60px -20px rgba(10,21,36,.28);
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--blur-glass:blur(14px); /* @kind other */
--scrim-bottom:linear-gradient(to top,rgba(10,21,36,.72),rgba(10,21,36,0)); /* @kind other */
}

/* ===== motion.css ===== */
:root{
/* Calm, linear-ish easing. No bounce, no overshoot — the brand reads as "simple", not playful. */
--ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */
--ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
--dur-instant:80ms; /* @kind other */
--dur-fast:140ms; /* @kind other */
--dur-base:220ms; /* @kind other */
--dur-slow:420ms; /* @kind other */
--dur-ambient:1200ms; /* @kind other */
--transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard); /* @kind other */
}

/* ===== gradients.css ===== */
:root{
/* The identity ships 8 rendered mesh gradients (assets/gradients/*.png) with visible grain.
   Prefer the PNG for hero-scale surfaces; the CSS approximations below are for small areas only. */
--gradient-01:url("./assets/gradients/gradient-01.png"); /* @kind other */
--gradient-02:url("./assets/gradients/gradient-02.png"); /* @kind other */
--gradient-03:url("./assets/gradients/gradient-03.png"); /* @kind other */
--gradient-04:url("./assets/gradients/gradient-04.png"); /* @kind other */
--gradient-05:url("./assets/gradients/gradient-05.png"); /* @kind other */
--gradient-06:url("./assets/gradients/gradient-06.png"); /* @kind other */
--gradient-07:url("./assets/gradients/gradient-07.png"); /* @kind other */
--gradient-08:url("./assets/gradients/gradient-08.png"); /* @kind other */
--gradient-deep-css:radial-gradient(120% 100% at 78% 8%,#8A9AB0 0%,#37455C 38%,#17283F 68%,#0A1524 100%); /* @kind other */
--gradient-sky-lime-css:radial-gradient(120% 120% at 70% 0%,#D1F269 0%,#E9F6C8 42%,#D4E4F3 100%); /* @kind other */
--gradient-sky-css:radial-gradient(120% 120% at 20% 0%,#FFFFFF 0%,#D4E4F3 60%,#BFD5EB 100%); /* @kind other */
}

/* ===== base.css ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;color:var(--text-heading);letter-spacing:var(--ls-heading);text-wrap:balance}
h1{font:var(--type-h1);letter-spacing:var(--ls-display)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
p{margin:0}
a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--wz-lime);color:var(--wz-blue-800)}
.wz-eyebrow{font:var(--type-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted)}