@charset "UTF-8";
/* ==========================================================================
   Haut im Fokus — Design Tokens
   Warm-modern system built on the practice's existing brand hues:
   dermis (teal, H180) · karotin (sand/amber, H72) · erythem (blush, H18)
   Hex values ship first; OKLCH refines them where supported.
   ========================================================================== */

:root {
  /* ---- Brand: teal (dermis) ------------------------------------------- */
  --c-teal-900: #00332c;
  --c-teal-800: #004037;   /* logo ink */
  --c-teal-700: #0a5c50;
  --c-teal-600: #0f8175;   /* primary heading */
  --c-teal-500: #23a094;
  --c-teal-400: #5cc9bd;   /* bright mint — secondary heading */
  --c-teal-300: #8fdfd4;
  --c-teal-200: #b6ece4;   /* mint highlight panel */
  --c-teal-100: #d9f5f0;
  --c-teal-050: #eefbf8;

  /* ---- Warm accent: sand / clay (karotin) ------------------------------ */
  --c-sand-700: #7a5a1c;
  --c-sand-600: #a8802e;
  --c-sand-500: #c79a3f;
  --c-sand-400: #e0be74;
  --c-sand-300: #f0dcab;   /* live CTA surface */
  --c-sand-200: #f7ead0;
  --c-sand-100: #fbf5e8;

  /* ---- Blush (erythem) — the hexagon pattern --------------------------- */
  --c-blush-400: #f0a894;
  --c-blush-300: #f6c5b6;
  --c-blush-200: #fadfd6;
  --c-blush-100: #fdf0eb;

  /* ---- Warm neutrals (never cool grey) -------------------------------- */
  --c-ink:       #241f1b;
  --c-ink-soft:  #4b443d;
  --c-muted:     #635c57;
  --c-faint:     #6e6762;
  --c-line:      #e4ded5;
  --c-line-soft: #efeae2;
  --c-paper:     #fbf8f3;
  --c-oat:       #f5efe6;
  --c-surface:   #ffffff;

  /* ---- Semantic roles -------------------------------------------------- */
  --bg:              var(--c-paper);
  --bg-surface:      var(--c-surface);
  --bg-sunk:         var(--c-oat);
  --text:            var(--c-ink-soft);
  --text-strong:     var(--c-ink);
  --text-muted:      var(--c-muted);
  --text-faint:      var(--c-faint);
  --heading:         var(--c-teal-700);
  --heading-display: var(--c-teal-800);
  --heading-soft:    var(--c-teal-500);
  --border:          var(--c-line);
  --border-soft:     var(--c-line-soft);
  --accent:          var(--c-teal-700);
  --accent-ink:      var(--c-teal-800);
  --accent-warm:     var(--c-sand-700);
  --focus:           var(--c-teal-600);
  --on-accent:       #ffffff;

  --state-error:   #a4342a;
  --state-success: var(--c-teal-700);
  --state-notice:  var(--c-sand-700);

  /* ---- Typography ------------------------------------------------------ */
  --font-sans: "Jost", "Jost Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.2rem, 1.42rem + 2.6vw, 3.35rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.1vw, 3.3rem);
  --fs-h2:      clamp(1.7rem, 1.32rem + 1.35vw, 2.5rem);
  --fs-h3:      clamp(1.18rem, 1.09rem + 0.32vw, 1.38rem);
  --fs-h4:      clamp(1.02rem, 0.98rem + 0.16vw, 1.12rem);
  --fs-lead:    clamp(1.14rem, 1.05rem + 0.34vw, 1.36rem);
  --fs-body:    clamp(1.0rem, 0.975rem + 0.11vw, 1.075rem);
  --fs-small:   0.9375rem;
  --fs-tiny:    0.8125rem;
  --fs-eyebrow: 0.75rem;
  --fs-quote:   clamp(1.4rem, 1.08rem + 1.15vw, 2.05rem);

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.68;
  --lh-loose: 1.78;

  --tracking-display: -0.022em;
  --tracking-head:    -0.014em;
  --tracking-eyebrow:  0.155em;

  --weight-light: 300;
  --weight-book:  400;
  --weight-medium: 500;
  --weight-semi:  600;

  /* ---- Space scale (structural meaning, not decoration) ---------------- */
  --sp-3xs: 0.25rem;
  --sp-2xs: 0.5rem;
  --sp-xs:  0.75rem;
  --sp-s:   1rem;
  --sp-m:   1.5rem;
  --sp-l:   2.25rem;
  --sp-xl:  3.25rem;
  --sp-2xl: clamp(3.5rem, 2.6rem + 3.2vw, 5.5rem);
  --sp-3xl: clamp(5rem, 3.4rem + 5.6vw, 8.5rem);

  /* ---- Layout ---------------------------------------------------------- */
  --gutter:  clamp(1.25rem, 0.7rem + 2.4vw, 2.75rem);
  --measure: 66ch;
  --wide:    1180px;
  --shell:   1340px;

  /* ---- Geometry & material -------------------------------------------- */
  --radius-xs: 4px;
  --radius-s:  8px;
  --radius-m:  14px;
  --radius-l:  22px;
  --radius-pill: 999px;
  --hairline: 1px;

  --shadow-xs: 0 1px 2px rgba(36, 31, 27, 0.05);
  --shadow-s:  0 2px 10px -4px rgba(36, 31, 27, 0.10);
  --shadow-m:  0 14px 34px -22px rgba(36, 31, 27, 0.30), 0 2px 8px -6px rgba(36, 31, 27, 0.14);
  --shadow-l:  0 34px 70px -40px rgba(19, 60, 54, 0.38), 0 6px 18px -14px rgba(36, 31, 27, 0.16);

  /* ---- Motion ---------------------------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.75, 0.3, 1);
  --ease-soft:  cubic-bezier(0.4, 0.05, 0.2, 1);
  --dur-fast:   140ms;
  --dur-base:   260ms;
  --dur-slow:   520ms;
  --dur-reveal: 760ms;

  /* ---- Layering (disciplined, no z-50 spam) ---------------------------- */
  --z-base: 0;
  --z-decor: 1;
  --z-raised: 10;
  --z-header: 60;
  --z-drawer: 70;
  --z-overlay: 80;
  --z-skip: 90;

  color-scheme: light;
}

/* OKLCH refinement — wide-gamut screens get the tuned ramp. */
@supports (color: oklch(50% 0.1 180)) {
  :root {
    --c-teal-900: oklch(24% 0.045 183);
    --c-teal-800: oklch(29% 0.055 183);
    --c-teal-700: oklch(41% 0.079 181);
    --c-teal-600: oklch(54% 0.100 180);
    --c-teal-500: oklch(64% 0.118 180);
    --c-teal-400: oklch(75% 0.140 180);
    --c-teal-300: oklch(83% 0.110 180);
    --c-teal-200: oklch(87% 0.100 180);
    --c-teal-100: oklch(93% 0.055 180);
    --c-teal-050: oklch(97% 0.026 180);

    --c-sand-700: oklch(46% 0.085 76);
    --c-sand-600: oklch(60% 0.105 76);
    --c-sand-500: oklch(70% 0.110 76);
    --c-sand-400: oklch(81% 0.090 74);
    --c-sand-300: oklch(88% 0.068 76);
    --c-sand-200: oklch(93% 0.042 76);
    --c-sand-100: oklch(97% 0.020 76);

    --c-blush-400: oklch(79% 0.085 32);
    --c-blush-300: oklch(85% 0.060 30);
    --c-blush-200: oklch(91% 0.034 30);
    --c-blush-100: oklch(96% 0.016 30);

    --c-ink:       oklch(25% 0.013 62);
    --c-ink-soft:  oklch(40% 0.013 62);
    --c-muted:     oklch(48% 0.012 62);
    --c-faint:     oklch(52% 0.012 62);
    --c-line:      oklch(90% 0.010 74);
    --c-line-soft: oklch(94% 0.007 74);
    --c-paper:     oklch(98.2% 0.007 80);
    --c-oat:       oklch(96% 0.014 78);
  }
}