/* ============================================================
   WAYLAND DIENSTLEISTUNGEN - Design System
   Haus & Gartenservice
   Based on business card design
   ============================================================ */


/* ============================================================
   IMPORT FONTS
   Usage: Include this file at the top of your main CSS.
   Cormorant Garamond → Logo, hero headings, display text
   Montserrat         → All UI text, labels, body, buttons
   ============================================================ */
/* Google Fonts loaded via <link rel="preload"> in HTML for non-blocking render */


:root {

  /* ==========================================================
     COLORS - Palette
     Fully monochromatic warm-neutral scale.
     No accent color by design - elegance through restraint.
     ========================================================== */

  /* Primary - used for CTAs, icons, the W monogram circle,
     accent bars, active states, and hover highlights */
  --color-primary:          #1a1a1a;

  /* Headings - page titles, section headers, card titles */
  --color-heading:          #2a2a2a;

  /* Body text - paragraphs, descriptions, list items */
  --color-text-body:        #555555;

  /* Muted - labels, captions, metadata, placeholder text */
  --color-text-muted:       #888888;

  /* Border - dividers, input outlines, card edges */
  --color-border:           #cccccc;

  /* Marble - used as accent surface (right panel on cards,
     section backgrounds, image overlays, testimonial areas) */
  --color-surface-marble:   #e8e4e0;

  /* Linen - main page background, off-white sections */
  --color-background:       #f5f3f0;

  /* White - cards, modals, nav bar, content panels */
  --color-surface-white:    #ffffff;


  /* ==========================================================
     TYPOGRAPHY - Font Families
     ========================================================== */

  /* Display font - logo, hero titles, section intros
     Always use font-weight: 300 for the premium feel */
  --font-display:     'Cormorant Garamond', Georgia, serif;

  /* UI font - everything else: nav, body, buttons, labels */
  --font-ui:          'Montserrat', Helvetica, Arial, sans-serif;


  /* ==========================================================
     TYPOGRAPHY - Font Sizes
     ========================================================== */

  --font-size-display:   32px;   /* Logo, hero headline */
  --font-size-h1:        22px;   /* Page section titles */
  --font-size-h2:        16px;   /* Card titles, subsection headers */
  --font-size-h3:        14px;   /* Service names, item titles */
  --font-size-body:      14px;   /* Paragraphs, descriptions */
  --font-size-small:     12px;   /* Contact details, meta info */
  --font-size-label:     10px;   /* Tags, badges, captions, nav labels */
  --font-size-micro:     9px;    /* Legal text, footnotes */


  /* ==========================================================
     TYPOGRAPHY - Font Weights
     Keep within 300–500. Never use 600+ - breaks the lightness.
     ========================================================== */

  --font-weight-light:    300;   /* Display text, subtitles */
  --font-weight-regular:  400;   /* Body text, captions */
  --font-weight-medium:   500;   /* Headings, buttons, nav items */


  /* ==========================================================
     TYPOGRAPHY - Letter Spacing
     Wide tracking is the primary hierarchy tool in this system.
     ========================================================== */

  --tracking-display:   2px;    /* Logo / hero display text */
  --tracking-heading:   3px;    /* Section headings (uppercase) */
  --tracking-subhead:   2px;    /* Subheadings, slogan */
  --tracking-label:     1.5px;  /* Badges, tags, nav links */
  --tracking-body:      0.5px;  /* Paragraphs */
  --tracking-micro:     1px;    /* Captions, footnotes */


  /* ==========================================================
     TYPOGRAPHY - Line Height
     ========================================================== */

  --line-height-display: 1.2;   /* Large display headings */
  --line-height-heading: 1.4;   /* Section headings */
  --line-height-body:    1.8;   /* Paragraphs and descriptions */
  --line-height-label:   1.4;   /* Labels, badges, buttons */


  /* ==========================================================
     TYPOGRAPHY - Text Transform
     All labels, buttons, nav items, and headings use uppercase.
     Body text and descriptions do NOT use uppercase.
     ========================================================== */

  --text-transform-heading: uppercase;
  --text-transform-label:   uppercase;
  --text-transform-body:    none;


  /* ==========================================================
     SPACING SCALE
     Used for padding, margin, and gap throughout the layout.
     ========================================================== */

  --space-1:   4px;    /* Tight inner padding (icon gaps, badge padding) */
  --space-2:   8px;    /* Between label and content */
  --space-3:   12px;   /* Between list items, contact rows */
  --space-4:   16px;   /* Card inner padding, form field gaps */
  --space-6:   24px;   /* Between components, section sub-spacing */
  --space-8:   32px;   /* Card padding, section padding top/bottom */
  --space-12:  48px;   /* Between page sections */
  --space-16:  64px;   /* Large section gaps, hero vertical padding */


  /* ==========================================================
     BORDERS
     Sharp and minimal - no heavy outlines.
     ========================================================== */

  --border-width-thin:    0.5px;  /* Dividers, card edges */
  --border-width-default: 1px;    /* Input fields, outlined buttons */
  --border-default: 1px solid var(--color-border);
  --border-thin:    0.5px solid var(--color-border);


  /* ==========================================================
     BORDER RADIUS
     Sharp corners reflect the business card geometry.
     Avoid large radii - they soften the premium feel.
     ========================================================== */

  --radius-none:   0px;    /* Accent bars, monogram circle container */
  --radius-sharp:  2px;    /* Buttons, badges, cards, inputs */
  --radius-circle: 50%;    /* W monogram circle, avatar icons */


  /* ==========================================================
     ACCENT ELEMENTS
     Signature design elements from the business card.
     ========================================================== */

  /* The black bar at the bottom of the marble panel */
  --accent-bar-height:      6px;
  --accent-bar-color:       var(--color-primary);

  /* Dot separator used in service lists */
  --accent-dot-size:        5px;
  --accent-dot-color:       var(--color-primary);

  /* The W monogram circle */
  --monogram-size:          72px;
  --monogram-bg:            var(--color-primary);
  --monogram-color:         #ffffff;
  --monogram-font-size:     36px;


  /* ==========================================================
     SHADOWS
     Used sparingly - only for cards and modals to lift from bg.
     ========================================================== */

  --shadow-card:  0 4px 20px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 8px 40px rgba(0, 0, 0, 0.18);


  /* ==========================================================
     TRANSITIONS
     Subtle and quick - no flashy animations.
     ========================================================== */

  --transition-fast:    150ms ease;   /* Hover states, button press */
  --transition-default: 250ms ease;   /* Panel reveals, nav dropdowns */

}


/* ============================================================
   RESPONSIVE - Mobile (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --font-size-h1:        18px;
    --font-size-h2:        15px;
    --font-size-h3:        13px;
    --space-12:  36px;
    --space-16:  48px;
    --monogram-size:       56px;
    --monogram-font-size:  28px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-h1:        16px;
    --font-size-h2:        14px;
    --font-size-h3:        12px;
    --font-size-body:      13px;
    --font-size-small:     11px;
    --space-8:   24px;
    --space-12:  28px;
    --space-16:  36px;
    --monogram-size:       44px;
    --monogram-font-size:  22px;
  }
  .btn, .btn-primary, .btn-outline, .btn-cta-light,
  .nav-phone, .nav-back, .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


/* ============================================================
   BASE STYLES
   Apply the design system defaults to HTML elements.
   ============================================================ */

body {
  font-family:      var(--font-ui);
  font-size:        var(--font-size-body);
  font-weight:      var(--font-weight-regular);
  line-height:      var(--line-height-body);
  color:            var(--color-text-body);
  background-color: var(--color-background);
  letter-spacing:   var(--tracking-body);
  -webkit-font-smoothing: antialiased;
}

/* Display - logo, hero title */
.font-display {
  font-family:    var(--font-display);
  font-weight:    var(--font-weight-light);
  letter-spacing: var(--tracking-display);
  line-height:    var(--line-height-display);
  color:          var(--color-heading);
}

/* Headings */
h1, h2, h3, h4 {
  font-family:    var(--font-ui);
  font-weight:    var(--font-weight-medium);
  text-transform: var(--text-transform-heading);
  letter-spacing: var(--tracking-heading);
  line-height:    var(--line-height-heading);
  color:          var(--color-heading);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }

/* Labels, captions, badges */
.label {
  font-size:      var(--font-size-label);
  font-weight:    var(--font-weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: var(--text-transform-label);
  color:          var(--color-text-muted);
}

/* Buttons */
.btn {
  font-family:    var(--font-ui);
  font-size:      var(--font-size-label);
  font-weight:    var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-transform: var(--text-transform-label);
  border-radius:  var(--radius-sharp);
  transition:     var(--transition-fast);
  cursor:         pointer;
}

.btn-primary {
  background: var(--color-primary);
  color:      var(--color-surface-white);
  border:     none;
  padding:    10px 24px;
}

.btn-outline {
  background: transparent;
  color:      var(--color-primary);
  border:     var(--border-default);
  padding:    10px 24px;
}

/* Cards */
.card {
  background:    var(--color-surface-white);
  border:        var(--border-thin);
  border-radius: var(--radius-sharp);
  box-shadow:    var(--shadow-card);
  padding:       var(--space-8);
}

/* Marble accent surface - use as section bg or right panel */
.surface-marble {
  background-color: var(--color-surface-marble);
}

/* W Monogram circle */
.monogram {
  width:           var(--monogram-size);
  height:          var(--monogram-size);
  border-radius:   var(--radius-circle);
  background:      var(--monogram-bg);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-display);
  font-size:       var(--monogram-font-size);
  font-weight:     var(--font-weight-light);
  color:           var(--monogram-color);
}

/* Accent bar - used at bottom of marble panel or as section divider */
.accent-bar {
  height:     var(--accent-bar-height);
  background: var(--accent-bar-color);
  border-radius: var(--radius-none);
}