/* ============================================================
   Adelhardt Hausverwaltung — Design Tokens
   v1.0 · 2026
   ------------------------------------------------------------
   Drop in once at the root of your stylesheet. Every surface,
   component and page pattern in the style guide references
   these variables. Do not hard-code hex values downstream.
   ============================================================ */

:root {
  /* ---------- Brand ---------- */
  --ahv-teal-50:   #E8F3F0;
  --ahv-teal-100:  #C8E3DC;
  --ahv-teal-200:  #94C9BC;
  --ahv-teal-300:  #5FAE9B;
  --ahv-teal-400:  #339484;
  --ahv-teal-500:  #1A8F7E;  /* primary */
  --ahv-teal-600:  #147566;
  --ahv-teal-700:  #0F5B50;
  --ahv-teal-800:  #0A4239;
  --ahv-teal-900:  #062A24;

  --ahv-navy-50:   #EEF1F7;
  --ahv-navy-100:  #D3DAE8;
  --ahv-navy-200:  #A6B3CF;
  --ahv-navy-300:  #6F82AC;
  --ahv-navy-400:  #3F5585;
  --ahv-navy-500:  #1B3564;  /* primary text + headlines */
  --ahv-navy-600:  #162B52;
  --ahv-navy-700:  #112240;
  --ahv-navy-800:  #0B182E;
  --ahv-navy-900:  #060F1C;

  --ahv-terra-50:  #FAEEE2;
  --ahv-terra-100: #F1D5BC;
  --ahv-terra-200: #E4B187;
  --ahv-terra-300: #D68F5A;
  --ahv-terra-400: #C8763A;  /* accent */
  --ahv-terra-500: #AF6330;
  --ahv-terra-600: #8E4F26;
  --ahv-terra-700: #6B3B1C;
  --ahv-terra-800: #482812;
  --ahv-terra-900: #261408;

  /* ---------- Neutrals (warm cream/stone) ---------- */
  --ahv-cream:       #FAF7F2;  /* page background */
  --ahv-cream-soft:  #F4EFE6;  /* alt sections */
  --ahv-stone-50:    #EFEAE0;
  --ahv-stone-100:   #E4DDD0;
  --ahv-stone-200:   #CFC5B3;
  --ahv-stone-300:   #A9A08E;
  --ahv-stone-400:   #7F7867;
  --ahv-stone-500:   #5E5849;
  --ahv-stone-600:   #453F33;
  --ahv-stone-700:   #2E2A21;
  --ahv-stone-800:   #1A1812;
  --ahv-stone-900:   #0D0C08;

  --ahv-white:     #FFFFFF;
  --ahv-paper:     #FDFBF7;  /* card surface, one shade above cream */

  /* ---------- Semantic ---------- */
  --ahv-success-bg:   #E6F1EA;
  --ahv-success:      #2F7A4F;
  --ahv-success-ink:  #1C4A30;

  --ahv-warning-bg:   #FBEFD8;
  --ahv-warning:      #B7831F;
  --ahv-warning-ink:  #6E4E10;

  --ahv-error-bg:     #F7E3DF;
  --ahv-error:        #B04230;
  --ahv-error-ink:    #6B2619;

  --ahv-info-bg:      #E3ECF4;
  --ahv-info:          #2F5B8A;
  --ahv-info-ink:      #1B3B5E;

  /* ---------- Role tokens (use these, not raw brand) ---------- */
  --color-bg:            var(--ahv-cream);
  --color-bg-alt:        var(--ahv-cream-soft);
  --color-surface:       var(--ahv-paper);
  --color-surface-raised: var(--ahv-white);
  --color-border:        var(--ahv-stone-100);
  --color-border-strong: var(--ahv-stone-200);
  --color-divider:       var(--ahv-stone-50);

  --color-ink:           var(--ahv-navy-500);   /* primary text */
  --color-ink-soft:      var(--ahv-navy-400);
  --color-ink-muted:     var(--ahv-stone-500);
  --color-ink-faint:     var(--ahv-stone-400);
  --color-ink-inverse:   var(--ahv-cream);

  --color-primary:       var(--ahv-teal-500);
  --color-primary-hover: var(--ahv-teal-600);
  --color-primary-press: var(--ahv-teal-700);
  --color-primary-soft:  var(--ahv-teal-50);

  --color-accent:        var(--ahv-terra-400);
  --color-accent-hover:  var(--ahv-terra-500);
  --color-accent-soft:   var(--ahv-terra-50);

  --color-focus-ring:    color-mix(in oklab, var(--ahv-teal-500) 55%, transparent);

  /* ---------- Typography ---------- */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* Type scale — clamp'd for gentle fluidity */
  --fs-display: clamp(2.75rem, 2.2rem + 2.4vw, 4.25rem); /* 44 → 68 */
  --fs-h1:      clamp(2.125rem, 1.8rem + 1.6vw, 3rem);   /* 34 → 48 */
  --fs-h2:      clamp(1.625rem, 1.45rem + 0.9vw, 2.125rem); /* 26 → 34 */
  --fs-h3:      1.375rem;  /* 22 */
  --fs-h4:      1.125rem;  /* 18 */
  --fs-body-lg: 1.0625rem; /* 17 */
  --fs-body:    1rem;      /* 16 */
  --fs-small:   0.875rem;  /* 14 */
  --fs-xs:      0.8125rem; /* 13 */
  --fs-micro:   0.75rem;   /* 12 */

  --lh-tight:   1.15;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:   0em;
  --ls-wide:     0.02em;
  --ls-label:    0.08em; /* small caps / eyebrow */

  /* ---------- Spacing (4px base) ---------- */
  --space-0:   0;
  --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;

  /* ---------- Radii ---------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  14px;
  --radius-2xl: 20px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, warm — avoid pure black) ---------- */
  --shadow-xs: 0 1px 0 0 rgba(27, 53, 100, 0.04);
  --shadow-sm: 0 1px 2px rgba(27, 53, 100, 0.06), 0 1px 1px rgba(27, 53, 100, 0.04);
  --shadow-md: 0 2px 4px rgba(27, 53, 100, 0.05), 0 6px 12px rgba(27, 53, 100, 0.06);
  --shadow-lg: 0 8px 16px rgba(27, 53, 100, 0.06), 0 16px 32px rgba(27, 53, 100, 0.08);
  --shadow-xl: 0 12px 24px rgba(27, 53, 100, 0.08), 0 32px 56px rgba(27, 53, 100, 0.12);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -1px 0 rgba(27, 53, 100, 0.04);

  /* ---------- Motion ---------- */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-emph:     cubic-bezier(0.2, 0.0, 0, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --border-hairline: 1px solid var(--color-border);

  /* ---------- Brand pattern (SVG data-URI) ---------
     Very subtle diagonal rule, Stone-50 on transparent.
     Use as background on large cream blocks; never on text surfaces. */
  --pattern-weave:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M0 48 L48 0' stroke='%23E4DDD0' stroke-width='0.6' stroke-opacity='0.55'/><path d='M-12 12 L12 -12 M36 60 L60 36' stroke='%23E4DDD0' stroke-width='0.6' stroke-opacity='0.35'/></svg>");
  --pattern-grid:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M32 0 L0 0 L0 32' fill='none' stroke='%23E4DDD0' stroke-width='0.5' stroke-opacity='0.5'/></svg>");
}

/* ============================================================
   Language-aware text defaults.
   Apply .text-de to any block of user-facing German prose to
   enable native hyphenation for compound words. Headlines,
   body text, card titles, form labels — all benefit.
   ============================================================ */
:lang(de), .text-de {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 8 4 4; /* min 8 chars, 4 before, 4 after */
  hyphenate-limit-lines: 2;
  word-break: normal;
  overflow-wrap: break-word;
}
/* Opt out for tables of figures, IDs, nav, code */
.no-hyphens, .no-hyphens * , code, .num, .type-mono, th, .chip {
  hyphens: manual;
  -webkit-hyphens: manual;
}