/* ============================================================
   BISPA REGINA SANTANA — DESIGN SYSTEM
   Colors, type, and semantic tokens
   ============================================================
   Two coexisting palettes:
   • Plenitude  — deep forest green + gold + ivory (ceremonial,
     used for the Cura & Libertação / Jornada Plenitude product)
   • Personal   — coffee + cream + champagne (warmer, used for
     the Bispa Regina personal site / linktree / Instagram)
   ============================================================ */

/* ----- WEB FONTS ----------------------------------------------
   All brand fonts now provided locally.
   • Swear Display Light        — primary display headlines
   • Neue Montreal              — sans body / UI (replaces Inter)
   • Montserrat + Montserrat Alternates — alt display / eyebrows
   • Cormorant Garamond (Google) — italic display + editorial body  ← still substitute
   • Pinyon Script (Google)     — script ornament words             ← still substitute
*/

/* ------ Swear Display (display headlines) ------ */
@font-face {
  font-family: 'Swear Display';
  src: url('fonts/SwearDisplay-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ------ Neue Montreal (sans body) ------ */
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-Light.otf') format('opentype');        font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-LightItalic.otf') format('opentype');  font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-Regular.otf') format('opentype');      font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-Italic.otf') format('opentype');       font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-Medium.otf') format('opentype');       font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-MediumItalic.otf') format('opentype'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-Bold.otf') format('opentype');         font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Neue Montreal'; src: url('fonts/NeueMontreal-BoldItalic.otf') format('opentype');   font-weight: 700; font-style: italic; font-display: swap; }

/* ------ Montserrat (system sans, alt) ------ */
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Thin.otf') format('opentype');       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Light.otf') format('opentype');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.otf') format('opentype');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Medium.otf') format('opentype');     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-SemiBold.otf') format('opentype');   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Bold.otf') format('opentype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-ExtraBold.otf') format('opentype');  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Black.otf') format('opentype');      font-weight: 900; font-style: normal; font-display: swap; }

/* ------ Montserrat Alternates (alt display) ------ */
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-Thin.otf') format('opentype');       font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-ExtraLight.otf') format('opentype'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-Light.otf') format('opentype');      font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-Regular.otf') format('opentype');    font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-Medium.otf') format('opentype');     font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-SemiBold.otf') format('opentype');   font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-Bold.otf') format('opentype');       font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-ExtraBold.otf') format('opentype');  font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Montserrat Alternates'; src: url('fonts/MontserratAlternates-Black.otf') format('opentype');      font-weight: 900; font-style: normal; font-display: swap; }

/* ------ Scholar (display serif — primary brand display) ------ */
@font-face {
  font-family: 'Scholar';
  src: url('fonts/Scholar-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Scholar';
  src: url('fonts/Scholar-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ------ Maellen (script ornament) ------ */
@font-face {
  font-family: 'Maellen';
  src: url('fonts/Maellen_Demo.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ------ Google fallbacks (italic display only) ------ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
  /* =====================================================
     PLENITUDE PALETTE  (Cura & Libertação / Jornada)
     ===================================================== */

  /* Verde Floresta — primary green */
  --plenitude-green-900: #0F2419;   /* darkest, on-black surfaces */
  --plenitude-green-800: #163024;   /* hero backgrounds */
  --plenitude-green-700: #1F3A2E;   /* primary brand green */
  --plenitude-green-600: #2D4A3B;   /* hover, raised surfaces */
  --plenitude-green-500: #3E5C4C;   /* secondary surface */
  --plenitude-green-300: #8FA697;   /* dividers on light bg */
  --plenitude-green-100: #DDE6DC;   /* tint, faint backgrounds */

  /* Dourado — gold metallic */
  --gold-900: #6B4D1F;   /* shadow / engraved */
  --gold-800: #8E6A2C;
  --gold-700: #A88440;   /* primary gold (decorative line) */
  --gold-600: #C9A24B;   /* signature gold (logos / display) */
  --gold-500: #D4B062;   /* light gold */
  --gold-400: #DFC585;   /* highlight */
  --gold-300: #ECDAA8;   /* tint */
  --gold-100: #F6EED7;   /* faint */

  /* Marfim — ivory / parchment */
  --ivory-100: #FBF7EC;   /* lightest paper */
  --ivory-200: #F5EFE3;   /* primary parchment background */
  --ivory-300: #EFE7D2;   /* aged paper */
  --ivory-400: #E5DABF;   /* shadow paper */

  /* Sage — secondary green accent (from elemento blobs) */
  --sage-300: #C8DDB8;
  --sage-500: #A8C99A;
  --sage-700: #7DA070;

  /* =====================================================
     PERSONAL PALETTE  (Bispa Regina linktree / site)
     ===================================================== */

  /* Café — warm brown */
  --cafe-900: #2A1A12;
  --cafe-800: #3F2A20;   /* primary site background */
  --cafe-700: #5A3D2E;   /* card background */
  --cafe-600: #7A5642;   /* secondary */
  --cafe-500: #9B7861;   /* muted / dividers */

  /* Champagne — warm metallic */
  --champagne-700: #B89263;
  --champagne-500: #D4B292;
  --champagne-300: #E8D5BF;

  /* Cream — warm off-white */
  --cream-100: #FAF4EB;
  --cream-200: #F3E9DA;
  --cream-300: #E8D9C2;

  /* =====================================================
     UTILITIES — shared accents
     ===================================================== */
  --wine-700: #6B2730;      /* berries on logo / rare accent */
  --wine-500: #8E3845;
  --ink-900: #0E0B07;       /* deepest body type */
  --ink-700: #2C2620;       /* body text on light */
  --ink-500: #5C5247;       /* muted body */

  /* =====================================================
     SEMANTIC TOKENS — Plenitude (default)
     ===================================================== */
  --bg:           var(--ivory-200);
  --bg-elevated:  var(--ivory-100);
  --bg-inverse:   var(--plenitude-green-800);
  --surface:      var(--ivory-100);
  --surface-deep: var(--plenitude-green-700);

  --fg:           var(--ink-900);
  --fg-muted:     var(--ink-500);
  --fg-on-dark:   var(--ivory-100);
  --fg-on-dark-muted: var(--gold-300);

  --accent:       var(--gold-600);   /* the gold */
  --accent-deep:  var(--gold-800);
  --accent-line:  var(--gold-700);   /* hairline rules + flourishes */

  --primary:      var(--plenitude-green-700);
  --primary-deep: var(--plenitude-green-900);
  --primary-tint: var(--plenitude-green-100);

  --border:       rgba(168, 132, 64, 0.35);   /* gold @ 35 */
  --border-strong:rgba(168, 132, 64, 0.7);
  --divider:      rgba(31, 58, 46, 0.12);

  --shadow-sm: 0 1px 2px rgba(15, 36, 25, 0.06), 0 1px 4px rgba(15, 36, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 36, 25, 0.08), 0 2px 4px rgba(15, 36, 25, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 36, 25, 0.12), 0 4px 8px rgba(15, 36, 25, 0.06);
  --shadow-gold: 0 0 24px rgba(201, 162, 75, 0.28);  /* halo behind gold elements */

  /* =====================================================
     TYPOGRAPHY FAMILIES
     ===================================================== */
  --font-display:    'Scholar', 'Swear Display', 'Cormorant Garamond', serif;
  --font-display-alt:'Montserrat Alternates', 'Montserrat', sans-serif;
  --font-serif:      'Scholar', 'Cormorant Garamond', 'Garamond', serif;
  --font-script:     'Maellen', cursive;
  --font-sans:       'Neue Montreal', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Type scale — desktop. Mobile reduces ~75% via responsive classes. */
  --t-display-xl: 88px;  /* hero "CURA & LIBERTAÇÃO" */
  --t-display-lg: 64px;
  --t-display-md: 48px;
  --t-display-sm: 36px;
  --t-h1:         32px;
  --t-h2:         24px;
  --t-h3:         20px;
  --t-body:       16px;
  --t-small:      14px;
  --t-xs:         12px;
  --t-eyebrow:    11px;  /* tracked-out section labels */

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

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 28px;     /* large cards, "Cura & Libertação" capsules */
  --radius-pill: 999px;
  --radius-stamp: 50%;   /* round seals */

  --border-hairline: 1px solid var(--accent-line);
  --border-soft:     1px solid var(--border);
  --border-strong-style: 2px solid var(--border-strong);
}

/* =====================================================
   PERSONAL THEME — opt-in via data attribute or class
   ===================================================== */
[data-theme="personal"], .theme-personal {
  --bg:           var(--cafe-800);
  --bg-elevated:  var(--cafe-700);
  --bg-inverse:   var(--cream-100);
  --surface:      var(--cafe-700);
  --surface-deep: var(--cafe-900);

  --fg:           var(--cream-100);
  --fg-muted:     var(--champagne-300);
  --fg-on-dark:   var(--cream-100);
  --fg-on-dark-muted: var(--champagne-300);

  --accent:       var(--champagne-500);
  --accent-deep:  var(--champagne-700);
  --accent-line:  var(--champagne-700);

  --primary:      var(--cafe-700);
  --primary-deep: var(--cafe-900);
  --primary-tint: var(--cream-200);

  --border:       rgba(184, 146, 99, 0.4);
  --border-strong:rgba(184, 146, 99, 0.75);
  --divider:      rgba(250, 244, 235, 0.12);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.32);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
}

/* =====================================================
   SEMANTIC ELEMENT STYLES — apply by class for now;
   the kit also exposes raw tokens so apps can stay
   un-opinionated.
   ===================================================== */

.ds-display-xl,
.ds-display-lg,
.ds-display-md,
.ds-display-sm {
  font-family: var(--font-display);
  font-weight: 300;
  letter-spacing: 0.005em;
  color: var(--primary-deep);
  line-height: 1.05;
  text-wrap: balance;
  display: block;
}
.ds-display-xl { font-size: var(--t-display-xl); letter-spacing: 0.015em; }
.ds-display-lg { font-size: var(--t-display-lg); }
.ds-display-md { font-size: var(--t-display-md); }
.ds-display-sm { font-size: var(--t-display-sm); }

/* "Gold half" — the lower line of the wordmark, set in gold serif */
.ds-display-gold {
  font-family: var(--font-display);
  color: var(--gold-600);
  background: linear-gradient(180deg, var(--gold-400) 0%, var(--gold-700) 60%, var(--gold-800) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.015em;
}

/* Script italic — “Bispa Regina”, “Deus” style */
.ds-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  color: var(--gold-600);
}

/* Cormorant italic — softer, like the site's "Bispa Regina" headline */
.ds-italic-display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  color: inherit;
  letter-spacing: 0;
}

/* Eyebrows / section labels — Trajan caps with letterspacing */
.ds-eyebrow {
  font-family: var(--font-display);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* Body */
.ds-body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg);
}
.ds-body-serif {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg);
}
.ds-small  { font-family: var(--font-sans); font-size: var(--t-small); color: var(--fg-muted); }
.ds-xs     { font-family: var(--font-sans); font-size: var(--t-xs);    color: var(--fg-muted); }

/* Pull-quote — serif italic, indented with a gold ornament */
.ds-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 28px;
  line-height: 1.35;
  color: var(--fg);
  text-wrap: pretty;
}

/* Section-marker ribbon — used in covers (cura & libertação subtitle) */
.ds-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 32px;
  background: var(--plenitude-green-900);
  color: var(--ivory-100);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  clip-path: polygon(
    0% 0%, 100% 0%, calc(100% - 14px) 50%, 100% 100%,
    0% 100%, 14px 50%
  );
  border-top: 1px solid var(--gold-600);
  border-bottom: 1px solid var(--gold-600);
}

/* Hairline ornament — gold rule with center diamond. Use as <span class="ds-rule" /> */
.ds-rule {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gold-700);
}
.ds-rule::before,
.ds-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}
.ds-rule::before { background: linear-gradient(90deg, transparent, currentColor); }
.ds-rule::after  { background: linear-gradient(90deg, currentColor, transparent); }
.ds-rule__diamond {
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}