/* =============================================================
   WALZPUNKT AG — colors & typography
   Single source of truth for the brand design system.

   Sourced from:
   - Walzpunkt codebase: src/styles/_tokens.scss
   - Brand pack: assets/brand/colors-reference.png

   PRINCIPLE: this is a tools-and-workshop brand. Hand-feel, not
   showroom-feel. Hairlines + ink-deep backgrounds + a single
   warm metallic gradient. No ornament.
   ============================================================= */

/* ----- Fonts ----- */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter.ttf") format("truetype-variations"),
       url("fonts/Inter.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pirulen";
  src: url("fonts/Pirulen.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------
     COLOR — brand
     The three metallics are the brand. They appear together as a
     left→right gradient on the wordmark + every hairline divider
     that wants to feel "branded". Solo usage is rare.
     ------------------------------------------------------------ */
  --wp-bronze: #a05a28;   /* RGB 160 90 40   — darkest metal */
  --wp-gold:   #d79b41;   /* RGB 215 155 65  — workhorse accent */
  --wp-cream:  #fffaaa;   /* RGB 255 250 170 — warm highlight */

  /* ------------------------------------------------------------
     COLOR — surface (dark default; the brand is dark-first)
     ------------------------------------------------------------ */
  --wp-ink:        #0f0f1e; /* RGB 15 15 30  — primary background */
  --wp-ink-soft:   #161629; /* +1 elevated surface (cards on dark) */
  --wp-ink-deep:   #07070f; /* -1 hero / footer / print sheet bg */

  /* ------------------------------------------------------------
     COLOR — surface (light, for documents and tabular UI)
     The PDF templates print on a dark sheet, but most internal
     workshop tooling (lists, forms, repair logs) reads better on
     a paper surface. These provide that.
     ------------------------------------------------------------ */
  --wp-paper:      #f7f3e8; /* warm off-white, matches cream family */
  --wp-paper-soft: #efe9d6;
  --wp-paper-line: #d9d1b9;
  --wp-paper-ink:  #1c1c1c; /* primary text on paper */
  --wp-paper-mute: #5d564a;

  /* ------------------------------------------------------------
     COLOR — text (on dark surfaces)
     ------------------------------------------------------------ */
  --wp-text:       #ece7d3; /* warm off-white */
  --wp-text-mute:  rgba(236, 231, 211, 0.62);
  --wp-text-dim:   rgba(236, 231, 211, 0.40);

  /* ------------------------------------------------------------
     COLOR — lines (the brand uses hairlines, never thick borders)
     ------------------------------------------------------------ */
  --wp-line:        rgba(215, 155, 65, 0.16);  /* gold @ 16% */
  --wp-line-soft:   rgba(255, 250, 170, 0.08); /* cream @  8% */
  --wp-line-strong: rgba(215, 155, 65, 0.45);  /* gold @ 45% (focused) */

  /* ------------------------------------------------------------
     COLOR — semantic / status
     Kept very close to the brand temperature on purpose so
     status dots feel like part of the system, not stickers.
     ------------------------------------------------------------ */
  --wp-status-ok:    #6ea36a; /* sage; OK / running / lieferbar */
  --wp-status-warn:  #d79b41; /* gold; aufmerksamkeit / wartung fällig */
  --wp-status-err:   #b6533a; /* terracotta-red; stillstand / defekt */
  --wp-status-info:  #6f88a3; /* slate-blue; in arbeit / pending */
  --wp-status-mute:  #5d564a; /* archived */

  /* ------------------------------------------------------------
     BRAND GRADIENT
     bronze → gold → cream, left-to-right. Stop at 55% gold so
     the cream sliver feels like a highlight, not a separate
     swatch. This is THE brand mark used in:
       - the logo (Combo-Color)
       - hairline-top on hero sections
       - underline-grow under nav links
       - gradient-text on accent words
     ------------------------------------------------------------ */
  --wp-grad-brand: linear-gradient(90deg,
    var(--wp-bronze) 0%,
    var(--wp-gold) 55%,
    var(--wp-cream) 100%);
  --wp-grad-brand-soft: linear-gradient(90deg,
    rgba(160, 90, 40, 0.85) 0%,
    rgba(215, 155, 65, 0.85) 55%,
    rgba(255, 250, 170, 0.85) 100%);
  --wp-grad-radial: radial-gradient(120% 80% at 50% 0%,
    rgba(215, 155, 65, 0.18) 0%,
    rgba(215, 155, 65, 0) 60%);

  /* ------------------------------------------------------------
     TYPE — families
     Pirulen is reserved for the WORDMARK and oversized display
     headlines (e.g. flyer cover title "WALZBOARD"). It is too
     mechanical to read past ~30pt. Everything else is Inter.
     ------------------------------------------------------------ */
  --wp-font-mark:    "Pirulen", "Inter", system-ui, sans-serif;
  --wp-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wp-font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --wp-font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ------------------------------------------------------------
     TYPE — scale (fluid; values below are the design intent)
     The brand has very wide display headlines (up to 5.5rem) and
     compact eyebrows. Keep mid-range type unfussy.
     ------------------------------------------------------------ */
  --wp-fs-eyebrow:    0.72rem;   /* 11.5px — uppercase, tracked */
  --wp-fs-small:      0.85rem;
  --wp-fs-body:       1.0625rem; /* 17px — site body */
  --wp-fs-body-lg:    1.15rem;
  --wp-fs-h4:         1.05rem;
  --wp-fs-h3:         clamp(1.4rem, 2vw, 1.85rem);
  --wp-fs-h2:         clamp(1.6rem, 3vw, 2.2rem);
  --wp-fs-h1:         clamp(2.25rem, 5vw, 3.5rem);
  --wp-fs-display:    clamp(2.75rem, 8vw, 5.5rem);

  --wp-lh-tight:      1.02;
  --wp-lh-snug:       1.18;
  --wp-lh-body:       1.55;
  --wp-lh-loose:      1.7;

  --wp-tracking-tight:   -0.025em;  /* display */
  --wp-tracking-snug:    -0.015em;  /* section headings */
  --wp-tracking-normal:   0em;
  --wp-tracking-wide:     0.08em;   /* numerical tags */
  --wp-tracking-eyebrow:  0.18em;   /* uppercase eyebrows */

  /* ------------------------------------------------------------
     SPACING — geometric scale (4-based, paired with mm for print)
     ------------------------------------------------------------ */
  --wp-space-1: 0.25rem;
  --wp-space-2: 0.5rem;
  --wp-space-3: 0.75rem;
  --wp-space-4: 1rem;
  --wp-space-5: 1.25rem;
  --wp-space-6: 1.5rem;
  --wp-space-8: 2rem;
  --wp-space-10: 2.5rem;
  --wp-space-12: 3rem;
  --wp-space-16: 4rem;
  --wp-space-24: 6rem;

  --wp-section-pad: clamp(4rem, 9vw, 8rem);

  /* ------------------------------------------------------------
     LAYOUT
     ------------------------------------------------------------ */
  --wp-page-max:  1200px;
  --wp-page-pad:  clamp(1.25rem, 4vw, 2.5rem);

  /* ------------------------------------------------------------
     RADII — small. Brand is industrial. Pills are reserved
     for buttons / nav chips. Everything structural is 4–14px.
     ------------------------------------------------------------ */
  --wp-radius-sm: 4px;   /* image cards, table rows, spec cells */
  --wp-radius:    8px;   /* default — buttons, inputs, small cards */
  --wp-radius-md: 14px;  /* large cards */
  --wp-radius-lg: 24px;  /* feature blocks */
  --wp-radius-pill: 999px;

  /* ------------------------------------------------------------
     SHADOWS
     Dark UI: shadows are deep + black, NOT colored.
     The only "glow" is a thin gold ring on the focused element.
     ------------------------------------------------------------ */
  --wp-shadow-card:
    0 1px 0 rgba(255, 250, 170, 0.04) inset,
    0 12px 40px rgba(0, 0, 0, 0.45);
  --wp-shadow-deep: 0 24px 60px rgba(0, 0, 0, 0.55);
  --wp-shadow-glow:
    0 0 0 1px rgba(215, 155, 65, 0.35),
    0 12px 60px rgba(215, 155, 65, 0.18);
  --wp-shadow-print: 0 20px 50px rgba(0, 0, 0, 0.65);

  /* ------------------------------------------------------------
     MOTION
     Calm, glassy, never bouncy. Power easing curve, ~280ms.
     ------------------------------------------------------------ */
  --wp-ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --wp-dur:    280ms;
  --wp-dur-lg: 520ms;
  --wp-dur-xl: 700ms;
}

/* ============================================================
   SEMANTIC TYPE — drop-in classes
   These are the typographic patterns the brand actually uses on
   pages. Use these instead of inventing new combinations.
   ============================================================ */

.wp-eyebrow {
  display: inline-block;
  font-family: var(--wp-font-display);
  font-size: var(--wp-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--wp-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--wp-text-mute);
}

.wp-display {
  font-family: var(--wp-font-display);
  font-weight: 600;
  font-size: var(--wp-fs-display);
  letter-spacing: var(--wp-tracking-tight);
  line-height: var(--wp-lh-tight);
  color: var(--wp-cream);
  margin: 0;
}

.wp-h1 {
  font-family: var(--wp-font-display);
  font-weight: 600;
  font-size: var(--wp-fs-h1);
  letter-spacing: var(--wp-tracking-snug);
  line-height: var(--wp-lh-snug);
  color: var(--wp-cream);
  margin: 0;
}

.wp-h2 {
  font-family: var(--wp-font-display);
  font-weight: 600;
  font-size: var(--wp-fs-h2);
  letter-spacing: var(--wp-tracking-snug);
  line-height: 1.2;
  color: var(--wp-cream);
  margin: 0 0 1rem;
}

.wp-h3 {
  font-family: var(--wp-font-display);
  font-weight: 600;
  font-size: var(--wp-fs-h3);
  letter-spacing: var(--wp-tracking-snug);
  line-height: 1.15;
  color: var(--wp-cream);
  margin: 0;
}

.wp-body {
  font-family: var(--wp-font-body);
  font-size: var(--wp-fs-body);
  line-height: var(--wp-lh-body);
  color: var(--wp-text);
}

.wp-lede {
  font-family: var(--wp-font-body);
  font-size: var(--wp-fs-body-lg);
  line-height: var(--wp-lh-body);
  color: var(--wp-text-mute);
  max-width: 56ch;
  text-wrap: pretty;
}

.wp-mono {
  font-family: var(--wp-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.wp-wordmark {
  font-family: var(--wp-font-mark);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Gradient ink: the only place we paint type the brand colors */
.wp-accent {
  background: var(--wp-grad-brand);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
}

/* ============================================================
   PRIMITIVES
   ============================================================ */

.wp-rule {
  height: 1px;
  background: var(--wp-line);
  border: 0;
}

.wp-rule-brand {
  height: 1px;
  background: var(--wp-grad-brand);
  opacity: 0.55;
  border: 0;
}

/* Selection — warm gold tint */
::selection {
  background: rgba(215, 155, 65, 0.35);
  color: var(--wp-cream);
}