/* ==========================================================================
   Sol Women's Treatment: design tokens
   Every value here comes from the Sol design system book.
   In WordPress these map to theme.json (settings.color.palette,
   settings.typography, settings.spacing, styles). Keep names in sync.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand: a teal family plus one warm accent */
  --sol-deep-teal: #0F3A40;
  --sol-brand-teal: #1C6E7E;
  --sol-gold: #D9902A;
  --sol-gold-hover: #C98221;

  /* Grounds: pure white is for fields only */
  --sol-sand: #F4EDDF;
  --sol-paper: #FBF7EE;
  --sol-white: #FFFFFF;

  /* Ink on sand */
  --sol-ink: #2C2620;
  --sol-muted: #6B6055;
  --sol-faint: #8C8177;

  /* Ink on teal */
  --sol-on-teal-heading: var(--sol-paper);
  --sol-on-teal-body: var(--sol-sand);
  --sol-on-teal-muted: rgb(244 237 223 / 0.78);

  /* Seasoning and guest */
  --sol-terracotta: #BC5334;
  --sol-indigo: #3E4D77;

  /* Lines */
  --sol-hairline: rgb(44 38 32 / 0.12);
  --sol-hairline-strong: rgb(44 38 32 / 0.22);
  --sol-hairline-on-teal: rgb(244 237 223 / 0.22);

  /* Gradients: only two, diagonal and barely there */
  --sol-gradient-feature: linear-gradient(135deg, #0F3A40 0%, #1C6E7E 100%);
  --sol-gradient-paper: linear-gradient(160deg, #FBF7EE 0%, #FDF6E7 100%);
  /* Protection gradient: text over photography gets a teal scrim */
  --sol-scrim: linear-gradient(180deg, rgb(15 58 64 / 0.72) 0%, rgb(15 58 64 / 0.9) 100%);

  /* Type */
  --sol-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sol-font-body: "Mulish", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --sol-display-axes: "SOFT" 40, "WONK" 0;

  /* Display scale 72 / 56 / 40 / 28 / 22, fluid down to phone */
  --sol-fs-display: clamp(2.75rem, 1.6rem + 4.2vw, 4.5rem);
  --sol-fs-h1: clamp(2.5rem, 1.75rem + 2.9vw, 3.5rem);
  --sol-fs-h2: clamp(2rem, 1.6rem + 1.4vw, 2.5rem);
  --sol-fs-h3: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);
  --sol-fs-h4: 1.375rem;

  /* Body scale 22 / 19 / 17 / 15 / 13 */
  --sol-fs-lead: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --sol-fs-body-lg: 1.1875rem;
  --sol-fs-body: 1.0625rem;
  --sol-fs-small: 0.9375rem;
  --sol-fs-caption: 0.8125rem;

  --sol-lh-display: 1.06;
  --sol-lh-heading: 1.15;
  --sol-lh-body: 1.62;
  --sol-tracking-display: -0.02em;
  --sol-measure: 34rem;

  /* Spacing: 4px base, coarsening upward */
  --sol-space-4: 0.25rem;
  --sol-space-8: 0.5rem;
  --sol-space-12: 0.75rem;
  --sol-space-16: 1rem;
  --sol-space-24: 1.5rem;
  --sol-space-32: 2rem;
  --sol-space-40: 2.5rem;
  --sol-space-56: 3.5rem;
  --sol-space-72: 4.5rem;
  --sol-space-96: 6rem;
  --sol-space-128: 8rem;

  /* Containers */
  --sol-content: 1200px;
  --sol-prose: 760px;
  --sol-gutter: 24px;
  --sol-section: clamp(4rem, 2.5rem + 5vw, 6rem);

  /* Radii: fields 10, cards 16, media 20, panels 28, pills full */
  --sol-radius-field: 10px;
  --sol-radius-card: 16px;
  --sol-radius-media: 20px;
  --sol-radius-panel: 28px;
  --sol-radius-aperture: 96px;
  --sol-radius-pill: 999px;

  /* Shadows: warm charcoal, three steps; media goes teal */
  --sol-shadow-hairline: 0 0 0 1px var(--sol-hairline);
  --sol-shadow-sm: 0 1px 2px rgb(44 38 32 / 0.06), 0 2px 6px rgb(44 38 32 / 0.05);
  --sol-shadow-md: 0 2px 4px rgb(44 38 32 / 0.05), 0 8px 20px rgb(44 38 32 / 0.08);
  --sol-shadow-lg: 0 4px 10px rgb(44 38 32 / 0.06), 0 22px 48px rgb(44 38 32 / 0.14);
  --sol-shadow-media: 0 28px 56px -18px rgb(15 58 64 / 0.45);

  /* Motion: calm and short, no bounce */
  --sol-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --sol-dur-hover: 160ms;
  --sol-dur-state: 240ms;
  --sol-dur-panel: 420ms;
  --sol-dur-reveal: 620ms;

  /* Layers */
  --sol-z-header: 50;
  --sol-z-drawer: 60;
  --sol-z-callbar: 40;
}