/* ==========================================================================
   Ha-Sana Solace — Colors & Type
   Moody Organic Editorial | Nutritional Therapy Practice
   ========================================================================== */

/* ------------------------------ FONTS ----------------------------------- */

@font-face {
  font-family: 'Tenor Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TenorSans-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/CormorantGaramond-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/CormorantGaramond-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/CormorantGaramond-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/CormorantGaramond-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/CormorantGaramond-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/CormorantGaramond-MediumItalic.woff2') format('woff2');
}

@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/PinyonScript-Regular.woff2') format('woff2');
}

/* ------------------------------ TOKENS ---------------------------------- */

:root {
  /* ---- Brand palette (exact hexes) ---- */
  --charr:  #383431;   /* Primary dark / frame          */
  --crepe:  #DED6C8;   /* Primary light / canvas         */
  --russet: #95401C;   /* Earthy accent 1 — CTAs         */
  --gold:   #BD9965;   /* Earthy accent 2 — borders, hover */
  --sage:   #ACB087;   /* Cool accent — tags, success    */

  /* ---- Tonal steps (for depth without new hues) ---- */
  --charr-95: #2A2623;
  --charr-85: #3F3A37;
  --charr-70: #514A46;
  --crepe-95: #F1EADC;
  --crepe-85: #CFC6B6;
  --crepe-70: #B8AE9C;
  --russet-dk: #6E2E13;
  --gold-dk:   #8C7045;

  /* ---- Glass / translucent overlays (the "Scrollable Foreground") ---- */
  --glass-dark:        rgba(56, 52, 49, 0.85);
  --glass-dark-soft:   rgba(56, 52, 49, 0.62);
  --glass-light:       rgba(222, 214, 200, 0.85);
  --glass-light-soft:  rgba(222, 214, 200, 0.62);
  --glass-blur:        blur(10px) saturate(1.05);

  /* ---- Semantic foreground/background (dark theme default) ---- */
  --bg:        var(--charr);
  --bg-glass:  var(--glass-dark);
  --fg:        var(--crepe);
  --fg-muted:  var(--crepe-70);
  --fg-soft:   rgba(222, 214, 200, 0.55);
  --rule:      rgba(189, 153, 101, 0.45); /* gold, delicate */
  --rule-soft: rgba(222, 214, 200, 0.18);
  --accent:    var(--russet);
  --accent-2:  var(--gold);
  --success:   var(--sage);

  /* ---- Typography ---- */
  --serif:  'Cormorant Garamond', 'Lora', 'Playfair Display', Georgia, serif;
  --sans:   'Tenor Sans', 'Montserrat', 'Lato', system-ui, -apple-system, sans-serif;
  --script: 'Pinyon Script', 'Petit Formal Script', cursive;

  /* Scale — editorial, generous, 1920px reference */
  --fs-display:  clamp(3.25rem, 6vw,  6.5rem);  /*  52 → 104  */
  --fs-h1:       clamp(2.5rem,  4.2vw, 4.5rem); /*  40 →  72  */
  --fs-h2:       clamp(1.875rem, 3vw,  3rem);   /*  30 →  48  */
  --fs-h3:       clamp(1.5rem,  2vw,  2rem);    /*  24 →  32  */
  --fs-h4:       1.375rem;                      /*  22        */
  --fs-body-lg:  1.125rem;                      /*  18        */
  --fs-body:     1rem;                          /*  16        */
  --fs-small:    0.875rem;                      /*  14        */
  --fs-eyebrow:  0.75rem;                       /*  12        */
  --fs-script:   clamp(1.75rem, 2.5vw, 2.5rem); /*  28 → 40   */

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.7;  /* 1.6–1.8 per brief */
  --lh-loose: 1.85;

  --tracking-eyebrow: 0.22em;
  --tracking-sans:    0.04em;
  --tracking-tight:   -0.015em;

  /* ---- Spacing (8pt base, generous) ---- */
  --s-1: 0.25rem;   /*  4 */
  --s-2: 0.5rem;    /*  8 */
  --s-3: 0.75rem;   /* 12 */
  --s-4: 1rem;      /* 16 */
  --s-5: 1.5rem;    /* 24 */
  --s-6: 2rem;      /* 32 */
  --s-7: 3rem;      /* 48 */
  --s-8: 4rem;      /* 64 */
  --s-9: 6rem;      /* 96 */
  --s-10: 8rem;     /* 128 */
  --s-11: 12rem;    /* 192 */

  /* ---- Layout ---- */
  --frame:        clamp(1.5rem, 3vw, 3rem); /* matte/border around viewport */
  --content-max:  1280px;
  --measure:      66ch; /* readable paragraph width */

  /* ---- Radii (sharp to gently rounded) ---- */
  --r-sharp: 0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    8px;
  --r-pill:  999px;

  /* ---- Borders ---- */
  --bw-hair:   1px;
  --bw-rule:   1px;
  --bw-frame:  2px;
  --bw-heavy:  3px;

  /* ---- Shadows (soft, warm, never harsh) ---- */
  --shadow-xs:   0 1px 2px rgba(20, 16, 14, 0.35);
  --shadow-sm:   0 4px 14px rgba(20, 16, 14, 0.35);
  --shadow-md:   0 10px 30px rgba(14, 11, 9, 0.45);
  --shadow-lg:   0 24px 60px rgba(10, 8, 7, 0.55);
  --shadow-gold: 0 0 0 1px rgba(189, 153, 101, 0.35),
                 0 10px 30px rgba(14, 11, 9, 0.45);
  --inner-warm:  inset 0 1px 0 rgba(222, 214, 200, 0.08);

  /* ---- Motion ---- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.08, 0.68, 0.53);
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick:  160ms;
  --dur-base:   280ms;
  --dur-slow:   480ms;
  --dur-marquee: 45s;
}

/* ---- Light theme (invert glass + fg/bg only; palette stays warm) ---- */
[data-theme='light'] {
  --bg:        var(--crepe);
  --bg-glass:  var(--glass-light);
  --fg:        var(--charr);
  --fg-muted:  var(--charr-70);
  --fg-soft:   rgba(56, 52, 49, 0.55);
  --rule:      rgba(140, 112, 69, 0.55);
  --rule-soft: rgba(56, 52, 49, 0.14);
}

/* ------------------------------ BASE ------------------------------------ */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  letter-spacing: var(--tracking-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Semantic elements — editorial headings in serif */
h1, .h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-5);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
h4, .h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.script,
.kicker-script {
  font-family: var(--script);
  font-size: var(--fs-script);
  font-weight: 400;
  color: var(--gold);
  line-height: 1.1;
  letter-spacing: 0;
}

p { margin: 0 0 var(--s-4); max-width: var(--measure); text-wrap: pretty; }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  transition: color var(--dur-quick) var(--ease),
              border-color var(--dur-quick) var(--ease);
}
a:hover { color: var(--crepe); border-color: var(--crepe); }

hr {
  border: 0;
  height: 1px;
  background: var(--rule);
  margin: var(--s-7) 0;
}

::selection { background: var(--russet); color: var(--crepe); }