/* ============================================================
   JALES — feine Motive · Design Tokens
   Wandbild-Manufaktur in Münster
   ============================================================
   Fonts load from local variable-font files in /fonts/.
   No Google Fonts CDN dependency. @font-face paths resolve
   relative to this CSS file (project root), so they work
   from any HTML file that links here.
   ============================================================ */

/* Cormorant Garamond — upright (100–900 variable) */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Cormorant Garamond — italic (100–900 variable) */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Manrope — variable (100–900) */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand palette ----------
     JALES leads with a deep, hand-mixed manufaktur green. The neutral
     warm scale (ivory / linen / charcoal) supports it. A restrained
     warm amber adds a single hand-finished accent. The iris tint is
     held in reserve for iris-product moments only. */

  --jales-charcoal:      #1F1A14;   /* primary ink — body text, footer anchor */
  --jales-ink-3:         #3A342B;   /* secondary text */
  --jales-ink-2:         #5A5246;   /* tertiary text / soft body */
  --jales-warm-grey:     #6B6155;   /* metadata, label color on light bg — darkened for WCAG-AA legibility */

  --jales-ivory:         #F8F4EC;   /* primary background — warm cream */
  --jales-paper:         #FFFFFF;   /* card surface, photo mat */
  --jales-linen:         #E8DFCC;   /* hairlines, soft divider */
  --jales-linen-2:       #F3EEE2;   /* alt section background */
  --jales-hair:          #D8CDB6;   /* even softer hairline */

  /* Primary brand color — deep manufaktur green */
  --jales-forest:        #2A3F33;   /* signature brand green */
  --jales-forest-deep:   #1E2D24;   /* hover / pressed */
  --jales-forest-soft:   #4A6552;   /* lighter — badge tints, hover glow */
  --jales-forest-tint:   #E3E8DF;   /* very soft green wash for selected rows */

  /* Warm accent — restrained, decorative */
  --jales-amber:         #B8873A;   /* eyebrows, hairlines, heart, warm-action CTA */
  --jales-amber-soft:    #D4A85A;   /* highlight, hover variant */
  --jales-amber-deep:    #A07530;   /* pressed / hover-darken */
  --jales-amber-text:    #8C6420;   /* AA-safe amber for SMALL TEXT on light bg (≈4.85:1 on ivory) */

  /* Optional subtle iris tint — use rarely, only inside iris-specific moments */
  --jales-iris-tint:     #1E3A5F;   /* deep iris-photography accent, sparingly */

  /* ---------- Semantic colors ---------- */
  --bg:            var(--jales-ivory);
  --bg-alt:        var(--jales-linen-2);
  --bg-surface:    var(--jales-paper);
  --bg-inverse:    var(--jales-forest);    /* signature dark brand surface */
  --bg-anchor:     var(--jales-charcoal);  /* deepest anchor — footer only */

  --fg:            var(--jales-charcoal);
  --fg-soft:       var(--jales-ink-2);
  --fg-muted:      var(--jales-warm-grey);
  --fg-on-dark:    var(--jales-ivory);

  --accent:        var(--jales-forest);        /* PRIMARY brand action */
  --accent-hover:  var(--jales-forest-deep);
  --accent-soft:   var(--jales-forest-soft);

  --accent-warm:        var(--jales-amber);    /* WARM decorative accent */
  --accent-warm-hover:  var(--jales-amber-deep);
  --accent-warm-soft:   var(--jales-amber-soft);

  --border:        var(--jales-linen);
  --border-soft:   var(--jales-hair);
  --border-strong: var(--jales-charcoal);

  /* ---------- Typography ----------
     The brand voice is led by Cormorant Garamond (display serif) and
     carried by Manrope (sans / UI). Allura is loaded only because the
     bundled logo SVGs reference it — it MUST NOT be used in UI copy.
     For a soft handwritten warmth inside a serif headline, use
     --font-accent (Cormorant Garamond Italic) and the .accent-italic
     helper or the <ScriptAccent> JSX component. */
  --font-serif:  "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --font-accent: "Cormorant Garamond", Garamond, serif;  /* used italic — see ScriptAccent / .accent-italic */
  --font-script: "Allura", "Snell Roundhand", "Apple Chancery", cursive;  /* legacy logo SVG assets only; not used in UI */
  --font-sans:   "Manrope", "Helvetica Neue", Arial, sans-serif;
  --font-mono:   ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Display scale — serif, used for headlines.
     Each size shipped twice:
       --display-1            : desktop literal (used by .display-1)
       --display-1-mobile     : mobile literal
       --display-1-fluid      : clamp() — use for production responsive headlines */
  --display-1:         500 64px/1.05 var(--font-serif);
  --display-1-mobile:  500 40px/1.1  var(--font-serif);
  --display-1-fluid:   500 clamp(40px, 6vw, 64px)/1.05 var(--font-serif);

  --display-2:         500 48px/1.08 var(--font-serif);
  --display-2-mobile:  500 32px/1.15 var(--font-serif);
  --display-2-fluid:   500 clamp(32px, 5vw, 48px)/1.08 var(--font-serif);

  --h1:                500 48px/1.12 var(--font-serif);
  --h1-mobile:         500 32px/1.18 var(--font-serif);
  --h1-fluid:          500 clamp(32px, 4.5vw, 48px)/1.12 var(--font-serif);

  --h2:                500 36px/1.18 var(--font-serif);
  --h2-mobile:         500 26px/1.22 var(--font-serif);
  --h2-fluid:          500 clamp(26px, 3.6vw, 36px)/1.18 var(--font-serif);

  --h3:                500 26px/1.25 var(--font-serif);
  --h3-mobile:         500 20px/1.3  var(--font-serif);
  --h3-fluid:          500 clamp(20px, 2.4vw, 26px)/1.25 var(--font-serif);

  /* Body — sans. Mobile keeps body legible; intro drops by 1px only. */
  --body-lg:           400 18px/1.65 var(--font-sans);
  --body-lg-mobile:    400 17px/1.6  var(--font-sans);
  --body:              400 16px/1.6  var(--font-sans);
  --body-sm:           400 14px/1.55 var(--font-sans);

  /* Eyebrow / labels — uppercase, wide-tracking sans */
  --eyebrow:   600 12px/1.4   var(--font-sans);   /* + letter-spacing .18em + uppercase */
  --label:     500 11px/1.4   var(--font-sans);   /* + letter-spacing .22em + uppercase */
  --caption:   400 12px/1.5   var(--font-sans);

  /* Script — for hand-warm accents like "feine Motive", "das Schönste" */
  --script-xl: 400 96px/1.05  var(--font-script);
  --script-lg: 400 56px/1.1   var(--font-script);
  --script-md: 400 32px/1.15  var(--font-script);

  /* Mono — for receipts, SKUs, dimensions */
  --mono:      400 13px/1.5   var(--font-mono);

  /* ---------- Spacing ----------
     Base scale (4 → 120) is constant. Section padding tokens are
     responsive — they shrink on tablet & mobile to keep the layout
     practical. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 88px;
  --space-10: 120px;

  /* Responsive section padding — vertical air between sections.
     Mobile (≤640px) → tablet (≤1024px) → desktop. */
  --section-pad-sm: clamp(48px, 7vw, 64px);   /* tight band  · footer separators */
  --section-pad-md: clamp(56px, 8vw, 88px);   /* normal band · most sections */
  --section-pad-lg: clamp(64px, 10vw, 120px); /* hero / consult CTA / iris feature */

  /* Container horizontal padding (page edge) */
  --container-pad: clamp(20px, 4vw, 48px);

  /* Gap tokens (grids / flex) — slightly tighten on mobile */
  --gap-tight:  clamp(12px, 1.6vw, 16px);
  --gap-base:   clamp(16px, 2.4vw, 24px);
  --gap-wide:   clamp(20px, 3vw, 32px);
  --gap-section: clamp(40px, 6vw, 80px);  /* between hero columns, etc. */

  /* ---------- Radii ---------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  /* All shadows tinted with charcoal for warmth — never pure black. */
  --shadow-1: 0 1px 2px rgba(31,26,20,.05);
  --shadow-2: 0 1px 3px rgba(31,26,20,.06), 0 6px 16px rgba(31,26,20,.06);
  --shadow-3: 0 1px 3px rgba(31,26,20,.06), 0 18px 48px rgba(31,26,20,.10);
  /* Wall-art "frame on wall" — the canvas/print preview signature shadow */
  --shadow-canvas: 0 24px 48px -16px rgba(31,26,20,.28), 0 8px 16px -8px rgba(31,26,20,.18);

  /* ---------- Hairlines & dividers ---------- */
  --hairline: 1px solid var(--border);
  --hairline-soft: 1px solid var(--border-soft);
  --hairline-amber: 1px solid var(--accent);
  --hairline-dashed: 1px dashed var(--border-soft);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-out: cubic-bezier(.16,.84,.34,1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 480ms;

  /* ---------- Layout ---------- */
  --maxw-content: 1480px;
  --maxw-prose:   680px;
  --header-h: 84px;
}

/* Sprungziele nicht unter den Sticky-Header rutschen lassen */
:target {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* ============================================================
   Element defaults — opt-in by adding the .jales class to <body>
   or wrapping content in <div class="jales">.
   ============================================================ */

.jales,
.jales * { box-sizing: border-box; }

.jales {
  background: var(--bg);
  color: var(--fg);
  font: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.jales h1 { font: var(--h1-fluid); margin: 0 0 var(--space-4); letter-spacing: -0.005em; }
.jales h2 { font: var(--h2-fluid); margin: 0 0 var(--space-4); letter-spacing: -0.005em; }
.jales h3 { font: var(--h3-fluid); margin: 0 0 var(--space-3); }
.jales .display-1 { font: var(--display-1-fluid); letter-spacing: -0.005em; }
.jales .display-2 { font: var(--display-2-fluid); letter-spacing: -0.005em; }
.jales p  { margin: 0 0 var(--space-4); color: var(--fg-soft); }
.jales p.lead { font: var(--body-lg); color: var(--fg-soft); max-width: var(--maxw-prose); }
.jales small, .jales .caption { font: var(--caption); color: var(--fg-muted); }

/* Italic-serif accent — use sparingly on a single warm word inside a serif headline.
   This replaces the old script accent. Restrained, modern, premium. */
.jales .script,
.jales .accent-italic {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
}

/* Eyebrow / label — always in warm amber, the restrained decorative accent */
.jales .eyebrow {
  font: var(--eyebrow);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--jales-amber-text);
}
.jales .label {
  font: var(--label);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Amber hairline divider — the signature JALES rule (stays amber as warm accent) */
.jales .rule-amber {
  height: 1px;
  background: var(--accent-warm);
  width: 64px;
  border: 0;
  margin: var(--space-4) 0;
}

/* SVG icon helper classes (the bundled logo SVGs reference these) */
.serif { font-family: var(--font-serif); font-weight: 500; }
.sans  { font-family: var(--font-sans);  font-weight: 400; }