/* ============================================================
   Silverstream Atelier — Colour & Type Foundations
   Brisbane · hand-fabricated sterling silver · quiet luxury
   ------------------------------------------------------------
   Strict rules:
   - NEVER pure white. Use --color-cream.
   - NEVER pure black. Use --color-ink.
   - Rose Vif (--color-rose) is a SIGNAL, not a wallpaper.
   - Introduce NO colours outside these variables.
   ============================================================ */

/* Self-hosted Playfair Display (variable) — uploaded brand files */
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Playfair Display';
  src: url('fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}

/* Georgia — web-safe brand body face. No file bundled (it is a system
   font and not redistributable); declared explicitly via local() so the
   intended brand font is documented and resolves to the installed copy,
   with a graceful serif fallback chain. */
@font-face {
  font-family: 'Georgia';
  src: local('Georgia'), local('Georgia-Regular'), local('Times New Roman');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Georgia';
  src: local('Georgia Italic'), local('Georgia-Italic'), local('Times New Roman Italic');
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---- Core five (from packaging) ---- */
  --color-cream:        #F2EDE6;  /* Crème  — page base, cards     */
  --color-stone:        #CEC3B6;  /* Pierre — primary background   */
  --color-rose:         #C0415A;  /* Rose Vif — primary accent     */
  --color-forest:       #162218;  /* Forêt — dark sections, footer */
  --color-silver:       #C2C2C4;  /* Argent — metallic type, rules */

  /* ---- Extended (derived — no new colours) ---- */
  --color-stone-dark:   #B8AFA4;  /* borders, dividers             */
  --color-stone-light:  #E8E0D6;  /* hover states on stone         */
  --color-rose-dark:    #A03248;  /* pressed states, deep accents  */
  --color-rose-light:   #D4556A;  /* hover states on rose          */
  --color-rose-muted:   #E8C4CC;  /* subtle tints, section washes  */
  --color-forest-mid:   #1E3224;  /* forest mid tones              */
  --color-sage:         #A8C4AC;  /* warm sage — body on forest    */
  --color-ink:          #2A1E20;  /* warm near-black — body copy   */
  --color-ink-light:    #6A5558;  /* captions, meta text           */

  /* ---- Type families ---- */
  --font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:     Georgia, 'Times New Roman', serif;
  --font-mono:     'Courier New', monospace;

  /* ---- Semantic foreground / background ---- */
  --fg-1:          var(--color-ink);        /* primary text       */
  --fg-2:          var(--color-ink-light);  /* secondary text     */
  --fg-accent:     var(--color-rose);       /* the signal         */
  --bg-base:       var(--color-cream);      /* default page base  */
  --bg-raised:     var(--color-stone-light);/* cards on cream     */
  --bg-stone:      var(--color-stone);      /* tonal sections     */
  --bg-dark:       var(--color-forest);     /* editorial / footer */
  --border-hair:   var(--color-stone-dark); /* 1px fine rules     */

  /* ---- Spacing scale ---- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;
  --space-2xl:  128px;

  /* ---- Radii (jewellery is crisp — keep corners restrained) ---- */
  --radius-none: 0px;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-pill: 999px;

  /* ---- Hairline & elevation ---- */
  --rule-hair:   1px solid var(--color-stone-dark);
  --rule-rose:   1px solid var(--color-rose);
  --shadow-soft: 0 2px 24px rgba(42, 30, 32, 0.08);
  --shadow-deep: 0 18px 60px rgba(22, 34, 24, 0.45);

  /* ---- Motion (slow, considered, never bouncy) ---- */
  --ease-luxe:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick:   240ms;
  --dur-slow:    600ms;
}

/* ============================================================
   Semantic type styles
   Display = Playfair (silver-foil stamping feel, wide tracking)
   Body    = Georgia (legible serif)
   ============================================================ */

.ss-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

.ss-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  color: var(--fg-1);
}

.ss-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.12;
  color: var(--fg-1);
}

.ss-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--fg-1);
}

.ss-subhead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-2);
}

.ss-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-1);
}

.ss-caption {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 11px;
  line-height: 1.5;
  color: var(--fg-2);
}

/* All-caps label — mimics foil-stamped lettering on the box */
.ss-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-stone-dark);
}

.ss-price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--color-rose);
}

/* The signature wordmark treatment — wide foil-stamp tracking */
.ss-wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--fg-1);
}