/* ============================================================
   Dr. Marie Meechan — Bloom direction
   Colours & Typography tokens
   ------------------------------------------------------------
   Source: TroikaDigital_DesignSystem_InTherapyWithMarie.pdf
   "Lead with warmth, whisper authority."
   ============================================================ */

/* === Self-hosted brand fonts =================================== */
/* Cormorant Garamond — Light 300, Regular 400, Medium 500, SemiBold 600, Bold 700, italics for each */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/CormorantGaramond-Regular.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/CormorantGaramond-Italic.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-Medium.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap; src: url("../fonts/CormorantGaramond-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/CormorantGaramond-SemiBold.ttf") format("truetype"); }

/* Lato — Thin 100, Light 300, Regular 400, Bold 700, Black 900, italics for each */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/Lato-Light.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 300; font-display: swap; src: url("../fonts/Lato-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/Lato-Regular.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/Lato-Italic.ttf") format("truetype"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/Lato-Bold.ttf") format("truetype"); }

:root {
  /* === BLOOM PALETTE ============================================ */
  --color-ink:      #7A3E2E; /* Dark Terracotta — body text */
  --color-accent:   #C47B5A; /* Soft Terracotta — buttons, links, focus */
  --color-rose:     #C9918A; /* Dusty Rose — eyebrows, dividers */
  --color-blush:    #E8C4B8; /* Warm Blush — soft fills, hover */
  --color-bg:       #F5EFE6; /* Aged Parchment — default page bg */
  --color-horizon:  #9BB5C8; /* Soft Horizon — DECORATIVE only */
  --color-white:    #FFFFFF;

  /* aliases used by tokens / utility files */
  --fg-1: var(--color-ink);
  --fg-2: var(--color-rose);
  --fg-3: var(--color-accent);
  --bg-1: var(--color-bg);
  --bg-2: var(--color-blush);
  --bg-card: var(--color-white);

  /* === TYPOGRAPHY =============================================== */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Lato", -apple-system, system-ui, "Segoe UI", sans-serif;

  /* fluid scale, anchored to 1rem = 16px, 1.25 ratio */
  --text-display: clamp(2.5rem,   5vw + 1rem,    4rem);     /* 40 → 64 */
  --text-h1:      clamp(2rem,     3vw + 1rem,    3rem);     /* 32 → 48 */
  --text-h2:      clamp(1.625rem, 2vw + 0.75rem, 2.25rem);  /* 26 → 36 */
  --text-h3:      clamp(1.25rem,  1vw + 0.875rem, 1.5rem);  /* 20 → 24 */
  --text-eyebrow: 0.875rem;                                  /* 14 */
  --text-lead:    clamp(1.125rem, 0.5vw + 1rem,   1.25rem); /* 18 → 20 */
  --text-body:    clamp(1rem,     0.5vw + 0.875rem, 1.0625rem); /* 16 → 17 */
  --text-small:   0.875rem;                                  /* 14 */

  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.6;
  --leading-relaxed: 1.7;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-eyebrow: 0.12em;

  /* === SPACING (8px base) ======================================= */
  --space-1:  0.25rem; /* 4  */
  --space-2:  0.5rem;  /* 8  */
  --space-3:  0.75rem; /* 12 */
  --space-4:  1rem;    /* 16 */
  --space-6:  1.5rem;  /* 24 */
  --space-8:  2rem;    /* 32 */
  --space-12: 3rem;    /* 48 */
  --space-16: 4rem;    /* 64 */
  --space-24: 6rem;    /* 96 */
  --space-32: 8rem;    /* 128 */

  /* === LAYOUT =================================================== */
  --container-narrow: 38rem;  /* 608  — prose */
  --container-medium: 56rem;  /* 896  — single col */
  --container-wide:   75rem;  /* 1200 — full */

  --bp-tablet:  40rem;  /* 640  */
  --bp-desktop: 64rem;  /* 1024 */
  --bp-wide:    80rem;  /* 1280 */

  /* === RADIUS — soft edges always =============================== */
  --radius-sm:   0.5rem;  /* 8  — inputs */
  --radius-md:   1rem;    /* 16 — cards, images */
  --radius-lg:   1.5rem;  /* 24 — hero images */
  --radius-pill: 999px;   /*    — buttons */

  /* === SHADOWS — gentle, terracotta-tinted ====================== */
  --shadow-soft: 0 4px 24px rgba(122, 62, 46, 0.06);
  --shadow-lift: 0 12px 32px rgba(122, 62, 46, 0.10);

  /* === MOTION — slower, calmer ================================== */
  --ease-soft:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle:  cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-arrive:  cubic-bezier(0, 0, 0.2, 1);

  --motion-instant: 100ms;
  --motion-quick:   200ms;
  --motion-default: 320ms;
  --motion-slow:    500ms;
  --motion-arrive:  800ms;
}

/* ============================================================
   Semantic element styles — drop these on any page to inherit
   the Bloom voice. Keep the ruleset small; let utility classes
   do the rest.
   ============================================================ */

html { color: var(--color-ink); background: var(--color-bg); }

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-ink);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: var(--text-h1);
  font-style: italic;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h2 {
  font-size: var(--text-h2);
  font-style: italic;
  line-height: var(--leading-snug);
  letter-spacing: -0.005em;
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
}

.display {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-ink);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-eyebrow);
  line-height: 1.4;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--color-rose);
}

.lead {
  font-size: var(--text-lead);
  font-weight: 300;
  line-height: var(--leading-normal);
}

p {
  max-width: var(--container-narrow);
  line-height: var(--leading-relaxed);
}

small, .small { font-size: var(--text-small); }

a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: var(--color-rose);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--motion-quick) var(--ease-gentle),
              text-decoration-thickness var(--motion-quick) var(--ease-gentle);
}
a:hover {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
}

/* honour reduced motion always */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}