/* =====================================================
   Eternis Clinic - Design tokens
   Light mode - palette derived from the actual logo
   (teal #3EC3D9, sage #1B9E5F, lime #80C44B, charcoal #1F1D1D)
   plus a warm tahini gold to mirror the physical clinic interiors.
   ===================================================== */

:root {
  /* ===== Brand palette ===== */
  --etc-canvas:        #f6f3ec;   /* warm porcelain - mirrors clinic interior tone */
  --etc-paper:         #ffffff;
  --etc-paper-soft:    #fafaf6;
  --etc-ink:           #11161c;   /* primary text — high contrast on white */
  --etc-ink-soft:      #1f2730;
  --etc-deep:          #0c2e35;   /* dark brand surface — chatbot, CTA bands, footer, primary buttons */
  --etc-deep-soft:     #16414a;   /* lighter step of the deep teal */
  --etc-mute:          #4b525b;   /* secondary text */
  --etc-mute-2:        #6b6f76;
  --etc-mute-3:        #9d9fa5;
  --etc-line:          #e8e4dc;   /* hairline borders */
  --etc-line-soft:     #efebe1;

  /* Brand teal — the ETERNIS wordmark colour, sampled from the logo */
  --etc-teal:          #1FA8BC;   /* darker, AA-contrast variant for buttons */
  --etc-teal-pure:     #3EC3D9;   /* exact logo colour */
  --etc-teal-soft:     #d6f0f4;   /* tinted background for callouts */
  --etc-teal-deeper:   #136f7e;   /* hover / dark variant */
  --etc-teal-glow:     rgba(31, 168, 188, 0.16);

  /* Brand sage — botanical leaf mark, conveys clinical / clean */
  --etc-sage:          #1b9e5f;
  --etc-sage-soft:     #d4ecdc;
  --etc-sage-deep:     #0c6a3d;

  /* Brand lime — botanical accent, used very sparingly */
  --etc-lime:          #80c44b;
  --etc-lime-soft:     #e6f2d2;

  /* Tahini gold — kept from the previous palette to mirror the clinic's
     real-world interior tone. Used for warm accents, ref chips, eyebrow rules. */
  --etc-gold:          #caa97a;
  --etc-gold-soft:     #e7d4b3;
  --etc-gold-deep:     #9b7b48;
  --etc-gold-glow:     rgba(202, 169, 122, 0.18);

  --etc-success:       var(--etc-sage);
  --etc-warn:          #c9863c;
  --etc-danger:        #b34c4c;

  /* ===== Typography ===== */
  --etc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --etc-font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --etc-font-mono: 'JetBrains Mono', 'Menlo', 'SF Mono', monospace;

  /* Fluid type scale (clamps) */
  --etc-display-1: clamp(2.5rem, 5.5vw, 5.25rem);   /* hero */
  --etc-display-2: clamp(2.1rem, 4.2vw, 3.75rem);   /* section heads */
  --etc-h1: clamp(1.9rem, 3.4vw, 2.75rem);
  --etc-h2: clamp(1.5rem, 2.4vw, 2.05rem);
  --etc-h3: clamp(1.2rem, 1.6vw, 1.45rem);
  --etc-lead: clamp(1rem, 1.2vw, 1.18rem);
  --etc-body: 1rem;
  --etc-small: 0.875rem;
  --etc-mini: 0.75rem;

  --etc-leading-tight: 1.05;
  --etc-leading-snug: 1.18;
  --etc-leading-normal: 1.55;
  --etc-leading-loose: 1.7;

  --etc-tracking-tight: -0.022em;
  --etc-tracking-normal: -0.005em;
  --etc-tracking-wide: 0.04em;
  --etc-tracking-wider: 0.16em;

  /* ===== Space (Fibonacci-ish) ===== */
  --etc-space-1: 0.25rem;
  --etc-space-2: 0.5rem;
  --etc-space-3: 0.75rem;
  --etc-space-4: 1rem;
  --etc-space-5: 1.25rem;
  --etc-space-6: 1.5rem;
  --etc-space-7: 2rem;
  --etc-space-8: 2.5rem;
  --etc-space-9: 3rem;
  --etc-space-10: 4rem;
  --etc-space-11: 5rem;
  --etc-space-12: 6rem;
  --etc-space-13: 8rem;
  --etc-space-14: 10rem;

  /* ===== Radii ===== */
  --etc-radius-xs: 6px;
  --etc-radius-sm: 10px;
  --etc-radius-md: 14px;
  --etc-radius-lg: 20px;
  --etc-radius-xl: 28px;
  --etc-radius-2xl: 40px;
  --etc-radius-full: 999px;

  /* ===== Shadows ===== */
  --etc-shadow-1: 0 1px 2px rgba(17,22,28,0.04), 0 0 0 1px rgba(17,22,28,0.04);
  --etc-shadow-2: 0 6px 16px -8px rgba(17,22,28,0.08), 0 1px 2px rgba(17,22,28,0.05);
  --etc-shadow-3: 0 18px 40px -16px rgba(17,22,28,0.14), 0 2px 6px rgba(17,22,28,0.05);
  --etc-shadow-4: 0 30px 60px -20px rgba(17,22,28,0.22);
  --etc-shadow-glow-gold: 0 0 0 1px rgba(202,169,122,0.4), 0 8px 24px rgba(202,169,122,0.18);
  --etc-shadow-glow-teal: 0 0 0 1px rgba(31,168,188,0.4), 0 8px 24px rgba(31,168,188,0.18);

  /* ===== Transitions ===== */
  --etc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --etc-ease-in: cubic-bezier(0.55, 0, 0.55, 0.2);
  --etc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --etc-dur-fast: 160ms;
  --etc-dur: 240ms;
  --etc-dur-slow: 480ms;
  --etc-dur-slower: 800ms;

  /* ===== Layout ===== */
  --etc-container: 1240px;
  --etc-container-narrow: 880px;
  --etc-gutter: clamp(1.75rem, 5vw, 3rem);     /* 28px floor on phones, 48px ceiling on desktop */
  --etc-section: clamp(3.25rem, 8vw, 7.5rem);

  /* ===== Z-index ===== */
  /* Cursor sits ABOVE the modal/lightbox (110): the native cursor is hidden
     (`cursor: none`), so the custom cursor must stay topmost or it vanishes
     behind a fullscreen viewer (e.g. /before-after lightbox). Below toast (200). */
  --z-cursor: 150;
  --z-preloader: 9999;
  --z-header: 80;
  --z-sheet: 70;
  --z-modal: 110;
  --z-toast: 200;
  --z-chatbot: 90;
}

@media (prefers-color-scheme: dark) {
  /* The site is intentionally light-only. We don't auto-flip,
     but we set color-scheme so form controls render with light chrome. */
}