/* Cormorant + sage.
 *
 * Brand input from Edward, 2026-09-06:
 *   Google font  Cormorant
 *   HEX #618685  sage
 *   HEX #f4e1d2  cream
 *
 * Both brand colours are used exactly as given. Everything else here is derived
 * from them, because two colours are not a palette: a site needs body text,
 * links, borders, a header and a dark mode, and each of those has a contrast
 * floor to clear.
 *
 * The derivations are not taste, they are arithmetic. Sage on cream measures
 * 3.15:1, which fails WCAG AA for body text (4.5:1) — so body text is sage
 * darkened until it clears 7:1 and headings until they clear 4.6:1. The sage
 * itself stays untouched wherever size or weight makes 3:1 sufficient, so the
 * brand colour is what you actually see.
 *
 * Type: Cormorant is a display serif. It is beautiful at 32px and thin and
 * tiring at 16px, and this site carries ~84,000 words of clinical prose. So
 * Cormorant sets every heading, the logo lockup and the hero, and body copy is
 * a neutral sans that stays out of its way. Easily changed — see the note at
 * the foot of this file.
 */

:root {
  color-scheme: light;

  /* ---- brand, exactly as supplied ---- */
  --ivy-c-brand:            #618685;
  --ivy-c-brand-strong:     #4d6a69;   /* sage, darkened to clear AA on cream */
  --ivy-c-brand-deep:       #374c4c;
  --ivy-c-brand-tint:       #e4ecea;

  /* ---- ground ---- */
  --ivy-c-bg:               #f4e1d2;   /* cream, exactly as supplied */
  --ivy-c-surface:          #f9eee6;   /* cream lifted toward white for cards */
  --ivy-c-ink:              #2b3a3a;
  --ivy-c-body:             #374c4c;   /* 7.19:1 on cream */
  --ivy-c-muted:            #4d6a69;   /* 4.62:1 on cream */
  --ivy-c-border:           #dcc9b9;
  --ivy-c-on-brand:         #f4e1d2;
  --ivy-c-focus:            #374c4c;
  --ivy-c-success:          #4f7d5f;
  --ivy-c-danger:           #9d4b46;

  /* ---- type ---- */
  --ivy-font-heading: "Cormorant", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ivy-font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ivy-font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Cormorant runs small and light for its point size, so headings take more
     of it and a little more weight than a grotesque would need. */
  --ivy-weight-heading: 600;
  --ivy-weight-medium:  500;
  --ivy-weight-body:    400;

  --ivy-text-xs:   0.78rem;
  --ivy-text-sm:   0.9rem;
  --ivy-text-base: 1.0625rem;
  --ivy-text-lg:   1.3rem;
  --ivy-text-xl:   1.9rem;
  --ivy-text-2xl:  2.6rem;
  --ivy-text-3xl:  3.5rem;

  --ivy-leading-tight:  1.12;
  --ivy-leading-snug:   1.3;
  --ivy-leading-normal: 1.65;
  --ivy-tracking-wide:  0.08em;
  --ivy-underline-offset: 0.18em;
  --ivy-underline-thickness: 1px;

  /* ---- component colour ---- */
  --ivy-heading-color:     #4d6a69;
  --ivy-link-color:        #4d6a69;
  --ivy-link-hover:        #374c4c;
  --ivy-eyebrow-color:     #4d6a69;
  --ivy-breadcrumb-color:  #4d6a69;
  --ivy-breadcrumb-link:   #4d6a69;

  --ivy-header-bg:         #597b7a;   /* white on it: 4.63:1 */
  --ivy-header-fg:         #ffffff;
  --ivy-footer-bg:         #374c4c;
  --ivy-footer-fg:         #f4e1d2;
  --ivy-rule-on-brand:     rgba(244, 225, 210, 0.28);

  --ivy-cta-bg:            #618685;   /* the brand sage, undiluted */
  --ivy-cta-bg-hover:      #4d6a69;
  --ivy-cta-fg:            #14120f;   /* 4.68:1 on sage; cream would be 3.15 */
  --ivy-cta-radius:        var(--ivy-radius-sm);

  --ivy-submenu-bg:        #f9eee6;
  --ivy-submenu-fg:        #374c4c;
  --ivy-submenu-hover-bg:  #e4ecea;
  --ivy-submenu-radius:    var(--ivy-radius-sm);
  --ivy-submenu-shadow:    0 14px 34px rgba(43, 58, 58, 0.16);
  --ivy-submenu-width:     15rem;

  --ivy-hero-fg:           #ffffff;
  --ivy-hero-overlay:      linear-gradient(180deg, rgba(43,58,58,0.34) 0%, rgba(43,58,58,0.56) 100%);
  --ivy-hero-fallback-bg:  #597b7a;
  --ivy-hero-min-height:   min(78vh, 44rem);
  --ivy-hero-align:        center;

  /* ---- shape and depth ---- */
  --ivy-radius-sm:   3px;
  --ivy-radius-md:   6px;
  --ivy-radius-lg:   10px;
  --ivy-radius-pill: 999px;
  --ivy-media-radius: 4px;
  --ivy-border-width: 1px;
  --ivy-shadow-sm: 0 1px 2px rgba(43, 58, 58, 0.07);
  --ivy-shadow-md: 0 6px 18px rgba(43, 58, 58, 0.10);
  --ivy-shadow-lg: 0 18px 44px rgba(43, 58, 58, 0.15);

  --ivy-focus-width: 2px;
  --ivy-focus-offset: 2px;

  /* ---- rhythm ---- */
  --ivy-space-3xs: 0.3rem;
  --ivy-space-2xs: 0.55rem;
  --ivy-space-xs:  0.8rem;
  --ivy-space-sm:  1.1rem;
  --ivy-space-md:  1.6rem;
  --ivy-space-lg:  2.4rem;
  --ivy-space-xl:  3.6rem;
  --ivy-space-2xl: 5.2rem;
  --ivy-space-3xl: 7rem;
  --ivy-gutter:    1.5rem;
  --ivy-nav-gap:   1.5rem;
  --ivy-logo-gap:  0.75rem;
  --ivy-logo-height: 3rem;
  --ivy-logo-height-small: 2.4rem;

  --ivy-width-content: 42rem;
  --ivy-width-wide:    68rem;
  --ivy-width-full:    80rem;

  --ivy-card-image-ratio:    4 / 3;
  --ivy-feature-image-ratio: 16 / 9;

  --ivy-duration: 180ms;
  --ivy-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* ---------------------------------------------------------------------------
   Dark mode.
   Cream becomes the ink and sage the near-black ground, so the same two colours
   carry both modes rather than a second palette appearing from nowhere.
   --------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ivy-c-bg:           #0c1010;
    --ivy-c-surface:      #131b1b;
    --ivy-c-ink:          #f4e1d2;   /* 15.08:1 */
    --ivy-c-body:         #ece0d5;
    --ivy-c-muted:        #b9c6c3;
    --ivy-c-border:       #2c3a39;
    --ivy-c-brand:        #7fa5a3;
    --ivy-c-brand-strong: #9dbdbb;
    --ivy-c-brand-deep:   #c3d6d4;
    --ivy-c-brand-tint:   #1b2626;
    --ivy-c-on-brand:     #0c1010;
    --ivy-c-focus:        #f4e1d2;

    --ivy-heading-color:    #c3d6d4;
    --ivy-link-color:       #9dbdbb;
    --ivy-link-hover:       #c3d6d4;
    --ivy-eyebrow-color:    #9dbdbb;
    --ivy-breadcrumb-color: #b9c6c3;
    --ivy-breadcrumb-link:  #f4e1d2;

    --ivy-header-bg:  #131b1b;
    --ivy-header-fg:  #f4e1d2;
    --ivy-footer-bg:  #0c1010;
    --ivy-footer-fg:  #ece0d5;
    --ivy-rule-on-brand: rgba(244, 225, 210, 0.2);

    --ivy-cta-bg:       #9dbdbb;
    --ivy-cta-bg-hover: #c3d6d4;
    --ivy-cta-fg:       #0c1010;

    --ivy-submenu-bg:       #131b1b;
    --ivy-submenu-fg:       #ece0d5;
    --ivy-submenu-hover-bg: #1b2626;
    --ivy-submenu-shadow:   0 14px 34px rgba(0, 0, 0, 0.6);

    --ivy-hero-fg:          #f4e1d2;
    --ivy-hero-overlay:     linear-gradient(180deg, rgba(6,9,9,0.5) 0%, rgba(6,9,9,0.74) 100%);
    --ivy-hero-fallback-bg: #131b1b;

    --ivy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --ivy-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
    --ivy-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
  }
}

/* Explicit dark: the toggle must win over the system setting, both ways. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --ivy-c-bg:           #0c1010;
  --ivy-c-surface:      #131b1b;
  --ivy-c-ink:          #f4e1d2;
  --ivy-c-body:         #ece0d5;
  --ivy-c-muted:        #b9c6c3;
  --ivy-c-border:       #2c3a39;
  --ivy-c-brand:        #7fa5a3;
  --ivy-c-brand-strong: #9dbdbb;
  --ivy-c-brand-deep:   #c3d6d4;
  --ivy-c-brand-tint:   #1b2626;
  --ivy-c-on-brand:     #0c1010;
  --ivy-c-focus:        #f4e1d2;

  --ivy-heading-color:    #c3d6d4;
  --ivy-link-color:       #9dbdbb;
  --ivy-link-hover:       #c3d6d4;
  --ivy-eyebrow-color:    #9dbdbb;
  --ivy-breadcrumb-color: #b9c6c3;
  --ivy-breadcrumb-link:  #f4e1d2;

  --ivy-header-bg:  #131b1b;
  --ivy-header-fg:  #f4e1d2;
  --ivy-footer-bg:  #0c1010;
  --ivy-footer-fg:  #ece0d5;
  --ivy-rule-on-brand: rgba(244, 225, 210, 0.2);

  --ivy-cta-bg:       #9dbdbb;
  --ivy-cta-bg-hover: #c3d6d4;
  --ivy-cta-fg:       #0c1010;

  --ivy-submenu-bg:       #131b1b;
  --ivy-submenu-fg:       #ece0d5;
  --ivy-submenu-hover-bg: #1b2626;
  --ivy-submenu-shadow:   0 14px 34px rgba(0, 0, 0, 0.6);

  --ivy-hero-fg:          #f4e1d2;
  --ivy-hero-overlay:     linear-gradient(180deg, rgba(6,9,9,0.5) 0%, rgba(6,9,9,0.74) 100%);
  --ivy-hero-fallback-bg: #131b1b;

  --ivy-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --ivy-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --ivy-shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.6);
}

/* Explicit light, so the toggle can override a dark system preference. */
:root[data-theme="light"] { color-scheme: light; }

/* ---------------------------------------------------------------------------
   Skin-level type treatment.
   Cormorant needs a little help that a token cannot express: it sets small for
   its point size, and its capitals want air.
   --------------------------------------------------------------------------- */
.ivy-main h1, .ivy-main h2, .ivy-hero h1, .ivy-page-header h1 {
  letter-spacing: -0.005em;
  font-optical-sizing: auto;
}
.ivy-eyebrow { letter-spacing: 0.14em; }

/* The brand lockup.
 * Cormorant sets far wider than a grotesque at the same point size, so at the
 * previous size "IVY EN ROSE MEDICAL CLINIC" broke onto four lines inside the
 * 155px the flex row leaves it. Smaller, tighter, and allowed to keep its own
 * width, it settles onto two. */
/* Two class selectors, because the skin is loaded before nav.css and would
   otherwise lose the tie on specificity to the flex rule there. */
.ivy-header .ivy-header__brand { flex: 0 0 auto; min-width: 0; }
.ivy-header .ivy-header__name {
  font-size: 1rem;
  letter-spacing: 0.06em;
  line-height: 1.25;
  white-space: nowrap;
}
.ivy-header .ivy-header__tagline { letter-spacing: 0.04em; white-space: nowrap; }
@media (max-width: 78rem) {
  .ivy-header .ivy-header__name { font-size: 0.9rem; }
}

/* To set the whole site in Cormorant, body copy included, change
   --ivy-font-body above to match --ivy-font-heading and raise --ivy-text-base
   to about 1.2rem — Cormorant needs the extra size to stay readable in long
   clinical passages. */