/* Bodenbeläge Voigt — aus den Token-Dateien zusammengesetzt. */
/* tokens/fonts.css */
/* Barlow — the brand typeface, taken from the embedded fonts in social_ad_2025.pdf
   (Barlow-Light, Barlow-SemiBold, Barlow-Bold). Latin subset, self-hosted. */
@font-face{font-family:"Barlow";font-style:normal;font-weight:300;font-display:swap;src:url("/assets/fonts/barlow-300-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/barlow-400-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/barlow-500-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-600-latin.woff2") format("woff2")}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/barlow-700-latin.woff2") format("woff2")}

/* tokens/colors.css */
/* COLORS — every base value is sampled from logo_final.pdf or social_ad_2025.pdf.
   Values marked (derived) are interpolations we added for UI needs; they are not in the source art. */
:root{
  /* Logo, light variant (logo_final.pdf p.1–2) */
  --voigt-ink:#262626;
  --voigt-slate:#3f4b49;
  --voigt-taupe:#aba493;

  /* Logo, dark variant (logo_final.pdf p.3) */
  --voigt-off-white:#f5f5f5;
  --voigt-sage:#849b97;
  --voigt-taupe-light:#c6beac;

  /* Social ad ground — vertical gradient, top to bottom (social_ad_2025.pdf) */
  --voigt-forest-600:#3c4d4a;
  --voigt-forest-700:#33413f;
  --voigt-forest-800:#2c3937;
  --voigt-forest-900:#242e2d;

  /* Social ad accent: warm cream. Headlines, rules, check badges, the parquet line motif. */
  --voigt-cream:#ffebc8;
  --voigt-white:#ffffff;

  /* (derived) warm neutrals for light surfaces */
  --voigt-paper:#f7f5f1;
  --voigt-paper-2:#ece8e1;
  --voigt-stone:#d5d0c6;
  --voigt-slate-muted:#6b7472;

  /* (derived) semantic states — the sources define none */
  --voigt-success:#4b7a5e;
  --voigt-warning:#b2853f;
  --voigt-danger:#a14b3c;

  /* Surfaces */
  --surface-page:var(--voigt-white);
  --surface-muted:var(--voigt-paper);
  --surface-sunken:var(--voigt-paper-2);
  --surface-card:var(--voigt-white);
  --surface-inverse:var(--voigt-forest-700);
  --surface-inverse-strong:var(--voigt-forest-900);
  --surface-gradient-forest:linear-gradient(180deg,var(--voigt-forest-600) 0%,var(--voigt-forest-900) 100%);
  --surface-scrim:linear-gradient(180deg,rgba(36,46,45,.55) 0%,rgba(36,46,45,.82) 100%);

  /* Text */
  --text-heading:var(--voigt-ink);
  --text-body:var(--voigt-slate);
  --text-muted:var(--voigt-slate-muted);
  --text-accent:var(--voigt-taupe);
  --text-on-dark:var(--voigt-white);
  --text-on-dark-heading:var(--voigt-cream);
  --text-on-dark-muted:var(--voigt-taupe-light);
  --text-on-accent:var(--voigt-forest-900);

  /* Lines & borders — hairlines only, never heavy frames */
  --border-hairline:rgba(38,38,38,.14);
  --border-strong:var(--voigt-slate);
  --border-on-dark:rgba(255,235,200,.38);
  --border-accent:var(--voigt-cream);
  --rule-weight:2px;

  /* Interactive */
  --accent:var(--voigt-cream);
  --btn-primary-bg:var(--voigt-cream);
  --btn-primary-fg:var(--voigt-forest-900);
  --btn-primary-bg-hover:#fff3dc;
  --btn-primary-bg-active:#f0d9b1;
  --btn-solid-bg:var(--voigt-slate);
  --btn-solid-fg:var(--voigt-white);
  --btn-solid-bg-hover:#4b5957;
  --btn-solid-bg-active:#33413f;
  --btn-ghost-fg:var(--voigt-white);
  --btn-ghost-border:rgba(255,255,255,.55);
  --focus-ring:var(--voigt-taupe);
}

/* tokens/typography.css */
/* TYPOGRAPHY — Barlow only. Weight pairing from social_ad_2025.pdf:
   Light 300 for running copy, SemiBold 600 for headlines and labels, Bold 700 for the
   wordmark and inline emphasis (e-mail address). Uppercase + tracking carries hierarchy. */
:root{
  --font-sans:"Barlow","Helvetica Neue",Arial,sans-serif;
  --font-display:var(--font-sans);
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Scale — ratios lifted from the 1080px ad canvas (34/40/60), retuned for screen */
  --text-2xs:12px;
  --text-xs:13px;
  --text-sm:15px;
  --text-base:17px;
  --text-lg:20px;
  --text-xl:24px;
  --text-2xl:30px;
  --text-3xl:40px;
  --text-4xl:54px;
  --text-5xl:72px;
  --text-6xl:96px;

  --leading-tight:1.04;
  --leading-snug:1.18;
  --leading-normal:1.4;
  --leading-body:1.55;
  --leading-loose:1.7;

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-label:0.08em;   /* uppercase section labels: WAS WIR BIETEN: */
  --tracking-wide:0.14em;    /* service line: Teppich - PVC - Parkett */
  --tracking-wordmark:0.2em; /* BODENBELÄGE above the VOIGT wordmark */

  /* Composed roles */
  --type-display:var(--weight-semibold) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-semibold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-h2:var(--weight-semibold) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-label:var(--weight-semibold) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-body:var(--weight-light) var(--text-base)/var(--leading-body) var(--font-sans);
  --type-body-lg:var(--weight-light) var(--text-lg)/var(--leading-body) var(--font-sans);
  --type-small:var(--weight-light) var(--text-sm)/var(--leading-normal) var(--font-sans);
  --type-button:var(--weight-semibold) var(--text-sm)/1 var(--font-sans);
}

/* tokens/spacing.css */
/* SPACING — 4px base. The ad keeps a 75/1080 ≈ 7% page gutter and an 80px rhythm
   between checklist rows; --space-gutter and --space-row carry that proportion to screen. */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:48px;
  --space-11:64px;
  --space-12:80px;
  --space-13:96px;
  --space-14:128px;

  --space-gutter:clamp(20px,7vw,80px);
  --space-row:var(--space-7);
  --space-section:clamp(48px,8vw,120px);
  --measure:62ch;
  --container-max:1400px;
  --container-narrow:760px;
}

/* tokens/shape.css */
/* SHAPE — the brand is cut, not rounded: parallelograms, diamonds, hairlines.
   Square corners are the default; the only true curve in the system is a full circle
   (the cream check badge in the ad). Use --radius-pill only for that badge family. */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-pill:999px;
  --radius-circle:50%;

  /* Angles of the brand's cuts, measured off the logo's bar motif and the ad's diamonds */
  --angle-bar:22.5deg; /* @kind other */   /* the parallel-bar wedge */
  --angle-diamond:45deg; /* @kind other */ /* photo diamonds and the parquet line motif */

  /* Elevation — the source art is flat. Shadows exist only to lift interactive
     surfaces on light backgrounds; never on the forest ground. */
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-card:0 1px 2px rgba(38,38,38,.05),0 12px 28px -12px rgba(38,38,38,.16);
  --shadow-raised:0 2px 4px rgba(38,38,38,.06),0 20px 44px -16px rgba(38,38,38,.22);
  --shadow-inset-top:inset 0 2px 0 0 var(--voigt-cream);
}

/* tokens/motion.css */
/* MOTION — restrained and mechanical. Opacity and small translations only;
   no bounce, no scale-up, no spring. Press states shift 1px down, never shrink. */
:root{
  --ease-standard:cubic-bezier(.2,.6,.2,1); /* @kind other */
  --ease-out:cubic-bezier(.16,.84,.44,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,.75,0); /* @kind other */
  --duration-instant:80ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --duration-reveal:720ms; /* @kind other */
  --transition-interactive:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),transform var(--duration-instant) var(--ease-standard); /* @kind other */
}
@media (prefers-reduced-motion:reduce){
  :root{--duration-fast:0ms; /* @kind other */ --duration-base:0ms; /* @kind other */ --duration-slow:0ms; /* @kind other */ --duration-reveal:0ms /* @kind other */}
}

/* tokens/motifs.css */
/* MOTIFS — the three brand devices, as CSS utilities.
   1. voigt-bars      parallel bar wedges from logo_final.pdf p.1 (top-right / bottom-left corners)
   2. voigt-parquet   herringbone parquet texture (5:1 strips) · voigt-linedecor: the ad's exact line art
   3. voigt-diamond   45deg photo frame with a hairline outline and an inset gap
   4. voigt-rule      the cream hairline under the wordmark */
:root{
  --bars-size:clamp(120px,18vw,260px);
  --parquet-scale:260px;
  --parquet-opacity:.5; /* @kind other */
}

/* 1 — Bars. Decorative only: always aria-hidden, never over body copy. */
.voigt-bars{position:absolute;width:var(--bars-size);aspect-ratio:164.2132/137.5841;background-repeat:no-repeat;background-size:contain;pointer-events:none}
.voigt-bars--tr{top:0;right:0;background-image:url("/assets/bars-corner.svg")}
.voigt-bars--bl{bottom:0;left:0;transform:rotate(180deg);background-image:url("/assets/bars-corner.svg")}
.voigt-bars--light.voigt-bars--tr,.voigt-bars--light.voigt-bars--bl{background-image:url("/assets/bars-corner-light.svg")}

/* 2 — Parquet. Long 5:1 strips at 45deg, behind content at low contrast. */
.voigt-parquet{background-image:url("/assets/patterns/herringbone-cream.svg");background-repeat:repeat;background-size:var(--parquet-scale) var(--parquet-scale);opacity:var(--parquet-opacity)}
.voigt-parquet--slate{background-image:url("/assets/patterns/herringbone-slate.svg")}
.voigt-parquet--flat{background-image:url("/assets/patterns/herringbone-flat-cream.svg")}

/* 2b — Exact ad line art, anchored top-right of a positioned parent. */
.voigt-linedecor{position:absolute;top:0;right:0;width:clamp(160px,24vw,324px);aspect-ratio:324/730;background:url("/assets/ad-decor-cream.svg") no-repeat;background-size:contain;pointer-events:none}
.voigt-linedecor--slate{background-image:url("/assets/ad-decor-slate.svg")}

/* 3 — Diamond photo frame. Rotated square, hairline outline, image inset so the
   outline reads as a separate line (exactly as the two photos in the ad). */
.voigt-diamond{position:relative;aspect-ratio:1;rotate:45deg;border:var(--rule-weight) solid var(--border-accent);overflow:hidden;isolation:isolate}
.voigt-diamond>img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:cover;rotate:-45deg;scale:1.42}

/* 4 — Rules */
.voigt-rule{border:0;height:var(--rule-weight);background:var(--voigt-cream)}
.voigt-rule--dark{background:var(--voigt-slate)}
.voigt-rule--hairline{height:1px;background:var(--border-hairline)}

/* Forest ground: the brand's signature dark panel */
.voigt-forest{background:var(--surface-gradient-forest);color:var(--text-on-dark)}

/* tokens/base.css */
/* BASE — minimal element defaults so a bare page already reads as Voigt. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font:var(--type-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{margin:0;color:var(--text-heading);text-wrap:balance}
h1{font:var(--type-h1)}
h2{font:var(--type-h2)}
h3{font:var(--type-h3)}
p{margin:0;text-wrap:pretty}
a{color:var(--voigt-slate);text-decoration-color:var(--voigt-taupe);text-underline-offset:3px}
a:hover{color:var(--voigt-ink);text-decoration-color:var(--voigt-ink)}
.voigt-forest a,a.on-dark{color:var(--voigt-cream);text-decoration-color:rgba(255,235,200,.45)}
.voigt-forest a:hover,a.on-dark:hover{color:var(--voigt-white);text-decoration-color:var(--voigt-white)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
img{max-width:100%;display:block}
::selection{background:var(--voigt-cream);color:var(--voigt-forest-900)}