/* ==========================================================================
   Made Yours — Colors & Type
   The core design tokens. Import this first; everything else inherits.
   ========================================================================== */

/* -------- Webfonts ---------------------------------------------------------
   Cormorant Garamond — display serif (italic 600 is the signature cut).
   Self-hosted from /fonts using brand-provided variable TTFs.
   Inter — UI sans, still loaded from Google Fonts (no brand file provided).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/CormorantGaramond-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Brand palette — from brand brief ---------------------------------- */
  --walnut:       #3B2A14;   /* primary dark; wood, stamp ink, type on cream */
  --walnut-ink:   #2A1D0D;   /* one step deeper for hover on walnut surfaces */
  --ember:        #C8956C;   /* accent; burnt-wood glow, underline, CTA line */
  --ember-warm:   #B78157;   /* pressed/hover of ember */
  --cream:        #F5EFE6;   /* primary surface; paper, kraft highlight */
  --cream-warm:   #EBE0D0;   /* 1-step darker cream; hovered card, stamp bg */
  --cream-edge:   #D3C4AE;   /* hairline on cream — use as border not divider */
  --sage:         #6B8C5A;   /* secondary; natural, gift tag, success */
  --sage-deep:    #4F6D42;
  --stone:        #B4B2A9;   /* warm neutral grey; dividers, meta text       */
  --stone-soft:   #D8D6CF;

  /* Supporting neutrals pulled from the brand brief CSS --------------------- */
  --walnut-70:    #5A3E22;   /* secondary text on cream                       */
  --walnut-50:    #7A5C38;   /* tertiary text; tagline italics                */
  --walnut-30:    #A8927A;
  --bark:         #3B6D11;   /* voice-yes green from brief                    */
  --maple:        #A32D2D;   /* voice-no red from brief                       */
  --paper:        #FBF8F2;   /* very-light cream; modal bg                    */
  --off-white:    #FFFFFF;   /* pure white — card surface                     */

  /* ---- Semantic aliases (use these in components) ------------------------- */
  --bg:           var(--cream);
  --bg-elevated:  var(--off-white);
  --bg-muted:     var(--cream-warm);
  --bg-inverted:  var(--walnut);
  --bg-paper:     var(--paper);

  --fg:           var(--walnut);        /* primary text */
  --fg-muted:     var(--walnut-70);     /* secondary   */
  --fg-subtle:    var(--walnut-50);     /* tertiary / meta */
  --fg-faint:     var(--stone);         /* caption, disabled */
  --fg-inverted:  var(--cream);

  --accent:       var(--ember);
  --accent-ink:   var(--walnut);        /* text on ember */
  --accent-hover: var(--ember-warm);

  --success:      var(--sage);
  --danger:       var(--maple);

  --border:       var(--cream-edge);    /* hairline on cream bg           */
  --border-strong:var(--walnut-30);
  --divider:      var(--stone-soft);

  /* ---- Type families ------------------------------------------------------ */
  --font-serif:   'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Type scale — mobile-first ----------------------------------------- */
  --fs-xs:        11px;
  --fs-sm:        12px;
  --fs-base:      14px;        /* body default                               */
  --fs-md:        15px;
  --fs-lg:        17px;
  --fs-xl:        20px;
  --fs-2xl:       24px;
  --fs-3xl:       32px;
  --fs-4xl:       44px;
  --fs-5xl:       56px;
  --fs-6xl:       72px;

  --lh-tight:     1.15;
  --lh-snug:      1.35;
  --lh-body:      1.65;
  --lh-loose:     1.75;

  --ls-tight:     -0.02em;     /* display serif                              */
  --ls-normal:    0;
  --ls-wide:      0.08em;      /* EYEBROW / label caps                       */
  --ls-widest:    0.18em;      /* EST. 2026, stamp text                      */

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;

  /* ---- Spacing (4px base) ------------------------------------------------- */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ---- Radii — soft & handmade, never sharp ------------------------------ */
  --radius-sm:  4px;        /* pill text, tag */
  --radius-md:  8px;        /* buttons, inputs */
  --radius-lg:  14px;       /* cards */
  --radius-xl:  20px;       /* hero cards */
  --radius-pill: 999px;

  /* ---- Shadows — low, warm, never blue ------------------------------------ */
  /* Shadows should feel like soft paper, not glowing screens. All browns. */
  --shadow-xs:  0 1px 2px rgba(59, 42, 20, 0.05);
  --shadow-sm:  0 2px 6px rgba(59, 42, 20, 0.06), 0 1px 2px rgba(59, 42, 20, 0.04);
  --shadow-md:  0 6px 16px -4px rgba(59, 42, 20, 0.10), 0 2px 4px rgba(59, 42, 20, 0.04);
  --shadow-lg:  0 18px 40px -16px rgba(59, 42, 20, 0.18), 0 4px 10px rgba(59, 42, 20, 0.06);
  --shadow-ink: inset 0 0 0 0.5px rgba(59, 42, 20, 0.20); /* a "hairline" ring */

  /* ---- Motion ------------------------------------------------------------- */
  --ease-out:   cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-fast:   120ms;
  --dur:        200ms;
  --dur-slow:   360ms;

  /* ---- Imagery tint ------------------------------------------------------- */
  --grain-opacity: 0.06;        /* overlay on hero imagery */
}

/* ==========================================================================
   Semantic text styles
   Use these directly: <h1 class="ty-display">…</h1>, or compose via @apply.
   ========================================================================== */

.ty-display {              /* the hero headline */
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-style:  italic;
  font-size:   clamp(44px, 7vw, 72px);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.ty-h1 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-style:  italic;
  font-size:   var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
}

.ty-h2 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-3xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.ty-h3 {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.ty-h4 {                   /* ui section heading — sans, not serif */
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.ty-tagline {              /* "Every piece, built around you." */
  font-family: var(--font-serif);
  font-style:  italic;
  font-weight: var(--fw-regular);
  font-size:   var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

.ty-lede {                 /* intro paragraph under a display */
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.ty-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}

.ty-body-strong {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size:   var(--fs-base);
  line-height: var(--lh-body);
  color: var(--fg);
}

.ty-small {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
}

.ty-eyebrow {              /* "BRAND MISSION" caps label */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size:   var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-subtle);
}

.ty-stamp {                /* "EST. 2026" — widely tracked, tiny */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size:   var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--fg-faint);
}

.ty-meta {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-sm);
  color: var(--fg-subtle);
}

.ty-price {
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size:   var(--fs-xl);
  color: var(--fg);
  letter-spacing: var(--ls-tight);
}

.ty-mono {
  font-family: var(--font-mono);
  font-weight: var(--fw-regular);
  font-size:   var(--fs-sm);
  color: var(--fg-muted);
}

/* base element defaults — apply when this file is imported as the only one */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1 { @extend .ty-h1; }   /* reference only — not every tool supports @extend */