/* ============================================================
   DR JILLIAN — Design Tokens
   Dental Care & Aesthetics
   ============================================================ */

/* ---------- BRAND FONTS — self-hosted ----------
   Canela (Commercial Type) — display family used in the wordmark.
   Trial files; replace with licensed production builds before launch.
   Messina Sans (Luzi Type) — UI + body sans.                       */

@font-face { font-family: "Canela"; src: url("fonts/Canela-Thin-Trial.otf")        format("opentype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-ThinItalic-Trial.otf")  format("opentype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Light-Trial.otf")       format("opentype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-LightItalic-Trial.otf") format("opentype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Regular-Trial.otf")        format("opentype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-RegularItalic-Trial.otf")  format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Medium-Trial.otf")       format("opentype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-MediumItalic-Trial.otf") format("opentype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Bold-Trial.otf")         format("opentype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-BoldItalic-Trial.otf")   format("opentype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-Black-Trial.otf")        format("opentype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Canela"; src: url("fonts/Canela-BlackItalic-Trial.otf")  format("opentype"); font-weight: 900; font-style: italic; font-display: swap; }

@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-Light.woff2")        format("woff2"), url("fonts/MessinaSans-Light.woff")        format("woff"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-LightItalic.woff2")  format("woff2"), url("fonts/MessinaSans-LightItalic.woff")  format("woff"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-Book.woff2")         format("woff2"), url("fonts/MessinaSans-Book.woff")         format("woff"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-BookItalic.woff2")   format("woff2"), url("fonts/MessinaSans-BookItalic.woff")   format("woff"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-Regular.woff2")      format("woff2"), url("fonts/MessinaSans-Regular.woff")      format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-RegularItalic.woff2") format("woff2"), url("fonts/MessinaSans-RegularItalic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-Bold.woff2")         format("woff2"), url("fonts/MessinaSans-Bold.woff")         format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-BoldItalic.woff2")   format("woff2"), url("fonts/MessinaSans-BoldItalic.woff")   format("woff"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-SemiBold.woff2")     format("woff2"), url("fonts/MessinaSans-SemiBold.woff")     format("woff"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-SemiBoldItalic.woff2") format("woff2"), url("fonts/MessinaSans-SemiBoldItalic.woff") format("woff"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-Black.woff2")        format("woff2"), url("fonts/MessinaSans-Black.woff")        format("woff"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Messina Sans"; src: url("fonts/MessinaSans-BlackItalic.woff2")  format("woff2"), url("fonts/MessinaSans-BlackItalic.woff")  format("woff"); font-weight: 900; font-style: italic; font-display: swap; }

/* ---------- TYPOGRAPHY ----------
   The wordmark uses Canela — a high-contrast Commercial Type didone —
   paired with Messina Sans for UI and body. Both are self-hosted from
   /fonts and declared above. The fallbacks remain for safety.

   Display:    Canela — wordmark, hero, section openers (Light 300 default).
   Sans:       Messina Sans — UI, navigation, body, eyebrows.
   Body serif: Canela italic / regular for long-form editorial copy.

   Note: Real wordmark uses a custom didone (likely Canela Deck or similar
   licensed face). Cormorant Garamond is the closest free substitute with
   the same wide-set, high-contrast personality. Swap to the licensed
   family on production builds without changing any sizing tokens.
*/
:root {
  --font-display: "Canela", "Cormorant Garamond", "Didot", "Bodoni MT", serif;
  --font-sans:    "Messina Sans", "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body:    "Canela", "Cormorant", "Cormorant Garamond", Georgia, serif;

  /* Type scale — 1.250 (major third) */
  --t-xs:    12px;
  --t-sm:    14px;
  --t-base:  16px;
  --t-md:    18px;
  --t-lg:    22px;
  --t-xl:    28px;
  --t-2xl:   36px;
  --t-3xl:   48px;
  --t-4xl:   64px;
  --t-5xl:   84px;
  --t-6xl:   112px;
  --t-7xl:   148px;

  /* Tracking — capped lines breathe, body sits tight */
  --track-tight:  -0.02em;
  --track-normal: 0;
  --track-wide:   0.08em;
  --track-wider:  0.18em;
  --track-widest: 0.32em;  /* tagline tracking, very airy */

  /* Line heights */
  --lh-display: 1.02;
  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.55;
  --lh-loose:   1.75;
}

/* ---------- COLOR ----------
   Three pillars from the brand:
     Bone   — warm off-white, primary surface
     Slate  — deep blue-grey, primary ink (matches logo)
     Sand   — warm taupe, secondary accent + dividers
   Plus extended functional values derived from the same hue families
   so nothing reads "imported" against the core three.
*/
:root {
  /* Core */
  --c-bone:        #FFFDFA;   /* warm off-white, primary surface */
  --c-slate:       #374351;   /* primary ink + brand */
  --c-sand:        #B6AC8D;   /* warm taupe accent */

  /* Bone family — surfaces */
  --c-bone-50:     #FFFEFC;   /* paper highlight */
  --c-bone-100:    #FFFDFA;   /* = --c-bone */
  --c-bone-200:    #FAF6EE;   /* card tint */
  --c-bone-300:    #F1ECE0;   /* divider warm */
  --c-bone-400:    #E5DECD;   /* muted surface */

  /* Slate family — ink + deep surfaces */
  --c-slate-900:   #1C2530;   /* deep clinic navy (room walls) */
  --c-slate-800:   #2A3441;   /* near-black navy */
  --c-slate-700:   #374351;   /* = --c-slate, brand ink */
  --c-slate-600:   #4D5867;   /* secondary ink */
  --c-slate-500:   #6B7585;   /* muted ink */
  --c-slate-400:   #8C95A2;   /* placeholder */
  --c-slate-300:   #B5BBC3;   /* subtle border on bone */
  --c-slate-200:   #D8DBDF;   /* hairlines on bone */

  /* Sand family — warm accent */
  --c-sand-700:    #8C8267;   /* deep sand for type on bone */
  --c-sand-600:    #A39880;   /* */
  --c-sand-500:    #B6AC8D;   /* = --c-sand */
  --c-sand-400:    #C8C0A6;   /* */
  --c-sand-300:    #DDD7C3;   /* */
  --c-sand-200:    #EDE8D8;   /* tint surface */

  /* Functional — kept restrained, drawn from same temperature */
  --c-success:     #6B7F5F;   /* moss, never a pure green */
  --c-warning:     #B6925E;   /* burnished gold, never pure yellow */
  --c-error:       #8B4A47;   /* aged terracotta, never pure red */
  --c-info:        #5A6B7E;   /* slate-blue */

  /* Semantic aliases */
  --bg:            var(--c-bone);
  --bg-tint:       var(--c-bone-200);
  --bg-deep:       var(--c-slate-900);
  --ink:           var(--c-slate-700);
  --ink-soft:      var(--c-slate-500);
  --ink-mute:      var(--c-slate-400);
  --rule:          var(--c-bone-300);
  --rule-strong:   var(--c-slate-200);
  --accent:        var(--c-sand-500);
  --accent-deep:   var(--c-sand-700);

  /* On dark surfaces */
  --on-deep:       var(--c-bone);
  --on-deep-soft:  rgba(255,253,250,0.72);
  --on-deep-mute:  rgba(255,253,250,0.48);
  --rule-on-deep:  rgba(255,253,250,0.16);
}

/* ---------- SPACING & LAYOUT ----------
   4-px base. Editorial layouts breathe — section padding errs generous.
*/
:root {
  --s-0:    0;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:    12px;
  --s-4:    16px;
  --s-5:    20px;
  --s-6:    24px;
  --s-8:    32px;
  --s-10:   40px;
  --s-12:   48px;
  --s-14:   56px;
  --s-16:   64px;
  --s-20:   80px;
  --s-24:   96px;
  --s-32:   128px;
  --s-40:   160px;
  --s-48:   192px;

  --section-y:    var(--s-32);   /* default vertical section padding desktop */
  --section-y-lg: var(--s-48);
  --gutter:       var(--s-8);
  --container:    1320px;
  --container-narrow: 880px;
  --container-text:   680px;

  /* Radii — minimal. The brand is architectural, not pill-y. */
  --r-none:  0;
  --r-xs:    2px;
  --r-sm:    4px;
  --r-md:    6px;
  --r-lg:    10px;
  --r-pill:  999px;

  /* Shadows — barely there. Editorial brands don't drop shadows; they layer. */
  --shadow-1: 0 1px 2px rgba(28,37,48,0.04), 0 1px 1px rgba(28,37,48,0.03);
  --shadow-2: 0 6px 24px rgba(28,37,48,0.06), 0 2px 6px rgba(28,37,48,0.04);
  --shadow-3: 0 18px 56px rgba(28,37,48,0.10), 0 6px 16px rgba(28,37,48,0.06);
  --shadow-press: inset 0 1px 2px rgba(28,37,48,0.10);

  /* Motion — slow, considered. Never bouncy. */
  --ease-out:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:   cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast:    160ms;
  --d-base:    260ms;
  --d-slow:    480ms;
  --d-page:    720ms;
}

/* ---------- BASELINE ELEMENTS ---------- */
html { font-size: 16px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display headings — didone wordmark feel */
.display-1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 10vw, var(--t-7xl));
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.display-2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 6vw, var(--t-5xl));
  line-height: var(--lh-display);
  letter-spacing: var(--track-tight);
}
.display-3 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(36px, 4.5vw, var(--t-4xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
}

/* Eyebrow — wide-tracked sans, capped — echoes "DENTAL CARE & AESTHETICS" */
.eyebrow {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: var(--track-widest);
  color: var(--accent-deep);
}

.lede {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-xl);
  line-height: var(--lh-snug);
  color: var(--ink);
}

/* Body — sans by default, can switch to serif for editorial copy */
.prose      { font-family: var(--font-sans); font-size: var(--t-base); line-height: var(--lh-body); color: var(--ink-soft); }
.prose-serif{ font-family: var(--font-body); font-size: var(--t-md); line-height: var(--lh-loose); color: var(--ink); }

.caption {
  font-family: var(--font-sans);
  font-size: var(--t-xs);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  color: var(--ink-mute);
}

.rule         { height: 1px; background: var(--rule); border: 0; }
.rule-strong  { height: 1px; background: var(--rule-strong); border: 0; }
.rule-sand    { height: 1px; background: var(--c-sand-400); border: 0; }