/* ============================================================
   MARGOUSHA — Design Tokens
   Color, type, spacing foundation for the Margousha artist brand.

   Fonts:
   - Display / Logo: "Argent CF" (licensed) → substituted with "Fraunces".
   - Editorial headings: "Cormorant Garamond" — high-contrast serif.
   - Body / UI: "Inter Tight" — neutral workhorse.
   - Accents / handwriting: "Caveat" — used only for artist-voice moments.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter+Tight:ital,wght@0,300..700;1,300..700&family=Caveat:wght@400..700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  --c-noir-encre:        #0E0B10;
  --c-noir-encre-soft:   #1A1618;

  --c-violet-cosmos:     #2B1B3D;
  --c-violet-cosmos-2:   #3E2757;

  --c-lavande:           #C6A9E0;
  --c-lavande-2:         #A884C7;
  --c-lavande-soft:      #E5D6F2;

  --c-vert-pomme:        #C4E538;
  --c-vert-pomme-2:      #B5D62A;

  --c-blanc-chamallow:   #FBF3EE;
  --c-blanc-chamallow-2: #F5EAE2;

  --c-rose-poudre:       #F2C9D1;
  --c-rose-poudre-2:     #E5A9B6;

  --c-framboise:         #D63B6B;
  --c-framboise-2:       #B52A56;

  --c-jaune-miel:        #E9C96A;
  --c-papier:            #EFE6DA;

  /* ---------- SEMANTIC SURFACES ---------- */
  --bg-base:       var(--c-blanc-chamallow);
  --bg-raised:     #FFFFFF;
  --bg-sunken:     var(--c-blanc-chamallow-2);
  --bg-inverse:    var(--c-noir-encre);
  --bg-editorial:  var(--c-violet-cosmos);
  --bg-paper:      var(--c-papier);

  /* ---------- SEMANTIC FOREGROUND ---------- */
  --fg-1:           var(--c-noir-encre);
  --fg-2:           #4A4048;
  --fg-3:           #7A7078;
  --fg-on-dark-1:   var(--c-blanc-chamallow);
  --fg-on-dark-2:   var(--c-lavande);
  --fg-on-dark-3:   #8E7DA0;
  --fg-link:        var(--c-framboise);
  --fg-link-hover:  var(--c-framboise-2);

  /* ---------- BORDERS ---------- */
  --border-hair:    rgba(14, 11, 16, 0.10);
  --border-soft:    rgba(14, 11, 16, 0.18);
  --border-strong:  var(--c-noir-encre);

  /* ---------- STATES ---------- */
  --accent:          var(--c-framboise);
  --accent-hover:    var(--c-framboise-2);
  --accent-soft:     var(--c-rose-poudre);
  --highlight:       var(--c-vert-pomme);
  --highlight-2:     var(--c-vert-pomme-2);

  /* ---------- SPACING ---------- */
  --s-0:   0;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10:  128px;

  /* ---------- RADII ---------- */
  --r-0:    0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   14px;
  --r-pill: 999px;

  /* ---------- SHADOWS ---------- */
  --shadow-sm: 0 1px 2px rgba(43, 27, 61, 0.06), 0 1px 1px rgba(43, 27, 61, 0.04);
  --shadow-md: 0 6px 18px -6px rgba(43, 27, 61, 0.22), 0 2px 4px rgba(43, 27, 61, 0.06);
  --shadow-lg: 0 22px 40px -20px rgba(43, 27, 61, 0.35), 0 8px 16px -8px rgba(43, 27, 61, 0.18);
  --shadow-art: 0 30px 60px -30px rgba(43, 27, 61, 0.55);

  /* ---------- MOTION ---------- */
  --ease-gallery: cubic-bezier(.22, 1, .36, 1);
  --ease-snap:    cubic-bezier(.5, 0, .2, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* ---------- TYPE FAMILIES ---------- */
  --font-display:    "Fraunces", "Argent CF", "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --font-editorial:  "Cormorant Garamond", "Fraunces", Georgia, serif;
  --font-body:       "Inter Tight", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-hand:       "Caveat", "Bradley Hand", cursive;
  --font-mono:       ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- TYPE SCALE ---------- */
  --t-display-xl-size: 7.25rem;
  --t-display-xl-lh:   0.95;
  --t-display-xl-ls:   -0.035em;

  --t-display-lg-size: 4.75rem;
  --t-display-lg-lh:   1.02;
  --t-display-lg-ls:   -0.03em;

  --t-display-md-size: 3rem;
  --t-display-md-lh:   1.08;
  --t-display-md-ls:   -0.025em;

  --t-h1-size: 2.25rem;
  --t-h1-lh:   1.15;
  --t-h1-ls:   -0.02em;

  --t-h2-size: 1.625rem;
  --t-h2-lh:   1.2;
  --t-h2-ls:   -0.015em;

  --t-h3-size: 1.25rem;
  --t-h3-lh:   1.3;

  --t-body-lg-size: 1.125rem;
  --t-body-lg-lh:   1.55;

  --t-body-size: 1rem;
  --t-body-lh:   1.55;

  --t-small-size: 0.875rem;
  --t-small-lh:   1.45;

  --t-micro-size: 0.75rem;
  --t-micro-lh:   1.35;
  --t-micro-ls:   0.14em;
}

/* ============================================================
   BASE TYPOGRAPHY
   ============================================================ */
.display-xl, .display-lg, .display-md,
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--fg-1);
  text-wrap: balance;
}

.display-xl {
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-display-xl-size);
  line-height: var(--t-display-xl-lh);
  letter-spacing: var(--t-display-xl-ls);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.display-lg {
  font-size: var(--t-display-lg-size);
  line-height: var(--t-display-lg-lh);
  letter-spacing: var(--t-display-lg-ls);
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "opsz" 144;
}

.display-md, h1 {
  font-size: var(--t-display-md-size);
  line-height: var(--t-display-md-lh);
  letter-spacing: var(--t-display-md-ls);
  font-weight: 500;
}

h1 {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-ls);
}

h2 {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
  font-style: normal;
  font-family: var(--font-editorial);
  font-weight: 600;
}

h3 {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-micro-size);
  line-height: var(--t-micro-lh);
  letter-spacing: var(--t-micro-ls);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  color: var(--fg-1);
  text-wrap: pretty;
}

.body-lg {
  font-size: var(--t-body-lg-size);
  line-height: var(--t-body-lg-lh);
}

.small, small {
  font-size: var(--t-small-size);
  line-height: var(--t-small-lh);
  color: var(--fg-2);
}

.hand {
  font-family: var(--font-hand);
  font-weight: 500;
  color: var(--c-framboise);
}

code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-snap);
}
a:hover { color: var(--fg-link-hover); text-decoration-thickness: 2px; }

::selection { background: var(--c-vert-pomme); color: var(--c-noir-encre); }