/* ============================================================
   Sofía Carrero · Design Tokens
   Colors + Type + Spacing + Elevation
   ------------------------------------------------------------
   Positioning: "human luxury" — warm sophistication, not cold
   corporate. References: Cartier, Pandora, Bulgari, Victoria's
   Secret. Quiet, breathing, never shouting.
   ============================================================ */

/* ---- Fonts ----
   Two families. Variable fonts, served locally from /fonts/.
   · Display serif w/ italic for emotional moments  → Cormorant Garamond
   · Humanist geometric sans for everything else    → DM Sans
     (covers both the all-caps wide-tracked "mark" role — logo, labels,
      eyebrows, buttons — and the body/UI role, at different weights
      and tracking)

   DM Sans replaces the earlier Montserrat + Mulish substitutions —
   the brand actually runs on a single sans, used at different weights
   and tracking values. */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/CormorantGaramond-VariableFont_wght.ttf") format("truetype-variations");
  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");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Italic-VariableFont_opsz_wght.ttf") format("truetype-variations");
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ============ Core palette ============ */
  --sc-deep-plum:       #3D2645;   /* primary brand · warm aubergine */
  --sc-dusty-mauve:     #8E6F7A;   /* secondary · soft rose-plum */
  --sc-champagne-gold:  #C9A96E;   /* accent · luxe metallic */
  --sc-warm-white:      #FDFCF9;   /* canvas · paper-cream */
  --sc-warm-gray:       #8C8279;   /* neutral · stone */

  /* Logo isotipo intentionally reads navy — never use outside the mark */
  --sc-logo-navy:       #1F2540;

  /* ============ Tonal scale ============ */
  --sc-plum-900: #2A1A30;
  --sc-plum-800: #3D2645;          /* = deep plum */
  --sc-plum-700: #523656;
  --sc-plum-600: #6B4D70;
  --sc-plum-500: #8E6F7A;          /* = dusty mauve */
  --sc-plum-400: #B59AA2;
  --sc-plum-300: #D4C0C7;
  --sc-plum-200: #ECE0E4;
  --sc-plum-100: #F6EEF1;
  --sc-plum-050: #FBF6F8;

  --sc-gold-700: #9B7E45;
  --sc-gold-600: #B49159;
  --sc-gold-500: #C9A96E;          /* = champagne gold */
  --sc-gold-400: #D7BD8C;
  --sc-gold-300: #E5D3B0;
  --sc-gold-200: #F0E5CC;
  --sc-gold-100: #F7EFDE;

  --sc-cream-100: #FDFCF9;         /* = warm white */
  --sc-cream-200: #F8F4EC;
  --sc-cream-300: #EFE8DA;

  --sc-stone-900: #2D2924;
  --sc-stone-700: #4F4842;
  --sc-stone-500: #8C8279;         /* = warm gray */
  --sc-stone-300: #BFB6AC;
  --sc-stone-200: #DAD2C6;

  /* ============ Semantic foreground / background ============ */
  --sc-bg:            var(--sc-cream-100);
  --sc-bg-alt:        var(--sc-cream-200);
  --sc-bg-inverse:    var(--sc-plum-800);
  --sc-bg-inverse-2:  var(--sc-plum-900);

  --sc-fg:            var(--sc-plum-900);        /* primary text on cream */
  --sc-fg-muted:      var(--sc-stone-700);       /* secondary text */
  --sc-fg-subtle:     var(--sc-stone-500);       /* tertiary, captions */
  --sc-fg-accent:     var(--sc-gold-700);        /* labels, micro-CTA */
  --sc-fg-on-dark:    var(--sc-cream-100);       /* text on plum */
  --sc-fg-on-dark-muted: rgba(253, 252, 249, 0.72);

  --sc-line:          rgba(61, 38, 69, 0.12);    /* hairline on light */
  --sc-line-strong:   rgba(61, 38, 69, 0.24);
  --sc-line-on-dark:  rgba(253, 252, 249, 0.18);
  --sc-line-gold:     var(--sc-gold-500);        /* the signature rule */

  --sc-focus-ring:    color-mix(in oklab, var(--sc-gold-500) 60%, transparent);
  --sc-selection-bg:  color-mix(in oklab, var(--sc-gold-300) 60%, transparent);

  /* ============ Type families ============ */
  --sc-font-display:  "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --sc-font-mark:     "DM Sans", "Avenir Next", "Futura", system-ui, sans-serif;        /* mark · logo + labels + eyebrows · uppercase + wide tracking */
  --sc-font-body:     "DM Sans", "Avenir Next", -apple-system, system-ui, sans-serif;   /* body · paragraphs + UI · sentence case */

  /* ============ Tracking / leading ============ */
  --sc-track-mark:    0.24em;        /* logo & section labels */
  --sc-track-eyebrow: 0.18em;
  --sc-track-button:  0.14em;
  --sc-track-body:    0.005em;
  --sc-leading-tight: 1.1;
  --sc-leading-snug:  1.25;
  --sc-leading-body:  1.55;
  --sc-leading-loose: 1.75;

  /* ============ Type scale (fluid-ready, expressed in px) ============ */
  --sc-fs-display-xl: 80px;
  --sc-fs-display-l:  64px;
  --sc-fs-display-m:  48px;
  --sc-fs-h1:         40px;
  --sc-fs-h2:         32px;
  --sc-fs-h3:         24px;
  --sc-fs-h4:         20px;
  --sc-fs-body-l:     18px;
  --sc-fs-body:       16px;
  --sc-fs-body-s:     14px;
  --sc-fs-label:      12px;
  --sc-fs-micro:      11px;

  /* ============ Spacing (8pt-ish, with quiet 4 + airy 64/96) ============ */
  --sc-space-1:  4px;
  --sc-space-2:  8px;
  --sc-space-3:  12px;
  --sc-space-4:  16px;
  --sc-space-5:  24px;
  --sc-space-6:  32px;
  --sc-space-7:  48px;
  --sc-space-8:  64px;
  --sc-space-9:  96px;
  --sc-space-10: 128px;

  /* ============ Radii (light, never bubbly) ============ */
  --sc-radius-xs:   2px;
  --sc-radius-sm:   4px;
  --sc-radius-md:   8px;
  --sc-radius-lg:   14px;
  --sc-radius-xl:   22px;            /* app-icon, cards */
  --sc-radius-pill: 999px;

  /* ============ Shadows · soft, warm, never harsh ============ */
  --sc-shadow-xs: 0 1px 2px rgba(61, 38, 69, 0.06);
  --sc-shadow-sm: 0 2px 6px rgba(61, 38, 69, 0.06), 0 1px 2px rgba(61, 38, 69, 0.04);
  --sc-shadow-md: 0 8px 24px rgba(61, 38, 69, 0.08), 0 2px 6px rgba(61, 38, 69, 0.05);
  --sc-shadow-lg: 0 24px 60px rgba(61, 38, 69, 0.12), 0 8px 18px rgba(61, 38, 69, 0.06);
  --sc-shadow-gold: 0 8px 28px rgba(201, 169, 110, 0.28);

  /* ============ Motion ============ */
  --sc-ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1);     /* default — quiet ease-out */
  --sc-ease-emerge: cubic-bezier(0.16, 1, 0.3, 1);          /* entrances */
  --sc-ease-in:     cubic-bezier(0.4, 0, 0.7, 0.2);
  --sc-dur-quick:   160ms;
  --sc-dur-base:    240ms;
  --sc-dur-slow:    420ms;
  --sc-dur-page:    680ms;
}

/* ============================================================
   Semantic element styles — drop colors_and_type.css and these
   rules cascade for free in any prototype.
   ============================================================ */
html { background: var(--sc-bg); color: var(--sc-fg); }
body {
  font-family: var(--sc-font-body);
  font-size: var(--sc-fs-body);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--sc-selection-bg); color: var(--sc-plum-900); }

h1, h2, h3, h4 {
  font-family: var(--sc-font-mark);
  font-weight: 300;
  color: var(--sc-plum-900);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--sc-fs-h1); letter-spacing: 0.12em; text-transform: uppercase; line-height: var(--sc-leading-snug); }
h2 { font-size: var(--sc-fs-h2); letter-spacing: 0.10em; text-transform: uppercase; line-height: var(--sc-leading-snug); }
h3 { font-size: var(--sc-fs-h3); letter-spacing: 0.06em; line-height: var(--sc-leading-snug); }
h4 { font-size: var(--sc-fs-h4); letter-spacing: 0.04em; line-height: var(--sc-leading-snug); }

.sc-display    { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: var(--sc-fs-display-l); line-height: var(--sc-leading-tight); letter-spacing: 0; color: var(--sc-plum-800); text-wrap: balance; }
.sc-display-xl { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: var(--sc-fs-display-xl); line-height: var(--sc-leading-tight); }

.sc-eyebrow {
  font-family: var(--sc-font-mark);
  font-size: var(--sc-fs-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--sc-track-eyebrow);
  color: var(--sc-fg-accent);
}
.sc-label {
  font-family: var(--sc-font-mark);
  font-size: var(--sc-fs-label);
  font-weight: 400;
  letter-spacing: var(--sc-track-mark);
  text-transform: uppercase;
  color: var(--sc-fg-muted);
}

p { margin: 0 0 var(--sc-space-4); color: var(--sc-fg); text-wrap: pretty; }
p.sc-lede { font-size: var(--sc-fs-body-l); color: var(--sc-fg); line-height: var(--sc-leading-loose); }

small, .sc-caption { font-size: var(--sc-fs-body-s); color: var(--sc-fg-subtle); }

a { color: var(--sc-plum-700); text-decoration: none; border-bottom: 1px solid var(--sc-line-gold); transition: color var(--sc-dur-quick) var(--sc-ease-soft), border-color var(--sc-dur-quick) var(--sc-ease-soft); }
a:hover { color: var(--sc-gold-700); border-color: var(--sc-gold-600); }

hr.sc-rule {
  border: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--sc-line-gold) 18%, var(--sc-line-gold) 82%, transparent);
  margin: var(--sc-space-7) 0;
}
hr.sc-rule.sc-rule-diamond { position: relative; overflow: visible; }
hr.sc-rule.sc-rule-diamond::after {
  content: "✦";
  position: absolute; left: 50%; top: -0.7em; transform: translateX(-50%);
  color: var(--sc-gold-500);
  background: var(--sc-bg);
  padding: 0 0.6em;
  font-size: 14px;
}

/* ============================================================
   Tagline lockup — italic Cormorant, gold diamond separator.
   The brand's emotional centerpiece.
   ============================================================ */
.sc-tagline {
  font-family: var(--sc-font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--sc-fs-h3);
  line-height: var(--sc-leading-snug);
  color: var(--sc-plum-800);
  text-align: center;
  text-wrap: balance;
}
.sc-tagline .sc-tagline-divider {
  display: block;
  margin: var(--sc-space-3) auto;
  color: var(--sc-gold-500);
  font-style: normal;
}