/* ════════════════════════════════════════════════════════════════════════
   Murikual design system — tokens
   Ported from the Claude Design project "Murikual website UI mockups"
   (_ds/murikual-design-system-8c94dd43…). Font families are declared here;
   the faces themselves are linked from index.html.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Type families ─────────────────────────────────────────────────────── */
:root{
  --font-display:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-sans:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;
  --font-serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-mono:'Space Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

/* ── Colour ────────────────────────────────────────────────────────────────
   Warm editorial neutrals + the brand periwinkle-blue taken from the logo
   (#4F74FF). The "aurora" fade is recoloured to harmonise with the blue. */
:root{
  /* Warm neutrals — base ramp */
  --warm-000:#FFFFFF;
  --warm-050:#FAF7F2;   /* page paper */
  --warm-100:#F3EEE6;   /* sunken / alt section */
  --warm-150:#ECE5DA;
  --warm-200:#E2D9CC;   /* hairline on paper */
  --warm-300:#CBBFAE;
  --warm-400:#A99C88;
  --warm-500:#8A8074;   /* muted text */
  --warm-600:#6B6357;
  --warm-700:#4A443B;   /* secondary text */
  --warm-800:#2A251E;
  --warm-900:#17140F;   /* ink — warm near-black */
  --warm-950:#0E0C09;   /* darkest / inverse surface */

  /* Brand blue ramp (accent) — centred on the logo colour #4F74FF */
  --brand-050:#EEF1FF;
  --brand-100:#DEE4FF;
  --brand-200:#C2CDFF;
  --brand-300:#9DAEFF;
  --brand-400:#7389FF;
  --brand-500:#4F74FF;  /* primary accent — logo colour */
  --brand-600:#3355E6;  /* hover / pressed */
  --brand-700:#2440B0;
  --cream:#F3EAD3;      /* warm cream fill (pairs with the blue) */

  /* Aurora fade palette (signature) */
  --aurora-mist:#EEF1FF;
  --aurora-sky:#DCE6FF;
  --aurora-peri:#C7D2FF;
  --aurora-iris:#AFBEFF;
  --aurora-champagne:#F3E7D6;

  /* Status (warm-tuned) */
  --green-500:#3F7D4E;  --green-050:#E7F0E9;
  --amber-500:#C9871F;  --amber-050:#F8ECCF;
  --red-500:#C0442F;    --red-050:#F8E1DB;
  --info-500:#3355E6;   --info-050:#DEE4FF;

  /* Semantic aliases */
  --surface-page:var(--warm-050);
  --surface-card:var(--warm-000);
  --surface-sunken:var(--warm-100);
  --surface-inverse:var(--warm-950);
  --surface-accent:var(--brand-500);
  --surface-accent-soft:var(--brand-050);
  --surface-cream:var(--cream);

  --text-primary:var(--warm-900);
  --text-secondary:var(--warm-700);
  --text-muted:var(--warm-500);
  --text-accent:var(--brand-600);
  --text-on-accent:#FFFFFF;
  --text-on-dark:#F2ECE1;
  --text-on-dark-muted:rgba(242,236,225,0.62);

  --border-subtle:var(--warm-200);
  --border-strong:var(--warm-300);
  --border-on-dark:rgba(242,236,225,0.16);
  --focus-ring:rgba(79,116,255,0.45);

  --accent:var(--brand-500);
  --accent-hover:var(--brand-600);
  --accent-tint:var(--brand-050);
}

/* ── Typography scale ──────────────────────────────────────────────────── */
:root{
  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;
  --fw-heavy:800;

  --fs-display-2xl:88px;
  --fs-display-xl:68px;
  --fs-display-lg:52px;
  --fs-h1:40px;
  --fs-h2:32px;
  --fs-h3:25px;
  --fs-h4:20px;
  --fs-body-lg:18px;
  --fs-body:16px;
  --fs-body-sm:14px;
  --fs-caption:13px;
  --fs-eyebrow:12px;

  --lh-tight:0.98;
  --lh-snug:1.1;
  --lh-heading:1.15;
  --lh-body:1.55;
  --lh-relaxed:1.7;

  --ls-display:-0.03em;
  --ls-heading:-0.02em;
  --ls-body:0em;
  --ls-eyebrow:0.16em;

  --text-display-2xl:var(--fw-bold) var(--fs-display-2xl)/var(--lh-tight) var(--font-display);
  --text-display-xl:var(--fw-bold) var(--fs-display-xl)/var(--lh-tight) var(--font-display);
  --text-display-lg:var(--fw-bold) var(--fs-display-lg)/var(--lh-snug) var(--font-display);
  --text-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display);
  --text-h2:var(--fw-semibold) var(--fs-h2)/var(--lh-heading) var(--font-display);
  --text-h3:var(--fw-semibold) var(--fs-h3)/var(--lh-heading) var(--font-display);
  --text-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-display);
  --text-body-lg:var(--fw-regular) var(--fs-body-lg)/var(--lh-body) var(--font-sans);
  --text-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
  --text-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-sans);
  --text-caption:var(--fw-regular) var(--fs-caption)/1.4 var(--font-sans);
}

/* ── Spacing, radii, shadows, motion — 4px base grid ───────────────────── */
:root{
  --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;

  --container-max:1200px;
  --container-wide:1360px;
  --gutter:24px;
  --section-y:96px;

  --radius-xs:4px;
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:28px;
  --radius-2xl:40px;
  --radius-pill:999px;

  --border-hair:1px;
  --border-thick:1.5px;

  --shadow-ring:0 0 0 1px rgba(23,20,15,0.08);
  --shadow-xs:0 1px 2px rgba(23,20,15,0.06);
  --shadow-sm:0 1px 2px rgba(23,20,15,0.05),0 2px 6px rgba(23,20,15,0.07);
  --shadow-md:0 2px 4px rgba(23,20,15,0.05),0 10px 24px rgba(23,20,15,0.09);
  --shadow-lg:0 8px 20px rgba(23,20,15,0.08),0 24px 60px rgba(23,20,15,0.14);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  --ease-out:cubic-bezier(0.22,0.61,0.36,1);
  --ease-in-out:cubic-bezier(0.65,0.05,0.36,1);
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:360ms;
}

/* ── Signature gradients ───────────────────────────────────────────────── */
:root{
  --gradient-aurora:linear-gradient(90deg,var(--aurora-mist) 0%,var(--aurora-peri) 26%,var(--aurora-iris) 48%,var(--aurora-peri) 68%,var(--aurora-champagne) 90%,var(--aurora-mist) 100%);
  --gradient-bloom:radial-gradient(120% 90% at 50% 45%,var(--aurora-iris) 0%,var(--aurora-champagne) 38%,rgba(250,247,242,0) 72%);
  --gradient-veil-top:linear-gradient(180deg,var(--surface-page) 0%,rgba(250,247,242,0) 100%);
  --gradient-veil-bottom:linear-gradient(0deg,var(--surface-page) 0%,rgba(250,247,242,0) 100%);
  --gradient-brand:linear-gradient(135deg,var(--brand-400) 0%,var(--brand-600) 100%);
  --gradient-ink:radial-gradient(120% 120% at 20% 0%,#231F18 0%,var(--warm-950) 60%);
}

/* ── Base / reset ──────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font:var(--text-body);
  color:var(--text-primary);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6,p,figure{margin:0}
h1,h2,h3,h4{color:var(--text-primary);text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--text-accent);text-decoration:none;transition:color var(--dur) var(--ease-out)}
a:hover{color:var(--accent-hover)}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
/* ── Dark mode ─────────────────────────────────────────────────────────────
   One definition. Each page used to carry its own copy scoped to its root
   class (.v6/.kt/.ab/.lg), and the home page's --text-muted had drifted to
   .4 against .42 on the other three. */
.mk-dark{--surface-page:var(--warm-950);--surface-card:var(--warm-900);--surface-sunken:rgba(242,236,225,.05);--text-primary:var(--text-on-dark);--text-secondary:var(--text-on-dark-muted);--text-muted:rgba(242,236,225,.42);--border-subtle:var(--border-on-dark)}

::selection{background:var(--brand-200);color:var(--warm-900)}
:focus-visible{outline:none;box-shadow:var(--shadow-focus);border-radius:var(--radius-sm)}

/* ── Button — the design system's Button component, as CSS ─────────────── */
.mk-btn{
  display:inline-flex;align-items:center;justify-content:center;
  letter-spacing:0.01em;white-space:nowrap;
  border-radius:var(--radius-pill);cursor:pointer;
  transition:background var(--dur) var(--ease-out),
             border-color var(--dur) var(--ease-out),
             filter var(--dur) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.mk-btn:hover{transform:translateY(-1px)}
.mk-btn--sm{height:36px;padding:0 16px;gap:8px;font:var(--fw-semibold) var(--fs-body-sm)/1 var(--font-sans)}
.mk-btn--lg{height:54px;padding:0 28px;gap:12px;font:var(--fw-semibold) var(--fs-body)/1 var(--font-sans)}
/* Doubled class on the variants so the button's own colour outranks the
   page-wide `.v6 a{color:inherit}` reset when the button is a link. */
.mk-btn.mk-btn--primary{background:var(--warm-900);color:var(--text-on-dark);border:1px solid var(--warm-900)}
.mk-btn.mk-btn--primary:hover{background:var(--brand-600);border-color:var(--brand-600);color:#fff}
/* The primary button is near-black on a light page, which is the whole idea.
   In dark mode the page is --warm-950 and the button is --warm-900: a 3%
   difference, so "Start a project" stopped looking like a button at all. Dark
   mode takes the hover blue as its resting state — the colour the button
   already moves to, so nothing new is introduced. */
.mk-dark .mk-btn.mk-btn--primary{background:var(--brand-500);border-color:var(--brand-500);color:#fff}
.mk-dark .mk-btn.mk-btn--primary:hover{background:var(--brand-400);border-color:var(--brand-400)}

/* The floating nav hides on the way down and returns on the way up; site.js
   toggles the class. Declared here so every page's pill behaves the same. */
/* Slide only — no opacity. Fading it back in meant that for a few hundred
   milliseconds the pill was translucent and the text scrolling underneath
   showed straight through it. */
[data-navbar]{transition:transform .45s var(--ease-out)}
[data-navbar].nav-hidden{transform:translateY(-160%)}

/* ── Language switch ───────────────────────────────────────────────────────
   Each served page holds one language; the switch is an <a> to the same page
   in the other tree. It used to be a button over sibling .t-en/.t-de spans,
   which meant the other language existed only after JS ran — invisible to a
   search engine and to the AI crawlers that do not run JS at all.
   The rule below is what an <a> needs to sit in the pill like the button did. */
[class$="-lang"]{display:inline-flex;align-items:center;text-decoration:none}

/* The footer's legal links sat in the copyright row in the same colour, with
   no underline — indistinguishable from the © text beside them, on a blue that
   put them at 3.82:1. Full white and underlined: they read as links, and pass. */
.mk-legal-link{color:#fff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.55);transition:text-decoration-color var(--dur) var(--ease-out)}
.mk-legal-link:hover{text-decoration-color:#fff}