/* ==========================================================================
   Cosmos Aesthetics — Design tokens (single source of truth)
   System: premium · feminine · modern · minimal · clean.
   Quiet luxury — neutrals carry the surface, pink is a restrained accent,
   hierarchy comes from type scale + weight + whitespace, not loud colour.
   One typeface (Graphik). Soft, consistent shapes. Charcoal text.
   Every component reads these vars — never hard-code a colour or size.
   ========================================================================== */

:root {
  /* --- Pink (soft pastels + one readable rose for links) ----------------- */
  --color-pink-50:  #fdf4f5;
  --color-pink-100: #fcf1f3;   /* light blush band */
  --color-pink-200: #f6d6dd;   /* soft pink: chips, tints */
  --color-pink-300: #eeb6c2;
  --color-pink-400: #df8097;   /* brand pink (matches old site): fills, icons */
  --color-pink-500: #ee9fb1;   /* lighter pink */
  --color-pink-600: #a94f64;   /* readable rose: pink LINKS / important text (AA ~4.9:1 on white) */
  --color-wine:     #a94f64;   /* (back-compat -> readable rose) */

  /* --- Neutrals: warm porcelain + cream + a deep plum-espresso anchor ----- */
  --color-greige-50:  #fdfcfb;  /* near-white warm: page bg (lighter) */
  --color-greige-100: #f7f1ed;  /* light warm cream: occasional band */
  --color-greige-200: #efe5e0;
  --color-greige-300: #e9ddd8;
  --color-greige-400: #dbcec8;
  --color-line:       #e3e1e0;  /* desaturated neutral border */
  --color-line-strong:#cbc8c6;  /* desaturated neutral border (strong) */
  --color-ink-700:    #4a4744;  /* muted: dark neutral gray (AA ~9.4:1) */
  --color-ink-800:    #2a2429;  /* body text (deep espresso-plum) */
  --color-ink-900:    #1d181c;  /* headings (near-black, warm plum) */
  --color-white:      #ffffff;
  --color-warm:       #f7f1ed;

  /* --- Semantic roles (use THESE in components) -------------------------- */
  --bg:              #fcfaf8;                 /* page background (warm ivory) */
  --bg-alt:          var(--color-greige-100); /* cream alternating band */
  --bg-blush:        var(--color-pink-100);   /* soft pink accent band */
  --surface:         var(--color-white);      /* cards, panels */
  --surface-sunken:  var(--color-greige-100);
  --border:          var(--color-line);        /* neutral, not warm/pink */
  --border-50:       color-mix(in srgb, var(--color-line) 50%, transparent); /* card border at rest */
  --border-strong:   var(--color-line-strong);
  --matte:           #565d63;                   /* gray frame behind the large case-detail photo (blends studio bg) */
  --media-mat:       #ece4de;                   /* soft warm greige mat framing gallery before/after plates */
  --album-mat:       hsl(24 14% 85% / 1);        /* album / gallery card image-block background */
  --text:            var(--color-ink-800);
  --text-muted:      var(--color-ink-700);
  --heading:         var(--color-ink-900);
  --heading-soft:    #63404b;                  /* muted plum for h2–h6 + nav on light surfaces */
  --nav-hover:       #f8f6f5;                  /* lighter, desaturated cream for nav hover bg */
  --accent:          var(--color-pink-400);   /* soft brand pink: fills, icons */
  --accent-soft:     var(--color-pink-200);
  --accent-cta:      var(--color-pink-600);   /* button fill: deep rose, sharp with white label */
  --accent-cta-hover:#933f55;                 /* darker rose on hover */
  --accent-hover:    var(--color-pink-500);
  --accent-deep:     var(--color-pink-600);   /* readable rose for pink LINKS / important text (AA) */
  --link:            var(--color-ink-800);    /* default link: charcoal, underlined */
  --link-pink:       var(--color-pink-600);   /* important link: readable rose */
  --on-accent:       var(--color-white);       /* white label on deep-rose fill (sharp) */
  /* button colour roles (semantic, action-coded) ----------------
     primary   = vibrant pink, MAIN actions only (book / enquire), + arrow
     secondary = filled black (inverts white on dark surfaces), + icon
     tertiary  = stroke black @50% line / 100% label (inverts on dark) */
  --btn-primary:        var(--color-pink-400);   /* brand pink = old-site #df8097 */
  --btn-primary-hover:  #d06a84;                 /* slightly deeper on hover (AA) */
  --on-primary:         var(--color-white);       /* white label on the pink button (per request) */
  --btn-secondary:        var(--color-ink-900);   /* filled black */
  --btn-secondary-hover:  var(--color-ink-800);
  --on-secondary:         var(--color-white);
  --btn-tertiary-line:    color-mix(in srgb, var(--color-ink-900) 50%, transparent);
  --on-tertiary:          var(--color-ink-900);
  --icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  /* down chevron (same shape as cosmos_icon('chevron-down')) — for selects */
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23484848' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  /* legacy aliases (chips, mobile bar) */
  --btn-dark:        var(--color-ink-900);
  --btn-dark-hover:  var(--color-ink-800);
  --on-dark:         var(--color-greige-50);   /* cream text on dark (high contrast) */
  --focus-ring:      var(--color-pink-600);

  /* --- Typography: serif headings + Graphik body --------------- */
  /* --font-display is the SERIF (swap candidates via the preview font-switcher);
     body / labels / nav / buttons stay Graphik. */
  --font-display: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-label:   var(--font-body);

  /* Modular type scale — restrained, base 16px ("not too big" headings). */
  --step--2: clamp(0.68rem, 0.66rem + 0.08vw, 0.72rem);   /* ~11px fine print / footer menus */
  --step--1: clamp(0.78rem, 0.76rem + 0.08vw, 0.8125rem); /* 12-13px eyebrow/meta */
  --step-0:  1rem;                                         /* 16px body */
  --step-1:  1.125rem;                                     /* 18px lede/subhead */
  --step-2:  clamp(1.2rem, 1.13rem + 0.25vw, 1.35rem);    /* h3/h4 */
  --step-3:  clamp(1.35rem, 1.22rem + 0.45vw, 1.6rem);
  --step-4:  clamp(1.75rem, 1.45rem + 1.0vw, 2.5rem);     /* section H2 (bigger) */
  --step-5:  clamp(2.2rem, 1.7rem + 2.0vw, 3.5rem);       /* hero H1 (bigger) */

  --leading-tight: 1.28;       /* serif headings — looser so multi-line titles aren't crowded */
  --leading-snug:  1.35;
  --leading-body:  1.6;
  --tracking-tight: -0.005em;  /* serif headings: minimal */
  --tracking-caps:  0.05em;    /* uppercase labels: 5% (clean, like the references) */
  --tracking-wide:  0.05em;
  --weight-body: 400;
  --weight-strong: 500;
  --weight-medium: 400;
  --weight-display: 400;       /* serif headings: elegant, not bold */
  --weight-bold: 500;

  /* --- Spacing scale ----------------------------------------------------- */
  --space-2xs: 0.375rem;
  --space-xs:  0.625rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8.5rem;

  /* --- Layout (Feals-style: ~720px reading column inside ~1140px page) ----- */
  --container:       1140px;
  --container-narrow: 720px;   /* reading column / section heads */
  --gutter:          clamp(1.25rem, 5vw, 2.25rem);
  --band-pad-y:      clamp(3rem, 4.5vw, 5.25rem);  /* section rhythm — tightened, then eased back up */

  /* --- Modal sheet widths (ONE per modal type) ---------------------------
     normal       → gallery / before-after lightbox      (.modal.is-gallery)
     narrow       → forms, e.g. the enquiry popup         (.enquiry-stack--modal)
     super-narrow → the 18+ age-gate dialog               (.age-gate__dialog) */
  --modal-w:         min(94vw, 1120px);
  --modal-w-narrow:  min(540px, 94vw);
  --modal-w-xnarrow: min(520px, 100%);

  /* --- Radii (subtle & editorial; NOT pill buttons) ---------------------- */
  --radius-sm:  0;
  --radius-md:  0;
  --radius-lg:  0;
  --radius-xl:  0;
  --radius-pill: 0;     /* sharp everywhere */
  --radius-btn: 0;

  /* --- Fixed per-role image aspect ratios -------------------------------- */
  --ratio-portrait: 3 / 4;
  --ratio-content:  3 / 2;
  --ratio-card:     16 / 9;

  /* --- Elevation (soft, warm-tinted; minimal) ---------------------------- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-pink: none;
  /* layered tight shadows (jakub.kr): small blurs stacked = sharp + close, premium */
  --shadow-card: none;
  --shadow-card-hover: none;

  /* --- Motion (subtle, slow, elegant) ------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 300ms;
  --dur-slow: 650ms;

  --z-header: 100;
  --z-modal: 1000;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; }
}