/* =============================================================================
   Dr. Wenzel — Theme Tokens
   Hautarztpraxis in Meerbusch · "Ihre Haut in besten Händen"
   Extracted from https://drwenzel.neorebels.com (Bricks Builder + Advanced Themer).
   Reference snapshots: reference/*.mhtml. Format modelled on andfold-theme.css;
   all values are the site's real, measured tokens.
   ============================================================================= */

:root {
  /* --- Brand palette: PRIMARY (dusty taupe) --- */
  --at-primary:      #a39685;   /* hsl(34,14%,58%) */
  --at-primary-l-1:  #b2a798;
  --at-primary-l-2:  #c0b7ac;
  --at-primary-l-3:  #cfc8bf;
  --at-primary-l-4:  #ded9d2;
  --at-primary-l-5:  #ece9e6;
  --at-primary-l-6:  #fbfaf9;
  --at-primary-d-1:  #8a7f71;
  --at-primary-d-2:  #72685c;
  --at-primary-d-3:  #595248;
  --at-primary-d-4:  #403b34;   /* warm ink */
  --at-primary-d-5:  #28241f;   /* espresso */
  --at-primary-d-6:  #0f0d0b;

  /* --- Brand palette: SECONDARY (warm walnut brown) --- */
  --at-secondary:     #725e43;  /* hsl(34,26%,36%) */
  --at-secondary-l-1: #897861;
  --at-secondary-l-2: #a09280;
  --at-secondary-l-3: #b7ac9e;
  --at-secondary-l-4: #cdc6bc;
  --at-secondary-l-5: #e4e0db;
  --at-secondary-l-6: #fbfaf9;
  --at-secondary-d-1: #625139;
  --at-secondary-d-2: #514330;
  --at-secondary-d-3: #413626;  /* cocoa */
  --at-secondary-d-4: #31281c;
  --at-secondary-d-5: #201b13;
  --at-secondary-d-6: #100d09;

  /* --- Brand palette: NEUTRAL (warm oat / linen) --- */
  --at-neutral:      #e8e1d3;   /* oat — hsl(40,31%,87%) */
  --at-neutral-l-1:  #ebe5d9;
  --at-neutral-l-2:  #eee9df;
  --at-neutral-l-3:  #f2eee6;
  --at-neutral-l-4:  #f5f2ec;
  --at-neutral-l-5:  #f8f6f2;   /* linen — page canvas */
  --at-neutral-l-6:  #fbfaf8;   /* paper — lifted cards */
  --at-neutral-d-1:  #c4beb1;
  --at-neutral-d-2:  #a09b90;
  --at-neutral-d-3:  #7d786e;   /* muted body / metadata text */
  --at-neutral-d-4:  #59544c;
  --at-neutral-d-5:  #35312b;   /* body ink / footer */
  --at-neutral-d-6:  #110e09;   /* deepest ink */

  /* --- White / Black (with transparency ladders used by the framework) --- */
  --at-white:    #ffffff;
  --at-white-t-1: hsla(0,0%,100%,0.84);
  --at-white-t-2: hsla(0,0%,100%,0.68);
  --at-white-t-3: hsla(0,0%,100%,0.53);
  --at-white-t-4: hsla(0,0%,100%,0.37);
  --at-white-t-5: hsla(0,0%,100%,0.21);
  --at-white-t-6: hsla(0,0%,100%,0.05);
  --at-black:    #000000;
  --at-black-t-1: hsla(0,0%,0%,0.84);
  --at-black-t-2: hsla(0,0%,0%,0.68);
  --at-black-t-3: hsla(0,0%,0%,0.53);
  --at-black-t-4: hsla(0,0%,0%,0.37);
  --at-black-t-5: hsla(0,0%,0%,0.21);
  --at-black-t-6: hsla(0,0%,0%,0.05);

  /* --- Semantic states (warm) --- */
  --at-success: #52d15a;
  --at-danger:  #e65151;
  --at-warning: #db9f66;

  /* --- Convenience role aliases --- */
  --color-canvas:       var(--at-neutral-l-5);  /* page background */
  --color-surface:      var(--at-neutral-l-6);  /* card background  */
  --color-band:         var(--at-neutral);      /* tinted section band */
  --color-ink:          var(--at-neutral-d-5);  /* body text */
  --color-ink-muted:    var(--at-neutral-d-3);  /* secondary text */
  --color-heading:      var(--at-primary-d-4);  /* headings */
  --color-accent:       var(--at-primary);      /* brand taupe */
  --color-accent-deep:  var(--at-secondary);    /* brand walnut */
  --color-dark-section: var(--at-primary-d-4);

  /* --- Typography: families --- */
  --font-velour: "Velour", Georgia, "Times New Roman", serif;          /* display / headings / nav / buttons */
  --font-inter:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* body / UI */
  --font-display: var(--font-velour);
  --font-body:    var(--font-inter);

  /* --- Typography: fluid scale (clamp between 360px and 1600px viewports) --- */
  --at-heading--2xs: clamp(0.78rem, 0.72rem + 0.28vw, 1.05rem);   /* 12.5 → 16.8px */
  --at-heading--xs:  clamp(0.95rem, 0.88rem + 0.30vw, 1.25rem);   /* 15.2 → 20px   */
  --at-heading--s:   clamp(1.15rem, 1.05rem + 0.42vw, 1.50rem);   /* 18.4 → 24px   */
  --at-heading--m:   clamp(1.40rem, 1.27rem + 0.55vw, 1.875rem);  /* 22.4 → 30px   */
  --at-heading--l:   clamp(1.70rem, 1.50rem + 0.70vw, 2.30rem);   /* 27.2 → 36.8px */
  --at-heading--xl:  clamp(2.10rem, 1.85rem + 0.90vw, 2.90rem);   /* 33.6 → 46.4px */

  --at-text--s:   clamp(0.875rem, 0.85rem + 0.13vw, 0.9375rem);   /* 14 → 15px (body base; 15px @1280) */
  --at-text--2xs: calc(var(--at-text--s) * 0.64);
  --at-text--xs:  calc(var(--at-text--s) * 0.8);
  --at-text--m:   calc(var(--at-text--s) * 1.25);
  --at-text--l:   calc(var(--at-text--s) * 1.563);
  --at-text--xl:  calc(var(--at-text--s) * 1.953);

  --leading-heading: 1.15;
  --leading-body:    1.65;   /* airier, editorial — matches reference's generous body leading */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* --- Spacing: fluid modular scale (multiples of --at-space--s) --- */
  --at-space--s:   clamp(0.625rem, 0.55rem + 0.42vw, 1.25rem);  /* 10 → 20px */
  --at-space--3xs: calc(var(--at-space--s) * 0.296);
  --at-space--2xs: calc(var(--at-space--s) * 0.444);
  --at-space--xs:  calc(var(--at-space--s) * 0.667);
  --at-space--m:   calc(var(--at-space--s) * 1.5);
  --at-space--l:   calc(var(--at-space--s) * 2.25);
  --at-space--xl:  calc(var(--at-space--s) * 3.375);
  --at-space--2xl: calc(var(--at-space--s) * 5.063);
  --at-space--3xl: calc(var(--at-space--s) * 7.594);
  --at-section-padding-block: clamp(3.5rem, 2.8rem + 3vw, 7.5rem); /* ~56→120px — airier, editorial rhythm */
  --at-container-gap: var(--at-space--l);
  --at-content-gap:   var(--at-space--s);
  --at-grid-gap:      var(--at-space--s);

  /* --- Border radius: subtle (NOT pills for content) --- */
  --at-radius--s:   clamp(0.3125rem, 0.28rem + 0.21vw, 0.625rem); /* 5 → 10px */
  --at-radius--2xs: calc(var(--at-radius--s) * 0.382);
  --at-radius--xs:  calc(var(--at-radius--s) * 0.618);
  --at-radius--m:   calc(var(--at-radius--s) * 1.618);   /* cards */
  --at-radius--l:   calc(var(--at-radius--s) * 2.618);
  --at-radius--xl:  calc(var(--at-radius--s) * 4.236);
  --at-radius-full: 999rem;                              /* avatars / circular only */

  /* --- Layout --- */
  --at-site-box-max-width: 1200px;
  --at-blog-width: 900px;
  --at-grid-auto-col-min-width: 270px;
  --at-border-width: 1px;
  --at-border-color: var(--at-black-t-5);
  --at-border--standard: var(--at-border-width) solid var(--at-border-color);

  /* --- Shadows --- */
  --at-shadow--s:  rgba(0,0,0,0.1) 0px 1px 3px 0px,  rgba(0,0,0,0.06) 0px 1px 2px 0px;
  --at-shadow--m:  rgba(0,0,0,0.1) 0px 4px 6px -1px, rgba(0,0,0,0.06) 0px 2px 4px -1px;
  --at-shadow--l:  rgba(0,0,0,0.1) 0px 10px 15px -3px, rgba(0,0,0,0.05) 0px 4px 6px -2px;
  --at-shadow--xl: rgba(0,0,0,0.1) 0px 20px 25px -5px, rgba(0,0,0,0.04) 0px 10px 10px -5px;
  --at-shadow--2xl: rgba(0,0,0,0.25) 0px 25px 50px -12px;

  /* --- Motion --- */
  --at-duration--fast:   0.2s;
  --at-duration--medium: 0.5s;
  --at-duration--slow:   1.5s;
  --at-easing-standard:  ease;
  --at-easing-inout:     ease-in-out;
  --at-easing-reveal:    cubic-bezier(0.77, 0, 0.175, 1);
  --at-btn-transition:   all var(--at-duration--fast) ease;

  /* --- Buttons --- */
  --at-btn-border-radius: var(--at-radius--s);
  --at-btn-border-width: 2px;
  --at-btn-primary-color:            var(--at-primary-l-6);
  --at-btn-primary-background:       var(--at-primary);
  --at-btn-primary-background--hover: var(--at-primary-d-1);
  --at-btn-secondary-color:            var(--at-secondary-l-6);
  --at-btn-secondary-background:       var(--at-secondary);
  --at-btn-secondary-background--hover: var(--at-secondary-d-1);
  --at-btn-shadow--hover: var(--at-shadow--l);

  /* --- Breakpoints (reference values) --- */
  --breakpoint-lg: 991px;
  --breakpoint-md: 767px;
  --breakpoint-sm: 479px;
}

/* =============================================================================
   Tailwind v4 — drop-in @theme mirror
   ============================================================================= */
@theme {
  /* Colors */
  --color-primary: #a39685;
  --color-primary-light: #ece9e6;
  --color-primary-dark: #403b34;
  --color-secondary: #725e43;
  --color-secondary-dark: #413626;
  --color-oat: #e8e1d3;
  --color-linen: #f8f6f2;
  --color-paper: #fbfaf8;
  --color-ink: #544c42;        /* warm dark taupe — softer than near-black, ~6.6:1 on canvas (readable) */
  --color-ink-muted: #6b6459;  /* warm secondary text, still AA on canvas */
  --color-soot: #110e09;
  --color-success: #52d15a;
  --color-danger: #e65151;
  --color-warning: #db9f66;

  /* Typography */
  --font-display: "Velour", Georgia, "Times New Roman", serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-heading-2xs: clamp(0.80rem, 0.72rem + 0.36vw, 1.20rem);
  --text-heading-xs:  clamp(1.00rem, 0.90rem + 0.44vw, 1.50rem);
  --text-heading-s:   clamp(1.25rem, 1.13rem + 0.56vw, 1.875rem);
  --text-heading-m:   clamp(1.5625rem, 1.41rem + 0.69vw, 2.34rem);
  --text-heading-l:   clamp(1.953rem, 1.76rem + 0.87vw, 2.93rem);
  --text-heading-xl:  clamp(2.44rem, 2.20rem + 1.09vw, 3.66rem);
  --text-body:        clamp(0.9375rem, 0.91rem + 0.13vw, 1.125rem);

  /* Radius */
  --radius-s: clamp(0.3125rem, 0.28rem + 0.21vw, 0.625rem);
  --radius-m: calc(var(--radius-s) * 1.618);
  --radius-l: calc(var(--radius-s) * 2.618);
  --radius-full: 999rem;

  /* Shadows */
  --shadow-s:  0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
  --shadow-m:  0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -1px rgba(0,0,0,.06);
  --shadow-l:  0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);

  /* Breakpoints */
  --breakpoint-sm: 479px;
  --breakpoint-md: 767px;
  --breakpoint-lg: 991px;
}