/* WeZimplify — complete design system stylesheet (flattened).
   Generated from tokens/*.css by scripts/build-css.mjs: edit the token files, not this one.
   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 ===== */
/* Light and dark: every colour that differs holds both values as light-dark(<light>, <dark>), and color-scheme picks
   one where the colour is used. The device decides by default; data-theme="light" or "dark" decides for <html> or
   any container in it. Dark is a flat navy: the palette is inverted (the ink becomes light, white becomes the navy),
   so a component that pairs --wz-blue-800 with --wz-white stays legible in both, as it does in the glass look. */
:root{color-scheme:light dark}
[data-theme="light"]{color-scheme:light}
[data-theme="dark"]{color-scheme:dark}
/* A light surface (a lime card, a pale gradient panel) keeps the brand's dark ink in every look and mode. */
[data-surface="light"]{color-scheme:light}
/* A dark surface (a deep card) is dark in every look and mode, so what sits on it takes the dark scheme: light ink, a
   pale primary button. Only its contents: the surface itself keeps its own deep colour, which differs between light and dark. */
[data-surface="dark"] > *{color-scheme:dark}

:root{
/* Core brand — WeZimplify Blue is the only named colour in the supplied .ase swatch file. The named colours never change. */
--wz-blue:#17283F;
--wz-lime:#D1F269;
--wz-sky:light-dark(#D4E4F3,#173250);
--wz-black:#000000;
--wz-white:light-dark(#FFFFFF,#0A1C31);

/* Blue ramp — mixes of WeZimplify Blue toward black/white. --blue-900 sampled from the darkest core of Gradient 01.
   Dark turns it round: the deep steps become the light ink, the pale steps become raised navy. */
--wz-blue-900:light-dark(#0A1524,#A9C1E3);
--wz-blue-800:light-dark(#17283F,#D3E4FF);
--wz-blue-700:light-dark(#253048,#EAF2FF);
--wz-blue-600:light-dark(#344158,#B4C6DE);
--wz-blue-500:light-dark(#4E5A70,#93A8C4);
--wz-blue-400:light-dark(#6B7688,#93A8C4);
--wz-blue-300:light-dark(#8B94A3,#6F86A6);
--wz-blue-200:light-dark(#A8B2C0,#B4C6DE);
--wz-blue-100:light-dark(#D4E4F3,#1E3654);
--wz-blue-050:light-dark(#EDF3FA,#152B45);

/* Lime ramp — base sampled from the identity illustrations (#D1F269). The deep step is text on light; on navy the base reads. */
--wz-lime-600:light-dark(#7E9C2C,#D1F269);
--wz-lime-500:#A8C93F;
--wz-lime-400:#D1F269;
--wz-lime-200:light-dark(#E8F9B4,rgba(209,242,105,.22));
--wz-lime-100:light-dark(#F4FCDA,rgba(209,242,105,.12));

/* Ink neutrals — illustration line work is pure black; on navy the ramp turns round like the blue one */
--wz-ink-900:light-dark(#000000,#FFFFFF);
--wz-ink-700:light-dark(#2B2B2B,#E6E6E6);
--wz-ink-500:light-dark(#6E6E6E,#A0A0A0);
--wz-ink-300:light-dark(#B4B4B4,#5A5A5A);
--wz-ink-100:light-dark(#E6E6E6,#2B2B2B);
--wz-ink-050:light-dark(#F4F4F4,#1A1A1A);

/* Semantic text */
--text-body:var(--wz-blue-800);
--text-heading:light-dark(var(--wz-blue-800),#FFFFFF);
--text-muted:var(--wz-blue-400);
/* Inverse text sits on the deep surfaces, which stay dark in both: white in both. */
--text-inverse:#FFFFFF;
--text-inverse-muted:var(--wz-blue-200);
/* Lime stays lime, so the ink on it is the named blue in both. */
--text-on-lime:var(--wz-blue);
--text-link:var(--wz-blue-800);
--text-link-hover:var(--wz-lime-600);

/* Semantic surface. In dark a card is a step lighter than the page: depth by lightness, not by shadow. */
--surface-page:var(--wz-white);
--surface-subtle:var(--wz-blue-050);
--surface-card:light-dark(var(--wz-white),#11253D);
--surface-sky:var(--wz-sky);
--surface-deep:light-dark(var(--wz-blue),#06101E);
--surface-deepest:light-dark(var(--wz-blue-900),#040B15);
--surface-accent:var(--wz-lime);
--surface-accent-subtle:var(--wz-lime-100);

/* Semantic border — hairlines, matching the illustration stroke language. On navy a full-strength light line glares,
   so the hairline is a faint light ink there; the strong border stays full. */
--border-hairline:light-dark(var(--wz-blue-800),rgba(211,228,255,.28));
--border-subtle:light-dark(#DCE3EC,rgba(211,228,255,.12));
--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:light-dark(rgba(10,21,36,.62),rgba(2,8,16,.7));

/* Status — not defined in the identity package; derived to sit beside the brand blue. Flagged in readme.md.
   Lifted in dark so they read on navy. */
--status-success:light-dark(#3F8F5F,#5FD08A);
--status-warning:light-dark(#C98A21,#F0B84A);
--status-danger:light-dark(#B23A32,#FF7A70);
--status-info:light-dark(var(--wz-blue-600),#7CC4FF);
}

/* ===== 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; on navy a blue shadow
   does not show, so dark ones are a deeper black. */
--shadow-none:none;
--shadow-sm:0 1px 2px light-dark(rgba(10,21,36,.08),rgba(0,0,0,.4));
--shadow-md:0 8px 24px -8px light-dark(rgba(10,21,36,.18),rgba(0,0,0,.5));
--shadow-lg:0 24px 60px -20px light-dark(rgba(10,21,36,.28),rgba(0,0,0,.6));
--shadow-inset-hairline:inset 0 0 0 1px var(--border-subtle);
--blur-glass:blur(14px); /* @kind other */
--backdrop-surface:none; /* @kind other */ /* backdrop-filter for surfaced components; only a look (looks/glassmorphism.css) sets it */
--glow-accent:0 0 0 0 transparent; /* @kind other */ /* box-shadow glow on accent/primary elements; only a look sets it. A transparent shadow, not none, so it can sit in a shadow list */
--shadow-card:0 0 0 0 transparent; /* @kind other */ /* resting shadow of a Card; invisible by default, only a look sets it */
--shadow-rim:0 0 0 0 transparent; /* @kind other */ /* the lit edge of a glass panel, as inset shadows; only a look sets it */
--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-sheen:none; /* @kind other */ /* the light across a glass panel, laid over its fill; only a look sets it */
--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)}

/* ===== dark.css ===== */
/* What a colour token cannot carry in a dark scheme: images and filters, in every look.
   A selector cannot read color-scheme, so each rule is here twice: once under data-theme="dark", once under the
   device setting where no data-theme says light. A light container inside a dark one keeps its own images.
   Keep the two lists in step.
   The black wordmark is shown light; LogoTicker's light tone (black logos, an inline filter) is shown white; the black
   line illustrations become the light-line copies in assets/illustrations/light (scripts/build-light-illustrations.py);
   the PricingCard band (a pale inline image) becomes the dark brand gradient. Inline styles, hence !important. */

/* A filled ShapeFrame block (also behind a split PersonCard photo) is the ink by default, which glares on navy and
   hides the light illustration lines; in dark it is a deep panel instead. One colour, so light-dark carries it.
   A var() resolves where it is declared, so every look declares it again to read its own surfaces. */
:root,[data-look]{--shape-fill:light-dark(var(--wz-blue-800),var(--surface-deep))}

[data-theme="dark"] :is(img[src$="wezimplify-logo-black.svg"],img[src$="wezimplify-logo-black.png"]):not([data-theme="dark"] [data-theme="light"] *){filter:invert(1) brightness(1.1)}
[data-theme="dark"] img[data-logo-tone="light"]:not([data-theme="dark"] [data-theme="light"] *){filter:brightness(0) invert(1) !important;opacity:.8 !important}
[data-theme="dark"] img[src$="illustration-01.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-01.png)}
[data-theme="dark"] img[src$="illustration-02.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-02.png)}
[data-theme="dark"] img[src$="illustration-03.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-03.png)}
[data-theme="dark"] img[src$="illustration-04.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-04.png)}
[data-theme="dark"] img[src$="illustration-05.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-05.png)}
[data-theme="dark"] img[src$="illustration-06.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-06.png)}
[data-theme="dark"] img[src$="illustration-07.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-07.png)}
[data-theme="dark"] img[src$="illustration-08.png"]:not([data-theme="dark"] [data-theme="light"] *){content:url(./assets/illustrations/light/illustration-08.png)}
[data-theme="dark"] [data-pricing-band]:not([data-theme="dark"] [data-theme="light"] *){background-image:url(./assets/gradients/gradient-01.png) !important}

/* A dark surface (a deep card) is dark in light mode too, so its line illustrations are the light-line copies there as well. */
[data-surface="dark"] img[src$="illustration-01.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-01.png)}
[data-surface="dark"] img[src$="illustration-02.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-02.png)}
[data-surface="dark"] img[src$="illustration-03.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-03.png)}
[data-surface="dark"] img[src$="illustration-04.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-04.png)}
[data-surface="dark"] img[src$="illustration-05.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-05.png)}
[data-surface="dark"] img[src$="illustration-06.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-06.png)}
[data-surface="dark"] img[src$="illustration-07.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-07.png)}
[data-surface="dark"] img[src$="illustration-08.png"]:not([data-surface="dark"] [data-surface="light"] *){content:url(./assets/illustrations/light/illustration-08.png)}

@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]) :is(img[src$="wezimplify-logo-black.svg"],img[src$="wezimplify-logo-black.png"]):not([data-theme="light"] *){filter:invert(1) brightness(1.1)}
:root:not([data-theme="light"]) img[data-logo-tone="light"]:not([data-theme="light"] *){filter:brightness(0) invert(1) !important;opacity:.8 !important}
:root:not([data-theme="light"]) img[src$="illustration-01.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-01.png)}
:root:not([data-theme="light"]) img[src$="illustration-02.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-02.png)}
:root:not([data-theme="light"]) img[src$="illustration-03.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-03.png)}
:root:not([data-theme="light"]) img[src$="illustration-04.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-04.png)}
:root:not([data-theme="light"]) img[src$="illustration-05.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-05.png)}
:root:not([data-theme="light"]) img[src$="illustration-06.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-06.png)}
:root:not([data-theme="light"]) img[src$="illustration-07.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-07.png)}
:root:not([data-theme="light"]) img[src$="illustration-08.png"]:not([data-theme="light"] *){content:url(./assets/illustrations/light/illustration-08.png)}
:root:not([data-theme="light"]) [data-pricing-band]:not([data-theme="light"] *){background-image:url(./assets/gradients/gradient-01.png) !important}
}