/* ============================================================================
   VIERMOND HOLDING — colors_and_type.css
   Corporate Identity foundations: color tokens, typography, spacing, elevation.
   "Vier. Verbunden." — Mondblau & Silber, warmes Mondlicht, Messing-Akzent.
   ----------------------------------------------------------------------------
   Fonts are loaded from Google Fonts (see @import below). For production /
   offline use, self-host the same families from /fonts and remove the @import.
   ========================================================================== */

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

:root {
  /* ---------------------------------------------------------------------- *
   * 1. COLOR PRIMITIVES                                                    *
   * ---------------------------------------------------------------------- */

  /* Mondblau — primary night blue (professional, steadfast) */
  --blue-950: #131A2B;
  --blue-900: #1A2338;
  --blue-800: #1F2A44;   /* ◆ Mondblau — core brand blue */
  --blue-700: #2A3858;
  --blue-600: #374870;
  --blue-500: #4E5E86;   /* Dämmerblau */
  --blue-400: #6E7DA0;
  --blue-300: #97A3C0;
  --blue-200: #C0C8DC;
  --blue-100: #E1E5EF;
  --blue-50:  #F1F3F9;

  /* Silber — cool moonlight grey (surfaces, dividers, cool accents) */
  --silver-700: #8A93A6;
  --silver-500: #AEB7C7;
  --silver-300: #C9CFDA;  /* ◆ Silber */
  --silver-200: #DCE1E9;
  --silver-100: #ECEFF4;

  /* Mondlicht — warm sand neutrals (the warmth / familial tone) */
  --sand-50:  #FBF8F2;
  --sand-100: #F7F3EC;    /* ◆ Mondlicht — warm page paper */
  --sand-200: #EDE7D9;    /* warm section ground */
  --sand-300: #DED5C2;    /* warm hairline */
  --sand-400: #C9BBA1;
  --taupe-500:#A7977C;
  --taupe-600:#857560;
  --ink-700:  #5C5346;

  /* Messing / Mondgold — warm metallic accent (used sparingly) */
  --gold-700: #8C6F46;
  --gold-600: #A6855A;
  --gold-500: #B89668;    /* ◆ Mondgold */
  --gold-400: #CBAE85;
  --gold-300: #E0CCAB;
  --gold-100: #F2E9D8;

  --white: #FFFFFF;
  --black: #15171C;

  /* ---------------------------------------------------------------------- *
   * 2. SEMANTIC COLOR TOKENS  (use these in components)                    *
   * ---------------------------------------------------------------------- */

  /* Surfaces */
  --color-bg:             var(--sand-200);
  --color-surface:        var(--sand-50);
  --color-surface-sunken: var(--sand-300);
  --color-surface-inverse:var(--blue-800);
  --color-surface-inverse-2:var(--blue-900);

  /* Text */
  --color-fg-1:           var(--blue-900);   /* headings / primary */
  --color-fg-2:           #574E42;           /* body secondary — warm taupe ink */
  --color-fg-3:           #8B8172;           /* captions / muted — warm */
  --color-fg-inverse:     var(--sand-200);   /* text on dark blue */
  --color-fg-inverse-muted:var(--silver-300);

  /* Lines */
  --color-border:         var(--sand-300);
  --color-border-cool:    var(--silver-200);
  --color-border-strong:  var(--silver-500);
  --color-divider:        rgba(31, 42, 68, 0.10);
  --color-divider-inverse:rgba(237, 231, 217, 0.16);

  /* Brand */
  --color-primary:        var(--blue-800);
  --color-primary-hover:  var(--blue-700);
  --color-primary-active: var(--blue-950);
  --color-on-primary:     var(--sand-100);
  --color-accent:         var(--gold-500);
  --color-accent-hover:   var(--gold-600);
  --color-accent-soft:    var(--gold-100);
  --color-on-accent:      var(--blue-900);
  --color-focus:          var(--blue-500);
  --color-focus-ring:     rgba(78, 94, 134, 0.40);

  /* Status (muted, harmonized with the palette) */
  --color-success:        #4E7C5B;
  --color-success-soft:   #E6EEE7;
  --color-warning:        #B5862F;
  --color-warning-soft:   #F6ECD6;
  --color-danger:         #A6453B;
  --color-danger-soft:    #F3E1DD;
  --color-info:           var(--blue-500);
  --color-info-soft:      var(--blue-100);

  /* ---------------------------------------------------------------------- *
   * 3. TYPOGRAPHY                                                          *
   * ---------------------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --font-sans:    "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Type scale */
  --text-xs:   0.75rem;    /* 12 */
  --text-sm:   0.875rem;   /* 14 */
  --text-base: 1rem;       /* 16 */
  --text-md:   1.0625rem;  /* 17 — body default */
  --text-lg:   1.25rem;    /* 20 */
  --text-xl:   1.5rem;     /* 24 */
  --text-2xl:  1.875rem;   /* 30 */
  --text-3xl:  2.5rem;     /* 40 */
  --text-4xl:  3.25rem;    /* 52 */
  --text-5xl:  4.25rem;    /* 68 */
  --text-6xl:  5.5rem;     /* 88 */

  /* Line heights */
  --leading-tight:   1.06;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tighter: -0.03em;
  --tracking-tight:   -0.015em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.18em;   /* eyebrows, caps lockups */

  /* ---------------------------------------------------------------------- *
   * 4. SPACE / RADIUS / ELEVATION / MOTION                                 *
   * ---------------------------------------------------------------------- */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  --space-32: 128px;--space-40: 160px;

  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* Soft, cool-tinted elevation — restrained and elegant */
  --shadow-xs: 0 1px 2px rgba(31,42,68,0.06);
  --shadow-sm: 0 2px 8px rgba(31,42,68,0.06), 0 1px 2px rgba(31,42,68,0.05);
  --shadow-md: 0 8px 24px rgba(31,42,68,0.08), 0 2px 6px rgba(31,42,68,0.05);
  --shadow-lg: 0 18px 48px rgba(31,42,68,0.12), 0 6px 16px rgba(31,42,68,0.06);
  --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);
  --ring-hairline: 0 0 0 1px rgba(31,42,68,0.07);

  --dur-fast: 140ms;  /* @kind other */
  --dur:      220ms;  /* @kind other */
  --dur-slow: 420ms;  /* @kind other */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);     /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */

  --maxw-prose:   68ch;
  --maxw-content: 1200px;
}

/* ============================================================================
   SEMANTIC ELEMENT DEFAULTS
   ========================================================================== */
body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-2);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display-1, .display-2 {
  font-family: var(--font-display);
  color: var(--color-fg-1);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.display-1 { font-size: var(--text-6xl); font-weight: 500; letter-spacing: var(--tracking-tighter); }
.display-2 { font-size: var(--text-5xl); font-weight: 500; letter-spacing: var(--tracking-tighter); }
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl);  line-height: var(--leading-snug); }

h5, h6, .eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-fg-1);
  margin: 0;
}
h5 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h6 { font-size: var(--text-base); }

/* Eyebrow / kicker — spaced caps in mondblau or gold */
.eyebrow {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-accent);
  font-weight: 600;
}

/* Lead paragraph */
.lead {
  font-size: var(--text-xl);
  line-height: var(--leading-normal);
  color: var(--color-fg-2);
  font-weight: 400;
}

p { margin: 0 0 1em; max-width: var(--maxw-prose); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

.small   { font-size: var(--text-sm); }
.caption { font-size: var(--text-xs); color: var(--color-fg-3); letter-spacing: 0.01em; }

/* Pull-quote / slogan in elegant italic display */
.quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--color-fg-1);
  letter-spacing: var(--tracking-tight);
}

a { color: var(--color-primary); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-accent-hover); }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: var(--gold-300); color: var(--blue-900); }

/* Utility helpers */
.font-display { font-family: var(--font-display); }
.font-sans    { font-family: var(--font-sans); }
.italic-display { font-family: var(--font-display); font-style: italic; }