/* ============================================================
   Samantha Seitz Interiors — Foundations
   colors_and_type.css
   Grandmillennial / new-traditional / faded-grand.
   Import after the Google Fonts link (Cormorant Garamond + EB Garamond).
   ============================================================ */

/* Self-hosted brand fonts (variable). Paths resolve relative to THIS
   stylesheet (project root), so they work from preview/ and ui_kits/* alike. */
@font-face{
  font-family:"Cormorant Garamond";
  font-style:normal; font-weight:300 700; font-display:swap;
  src:url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face{
  font-family:"Cormorant Garamond";
  font-style:italic; font-weight:300 700; font-display:swap;
  src:url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face{
  font-family:"EB Garamond";
  font-style:normal; font-weight:400 800; font-display:swap;
  src:url("fonts/EBGaramond-VariableFont_wght.ttf") format("truetype-variations");
}
@font-face{
  font-family:"EB Garamond";
  font-style:italic; font-weight:400 800; font-display:swap;
  src:url("fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations");
}

:root {
  /* ---- Palette · raw brand colors ---------------------------- */
  --green:        #3E4B40;   /* Heritage Green — primary anchor   */
  --green-deep:   #283129;   /* Pine Ink — text / darkest         */
  --ivory:        #F2EBDA;   /* Warm Ivory — primary ground       */
  --ivory-deep:   #EAE1CD;   /* Warm Ivory deep — panel ground    */
  --sage:         #9FA587;   /* Saybrook Sage — secondary         */
  --blue:         #A6BBC0;   /* Faded Blue — secondary            */
  --brass:        #A8884E;   /* Antique Brass — accent            */
  --brass-lt:     #D9C79C;   /* Brass Light — fine detail accent  */
  --brass-deep:   #96763F;   /* Brass Deep — borders needing 3:1  */

  /* ---- Tints & washes (derived, never invented hues) --------- */
  --sage-wash:    rgba(159,165,135,0.12);  /* panel tint          */
  --sage-wash-2:  rgba(159,165,135,0.20);
  --blue-wash:    rgba(166,187,192,0.16);
  --green-wash:   rgba(62,75,64,0.06);
  --ivory-80:     rgba(242,235,218,0.88);  /* ivory text on green */
  --ivory-60:     rgba(242,235,218,0.62);

  /* ---- Hairlines — the signature fine rules ------------------ */
  --hair:         rgba(62,75,64,0.22);     /* green hairline      */
  --hair-soft:    rgba(62,75,64,0.12);
  --hair-brass:   rgba(168,136,78,0.55);   /* brass hairline      */
  --hair-dot:     rgba(62,75,64,0.30);     /* dotted dividers     */

  /* ---- Semantic color roles --------------------------------- */
  --bg:           var(--ivory);
  --bg-panel:     var(--ivory-deep);
  --bg-inverse:   var(--green);            /* dark feature blocks */
  --bg-inverse-deep: var(--green-deep);

  --fg1:          var(--green-deep);       /* primary text        */
  --fg2:          rgba(40,49,41,0.72);     /* secondary text      */
  --fg3:          rgba(40,49,41,0.52);     /* tertiary / captions */
  --fg-on-dark:   var(--ivory);
  --fg-on-dark-2: var(--ivory-80);

  --accent:       var(--brass);
  --accent-soft:  var(--brass-lt);
  --rule:         var(--hair);
  --rule-accent:  var(--hair-brass);

  /* ---- Typeface families ------------------------------------ */
  --serif-display: "Cormorant Garamond", "Hoefler Text", Garamond, serif; /* @kind font */
  --serif-body:    "EB Garamond", Georgia, "Times New Roman", serif; /* @kind font */

  /* ---- Type scale (fluid where it helps) -------------------- */
  --t-wordmark:  clamp(34px, 6.5vw, 46px); /* @kind font */
  --t-display:   clamp(40px, 6vw, 72px); /* @kind font */
  --t-h1:        clamp(32px, 4.4vw, 52px); /* @kind font */
  --t-h2:        clamp(26px, 3vw, 34px); /* @kind font */
  --t-h3:        22px;
  --t-lead:      19px;   /* italic deck / lede                   */
  --t-body:      16.5px;
  --t-small:     14px;
  --t-caption:   13px;
  --t-label:     10.5px; /* the uppercase tracked label          */

  /* ---- Tracking (letter-spacing) ---------------------------- */
  --track-label: 0.34em; /* section labels                       */
  --track-kick:  0.40em; /* kickers                              */
  --track-sub:   0.46em; /* wordmark subline                     */
  --track-tight: 0.01em;

  /* ---- Line heights ----------------------------------------- */
  --lh-tight:  1.05; /* @kind other */
  --lh-snug:   1.28; /* @kind other */
  --lh-body:   1.62; /* @kind other */

  /* ---- Spacing scale (8px-ish, traditional rhythm) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 18px;
  --sp-5: 24px;
  --sp-6: 34px;
  --sp-7: 48px;
  --sp-8: 68px;
  --sp-9: 96px;

  /* ---- Radii — restrained; this brand is mostly square ------ */
  --r-none: 0px;
  --r-sm:   2px;    /* default for chips / inputs               */
  --r-md:   4px;
  --r-pill: 999px;  /* used sparingly, for small tags only      */

  /* ---- Shadows — soft, low, warm; never slick --------------- */
  --shadow-sm:  0 1px 2px rgba(40,49,41,0.06);
  --shadow-md:  0 8px 24px -12px rgba(40,49,41,0.22);
  --shadow-lg:  0 24px 60px -28px rgba(40,49,41,0.34);
  --shadow-inset-hair: inset 0 0 0 1px var(--hair-soft);

  /* ---- Motion — quiet, settled, never bouncy ---------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1); /* @kind other */
  --dur:  0.9s; /* @kind other */
  --dur-quick: 0.28s; /* @kind other */

  /* ---- Layout ----------------------------------------------- */
  --measure:    66ch;   /* comfortable reading measure          */
  --content-w:  680px;  /* narrow editorial column              */
  --page-w:     1200px; /* wide marketing container             */
}

/* ============================================================
   Paper grain — the signature aged texture.
   Apply to a fixed ::before on a page or panel.
   ============================================================ */
.ss-grain::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: multiply;
}

/* ============================================================
   Base element styling — semantic defaults
   ============================================================ */
.ss {
  background: var(--bg);
  color: var(--fg1);
  font-family: var(--serif-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings ---------------------------------------------------- */
.ss-display {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  color: var(--green-deep);
  letter-spacing: var(--track-tight);
}
.ss-h1 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  color: var(--green-deep);
}
.ss-h2 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  color: var(--green-deep);
}
.ss-h3 {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: var(--lh-snug);
  color: var(--green);
}

/* Italic lede / deck — the elegant connective voice ----------- */
.ss-lede {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: 1.4;
  color: var(--green);
}

/* Body -------------------------------------------------------- */
.ss-body {
  font-family: var(--serif-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  max-width: var(--measure);
  text-wrap: pretty;
}
.ss-small { font-size: var(--t-small); line-height: 1.6; color: var(--fg2); }
.ss-caption { font-size: var(--t-caption); font-style: italic; color: var(--fg3); }

/* The uppercase tracked label / kicker — used everywhere ------ */
.ss-label {
  font-family: var(--serif-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--brass);
}
.ss-kicker {
  font-family: var(--serif-body);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: var(--track-kick);
  text-transform: uppercase;
  color: var(--brass);
}

/* Price / numerals — italic display, brass on dark ------------ */
.ss-price {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--green);
  white-space: nowrap;
}

/* ============================================================
   The hairline rule — "tape". Brass over green, double line.
   ============================================================ */
.ss-rule {
  position: relative;
  height: 3px;
  width: 100%;
  margin: var(--sp-6) auto;
}
.ss-rule::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--hair-brass);
}
.ss-rule::after {
  content: "";
  position: absolute; top: 3px; left: 0; right: 0;
  height: 1px; background: var(--hair);
}
.ss-rule--thin { height: 1px; }
.ss-rule--thin::after { display: none; }

/* ============================================================
   Quiet entrance — rise & settle. Never bounce.
   ============================================================ */
/* Base (resting) state is the VISIBLE end-state, so frozen timelines,
   print, PDF export and reduced-motion always show content. The animation
   fades IN from hidden using forwards-only fill — during the start delay the
   element shows its visible base, never a stuck opacity:0. */
@media (prefers-reduced-motion: no-preference) {
  .ss-rise {
    animation: ss-rise var(--dur) var(--ease) forwards;
  }
}
@keyframes ss-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}