/* ============================================================
   Adriele Correa — Design Tokens
   Colors, typography, spacing, radii, shadows.
   Fonts self-hosted as subset WOFF2 (only the families/weights
   the site actually uses: Fraunces 72 Soft + Manrope).
   ============================================================ */

/* Body — Manrope */
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Display — Fraunces 72 Soft (warm humanist serif, distinctive italic) */
@font-face {
  font-family: "Fraunces 72 Soft";
  src: url("fonts/Fraunces_72pt_Soft-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces 72 Soft";
  src: url("fonts/Fraunces_72pt_Soft-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Fraunces 72 Soft";
  src: url("fonts/Fraunces_72pt_Soft-SemiBold.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Fraunces 72 Soft";
  src: url("fonts/Fraunces_72pt_Soft-SemiBoldItalic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* -------------- BRAND COLORS -------------- */
  --brand-eggplant:      #4a3f5f;
  --brand-cream:         #f0ebe1;
  --brand-lavender:      #a892c4;
  --brand-gold:          #d4a574;
  --brand-brown:         #8b5a2b;

  --eggplant-900:        #2c2438;
  --eggplant-700:        #3a3149;
  --eggplant-600:        #4a3f5f;
  --eggplant-400:        #6f6383;
  --eggplant-300:        #8c819f;

  --cream-50:            #faf7f0;
  --cream-100:           #f0ebe1;
  --cream-200:           #e6dfd0;
  --cream-300:           #d8cfba;

  --lavender-200:        #d6c8e3;
  --lavender-300:        #c1aed4;
  --lavender-400:        #a892c4;
  --lavender-600:        #8568a4;

  --gold-200:            #ecd4b4;
  --gold-300:            #e0bf95;
  --gold-400:            #d4a574;
  --gold-600:            #b88553;
  --gold-700:            #97683b;

  --brown-400:           #a47445;
  --brown-500:           #8b5a2b;
  --brown-700:           #5e3b1a;

  /* -------------- SEMANTIC SURFACES -------------- */
  --bg:                  var(--cream-100);
  --bg-elevated:         var(--cream-50);
  --bg-inverse:          var(--eggplant-700);
  --bg-tint-lavender:    #efe9f3;
  --bg-tint-gold:        #f6ecdc;

  /* -------------- SEMANTIC TEXT -------------- */
  --fg:                  var(--eggplant-700);
  --fg-strong:           var(--eggplant-900);
  --fg-muted:            var(--eggplant-400);
  --fg-subtle:           var(--lavender-400);
  --fg-accent:           var(--gold-700);
  --fg-emphasis:         var(--brown-500);
  --fg-on-dark:          var(--cream-50);
  --fg-on-gold:          var(--eggplant-900);
  /* Eyebrow / small uppercase labels on light backgrounds — darkened
     lavender so 12px bold passes WCAG AA (>= 4.5:1) on cream. */
  --eyebrow:             #6a5685;

  /* -------------- LINES + BORDERS -------------- */
  --border:              #e0d8c6;
  --border-strong:       #c8bda4;
  --border-dark:         rgba(74, 63, 95, 0.18);

  /* -------------- ACCENT / FOCUS -------------- */
  --accent:              var(--gold-400);
  --accent-hover:        var(--gold-600);
  --focus-ring:          0 0 0 3px rgba(212, 165, 116, 0.45);
  --link:                var(--eggplant-700);
  --link-hover:          var(--gold-700);

  /* -------------- IRIDESCENT GRADIENTS -------------- */
  --gradient-iridescent: linear-gradient(
                           110deg,
                           #6f5b8e 0%,
                           #a892c4 35%,
                           #e9d5b8 62%,
                           #d4a574 100%
                         );
  --gradient-iridescent-soft: linear-gradient(
                           110deg,
                           rgba(168, 146, 196, 0.22) 0%,
                           rgba(233, 213, 184, 0.28) 55%,
                           rgba(212, 165, 116, 0.22) 100%
                         );
  --gradient-hero-cream: radial-gradient(
                           120% 80% at 20% 0%,
                           #f6ecdc 0%,
                           #f0ebe1 45%,
                           #efe9f3 100%
                         );

  /* -------------- TYPOGRAPHY -------------- */
  --font-display:     "Fraunces 72 Soft", "Fraunces", Georgia, "Times New Roman", serif;
  --font-display-alt: "DM Serif Display", "Fraunces 72 Soft", Georgia, serif;
  --font-display-classic: "Cormorant Garamond", "Fraunces 72 Soft", Georgia, serif;

  --font-body:      "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body-alt:  "DM Sans", "Manrope", -apple-system, sans-serif;
  --font-body-ui:   "Inter", "Manrope", -apple-system, sans-serif;

  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  3rem;
  --text-4xl:  4rem;
  --text-5xl:  5.5rem;

  --leading-tight:   1.08;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-eyebrow:0.18em;

  /* -------------- SPACING (4pt base) -------------- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5.5rem;
  --space-11: 7rem;

  /* -------------- RADII -------------- */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;
  --radius-pill: 999px;

  /* -------------- SHADOWS -------------- */
  --shadow-xs:  0 1px 2px rgba(74, 63, 95, 0.05);
  --shadow-sm:  0 2px 6px rgba(74, 63, 95, 0.06),
                0 1px 2px rgba(74, 63, 95, 0.04);
  --shadow-md:  0 8px 22px rgba(74, 63, 95, 0.08),
                0 2px 6px rgba(74, 63, 95, 0.04);
  --shadow-lg:  0 18px 50px rgba(74, 63, 95, 0.10),
                0 6px 16px rgba(74, 63, 95, 0.06);
  --shadow-gold: 0 14px 38px rgba(212, 165, 116, 0.32);
  --shadow-inset:inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* -------------- MOTION -------------- */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-quick: 160ms;
  --duration-base:  240ms;
  --duration-slow:  420ms;
}

/* ============================================================
   SEMANTIC ELEMENT DEFAULTS
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display, .h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  color: var(--fg-strong);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

h1, .h1 { font-size: var(--text-4xl); }
h2, .h2 { font-size: var(--text-3xl); }
h3, .h3 { font-size: var(--text-2xl); font-weight: 500; }
h4, .h4 { font-size: var(--text-xl);  font-weight: 500; letter-spacing: 0; }

.display { font-size: var(--text-5xl); font-weight: 500; }

.display em, h1 em, h2 em, h3 em {
  font-style: italic;
  color: var(--fg-emphasis);
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow);
}

p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--fg);
  margin: 0;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg);
}

small, .caption {
  font-size: var(--text-sm);
  color: var(--fg-muted);
}

.emphasis {
  color: var(--fg-emphasis);
  font-weight: 600;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: rgba(212, 165, 116, 0.55);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color var(--duration-quick) var(--ease-out-soft),
              text-decoration-color var(--duration-quick) var(--ease-out-soft);
}
a:hover { color: var(--link-hover); text-decoration-color: var(--gold-600); }

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

::selection { background: var(--gold-200); color: var(--eggplant-900); }