/* MARKIS theme — design tokens.
   Ported 1:1 from the claude.ai "MARKIS Design System" (design-system/tokens/*),
   plus an alias layer that maps the carried webview.js variable names onto these
   MARKIS tokens so the demo renderer is recoloured without editing its CSS. */

/* All custom properties live on one :root block (grouped by concern with the
   comments below) so the same selector is never declared twice — Sonar S4666. */
:root {
  /* ---- Colors ----
     MARKIS palette v3 (customer round 2026-07-14): old-site salmon returns;
     walnut is retired from background roles. */
  /* Brand yellow + red sampled from the actual MARKIS logo/favicon (#F1ED3B / #E2000B) */
  --yellow-50:#FDFCE2; --yellow-100:#FAF7B4; --yellow-200:#F6F284; --yellow-300:#F3EF57;
  --yellow-400:#F1ED3B; --yellow-500:#D4CF1E; --yellow-600:#A8A413; --yellow-700:#7E7B0E;
  --red-50:#FDE9EA; --red-100:#FBC8CA; --red-200:#F69A9E; --red-250:#F47E83; --red-300:#F26168;
  --red-400:#EC2630; --red-500:#E2000B; --red-600:#BC0009; --red-700:#8E0007;
  /* Old-site salmon family */
  --salmon-100:#FFF1F0; --salmon-200:#FFDBDB; --salmon-300:#FFB9B9; --salmon-500:#FF7878;
  /* Walnut / amber wood - retained for compatible references */
  --wood-900:#2A241D; --wood-800:#3D2C1C; --wood-700:#5C3F27; --wood-600:#6B4A2E;
  --wood-500:#8A5E3A; --wood-400:#A85715; --wood-300:#C46A1F; --wood-200:#E9C9A4; --wood-100:#F2E7D4;
  /* Warm ink ladder (text + light neutrals) */
  --ink-900:#1A1A1A; --ink-800:#2C2A28; --ink-700:#44403B; --ink-600:#5F5950;
  --ink-500:#7C746A; --ink-400:#A89F92; --ink-300:#CFC7B8; --ink-200:#E7E0D2; --ink-100:#F2ECE0;
  --white:#FFFFFF;

  --brand-yellow:var(--yellow-400); --brand-red:var(--red-500); --brand-wood:var(--wood-700);
  /* Darkened one more step (customer 2026-07-16: "as dark as possible, generally
     across the whole site"). Binding constraint is regular-weight ink-800 body
     paragraphs sitting directly on these (the intro blurb, section sub-labels) -
     WCAG normal-text floor is 4.5:1. red-200 measures 6.83:1 (real margin, not the
     bare edge); red-250 (one step darker, for the panel band) measures 5.55:1 -
     still a full point above the floor for continuous reading text. */
  --bg-page:var(--red-200);           /* pink page wash */
  --bg-panel:var(--red-250);          /* darker panel band */
  --bg-dark:var(--red-600);           /* deep red for remaining dark surfaces */
  --header-bg:var(--brand-yellow);    /* navbar = logo yellow, like the building banners */
  /* Pushed one step redder than salmon-500 (customer: "as red as possible while black
     text stays readable"). Binding constraint is .mk-hero__lead - 22px/700 on ink-800,
     WCAG "large text" (AAA floor 4.5:1). red-300 measures 4.55:1 vs ink-800 / 5.54:1 vs
     the h1's ink-900 - the reddest existing token that still clears AAA-large; the next
     step (red-400, 3.33:1 vs ink-800) drops below it. */
  --hero-bg:var(--red-300);
  --footer-bg:var(--salmon-500); --footer-ink:var(--ink-900); --whatsapp:#25D366;
  --surface-card:var(--salmon-100); --surface-sunk:var(--ink-100);
  --text-strong:var(--ink-900); --text-body:var(--ink-800); --text-muted:var(--ink-700); --text-faint:var(--ink-500);
  --text-on-red:var(--white); --text-on-yellow:var(--ink-900);
  --text-on-dark:#FFF6F0; --text-on-dark-muted:#FFD9D9;
  --border-soft:var(--ink-200); --border-mid:var(--ink-300); --border-strong:var(--wood-700);
  --accent:var(--brand-red); --accent-hover:var(--red-600); --accent-press:var(--red-700);
  --highlight:var(--brand-yellow); --highlight-hover:var(--yellow-500);
  --status-instock-bg:#E4F3E2; --status-instock-text:#1F7A2E;
  --status-sold-bg:var(--red-500); --status-sold-text:var(--white);
  --focus-ring:var(--red-500);

  /* ---- Typography (design-system/tokens/typography.css) — fonts self-hosted in fonts.css ---- */
  --font-display:"Roboto Slab","Georgia","Times New Roman",serif;
  --font-body:"Hanken Grotesk","Segoe UI",system-ui,sans-serif;
  --text-3xs:0.75rem; --text-2xs:0.8125rem; --text-xs:0.875rem; --text-sm:1rem; --text-md:1.125rem;
  --text-lg:1.375rem; --text-xl:1.75rem; --text-2xl:2.25rem; --text-3xl:3rem; --text-4xl:3.75rem;
  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extra:800;
  --leading-tight:1.08; --leading-snug:1.22; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.02em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-caps:0.08em;

  /* ---- Spacing / radius / shadow / layout (design-system/tokens/spacing.css) ---- */
  --space-1:0.25rem; --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
  --space-6:2rem; --space-7:3rem; --space-8:4rem; --space-9:6rem;
  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
  --tap-min:48px; --tap-comfortable:56px;
  --shadow-sm:0 1px 2px rgba(40,30,10,0.06),0 1px 3px rgba(40,30,10,0.08);
  --shadow-md:0 2px 6px rgba(40,30,10,0.07),0 6px 16px rgba(40,30,10,0.10);
  --shadow-lg:0 8px 24px rgba(40,30,10,0.12),0 18px 48px rgba(40,30,10,0.14);
  --shadow-yellow:0 6px 18px rgba(247,198,0,0.35);
  --shadow-red:0 6px 18px rgba(204,0,0,0.28);
  --container-max:1200px; --container-pad:var(--space-4); --header-h:68px;
  --ease-out:cubic-bezier(0.22,0.61,0.36,1); --ease-spring:cubic-bezier(0.34,1.4,0.64,1);
  --dur-fast:130ms; --dur-mid:240ms; --dur-slow:380ms;

  /* ---- Alias layer: carried webview.js variable names -> MARKIS tokens ----
     (palette v3 paper aliases point at the salmon page and panel roles.) */
  --paper:var(--bg-page); --paper-deep:var(--bg-panel); --card:var(--surface-card); --line:var(--border-soft);
  --amber:var(--brand-red); --amber-deep:var(--red-600); --walnut:var(--ink-900);
  --sage:var(--ink-500); --coal:var(--ink-900); --coal-soft:var(--ink-600); --sold:var(--red-500);
  --shadow:var(--shadow-md); --display:var(--font-display); --body:var(--font-body);
}

/* ---- Base (design-system/tokens/base.css) ---- */
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; font-family:var(--font-body); font-size:var(--text-md); line-height:var(--leading-normal);
  color:var(--text-body); background:var(--bg-page); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--text-strong); line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight); margin:0; font-weight:var(--weight-bold); }
p { margin:0; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent-hover); }
button { font-family:inherit; }
:focus-visible { outline:3px solid var(--focus-ring); outline-offset:2px; border-radius:4px; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
::selection { background:var(--yellow-200); color:var(--ink-900); }
html { scroll-behavior:smooth; }
img { max-width:100%; }