/* =============================================================
   GipsVision GmbH — Design Tokens
   Brand: Premium Swiss plastering & interior finishing
   Aesthetic: Black + Gold, geometric, restrained, craftsman-luxe
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- Brand color: Gold ----------
     Sampled from the GipsVision wordmark + van livery.
     The brand gold is a warm metallic — never use a flat yellow.
     For metallic feel, combine `--gold` with `--gold-gradient`. */
  --gold-50:  #FBF3E0;
  --gold-100: #F4E3B6;
  --gold-200: #E8CE8E;
  --gold-300: #DCBA73;
  --gold-400: #D0A85F;   /* Brand gold — primary */
  --gold-500: #C49A53;
  --gold-600: #A8823F;
  --gold-700: #876631;
  --gold-800: #5E4621;
  --gold-900: #382912;

  --gold:           var(--gold-400);
  --gold-soft:      var(--gold-300);
  --gold-deep:      var(--gold-600);

  /* Signature metallic gradient — used on the logo mark, headlines on dark,
     and as accent stripes (see van livery). */
  --gold-gradient: linear-gradient(
    135deg,
    #E8CE8E 0%,
    #D0A85F 35%,
    #B5894A 65%,
    #876631 100%
  );

  /* ---------- Brand color: Black / Neutrals ----------
     Black is not pure #000 — it's a warm near-black with a hint of brown,
     pulled from the photography backgrounds. */
  --ink-0:   #FFFFFF;
  --ink-50:  #F6F4EF;   /* Off-white, paper */
  --ink-100: #ECE7DC;
  --ink-200: #D8D0C1;
  --ink-300: #A89F8E;
  --ink-400: #756C5D;
  --ink-500: #4A4438;
  --ink-600: #2E2A22;
  --ink-700: #1C1A15;   /* Warm black — page background */
  --ink-800: #121009;
  --ink-900: #0A0805;   /* Deepest — used for vignettes */

  /* ---------- Semantic ---------- */
  --bg:            var(--ink-700);
  --bg-elevated:   var(--ink-600);
  --bg-paper:      var(--ink-50);

  --fg:            var(--ink-50);
  --fg-muted:      #B7AE9C;
  --fg-subtle:     var(--ink-300);
  --fg-on-paper:   var(--ink-700);
  --fg-on-paper-muted: var(--ink-400);

  --accent:        var(--gold);
  --accent-hover:  var(--gold-300);
  --accent-press:  var(--gold-500);

  --border:        rgba(208, 168, 95, 0.18);    /* hairline gold */
  --border-strong: rgba(208, 168, 95, 0.45);
  --border-paper:  rgba(28, 26, 21, 0.10);

  --divider-gold:  linear-gradient(90deg, transparent, var(--gold-400) 50%, transparent);

  /* Status (sparingly used — this is a trade/services brand, not SaaS) */
  --success: #6F9A4E;
  --warning: #D69A3C;
  --danger:  #B14B3C;

  /* ---------- Type ----------
     Primary: Outfit (Google Fonts) — geometric, slightly wide modern sans.
       Weights 300/400/500/600/700/800. Used for ALL headings & body.
     Display accent: Cormorant Garamond italic — for pull-quotes and the
       occasional editorial headline. Sparingly only.
     No monospace in brand; system mono if needed for technical specs. */
  --font-sans: 'Outfit', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Outfit', system-ui, sans-serif;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, monospace;

  /* Tracking — the brand uses VERY generous letter-spacing on
     uppercase labels (see "QUALITÄT. PRÄZISION. PERFEKTION." and
     "GIPSERARBEITEN" labels). */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-wider: 0.18em;   /* Brand standard for uppercase eyebrows */
  --tracking-widest: 0.32em;  /* For 4-word taglines on dark */

  /* Type scale — modular 1.25 from 16px base, but display sizes lean big.
     16:9 deck headlines should sit at 88–120px. */
  --t-eyebrow:  12px;
  --t-caption:  13px;
  --t-body-sm:  14px;
  --t-body:     16px;
  --t-body-lg:  18px;
  --t-h5:       20px;
  --t-h4:       24px;
  --t-h3:       32px;
  --t-h2:       44px;
  --t-h1:       64px;
  --t-display:  96px;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  /* ---------- Spacing ---------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* ---------- Radii — restrained, mostly square ----------
     The brand is geometric and crisp. No fully rounded shapes
     except service icon dots and avatars. */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;        /* Standard card */
  --r-pill: 999px;

  /* ---------- Shadows ----------
     On dark surfaces we use *gold glow* rather than dark shadows.
     On paper, classic soft drop shadows. */
  --shadow-paper-sm: 0 1px 2px rgba(28,26,21,.08), 0 1px 1px rgba(28,26,21,.04);
  --shadow-paper-md: 0 4px 14px rgba(28,26,21,.10), 0 2px 4px rgba(28,26,21,.06);
  --shadow-paper-lg: 0 16px 40px rgba(28,26,21,.14), 0 6px 12px rgba(28,26,21,.08);

  --glow-gold-sm:   0 0 0 1px rgba(208,168,95,.20);
  --glow-gold-md:   0 0 0 1px rgba(208,168,95,.35), 0 8px 30px rgba(208,168,95,.10);
  --glow-gold-lg:   0 0 0 1px rgba(208,168,95,.45), 0 16px 60px rgba(208,168,95,.18);

  /* Vignette — used on hero photography to deepen the corners */
  --vignette: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:   180ms;
  --d-base:   280ms;
  --d-slow:   480ms;
}

/* =============================================================
   Semantic typography classes
   ============================================================= */
.gv-display {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, var(--t-display));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.gv-h1 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
}
.gv-h2 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}
.gv-h3 {
  font-family: var(--font-sans);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.gv-h4 {
  font-family: var(--font-sans);
  font-size: var(--t-h4);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.gv-h5 {
  font-family: var(--font-sans);
  font-size: var(--t-h5);
  font-weight: 600;
  line-height: var(--lh-snug);
}
.gv-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}
.gv-body-lg {
  font-family: var(--font-sans);
  font-size: var(--t-body-lg);
  font-weight: 400;
  line-height: var(--lh-relaxed);
}
.gv-caption {
  font-family: var(--font-sans);
  font-size: var(--t-caption);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}
.gv-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--gold);
}
.gv-tagline {
  /* The "QUALITÄT. PRÄZISION. PERFEKTION." treatment */
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-caption);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--gold);
}
.gv-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 36px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--fg);
}

/* Headline with gold gradient — use on dark backgrounds only */
.gv-gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}