/* ============================================================
   GANDORA — Design System Tokens
   Colors, typography, spacing, radii, shadow, motion
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&family=JetBrains+Mono:wght@300;400&display=swap");

/* ---- Cinzel Decorative — self-hosted ---- */
@font-face {
  font-family: "Cinzel Decorative";
  src: url("fonts/CinzelDecorative-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("fonts/CinzelDecorative-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("fonts/CinzelDecorative-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---- Montserrat — self-hosted variable fonts ---- */
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLORS · primary palette ---------- */
  --gd-cera:       #F9F6F0;  /* Cera Natural · paper / primary bg */
  --gd-terracota:  #C08261;  /* Terracota Suave · ceramic warmth */
  --gd-salvia:     #8A9A5B;  /* Verde Sálvia · botanic / monastic */
  --gd-carvao:     #333333;  /* Carvão Orgânico · text, never pure black */
  --gd-kraft:      #D9C7A0;  /* Kraft paper accent (packaging) */

  /* ---------- COLORS · cera surfaces ---------- */
  --gd-cera-50:    #FBF9F4;
  --gd-cera-100:   #F4EFE5;
  --gd-paper-tint: #EDE6D7;

  /* ---------- COLORS · terracota scale ---------- */
  --gd-terracota-200: #F1E0D5;
  --gd-terracota-400: #DFB89F;
  --gd-terracota-600: #C08261;
  --gd-terracota-800: #95613F;
  --gd-terracota-900: #5C3A22;
  --gd-terracota-soft: #D4A48A;

  /* ---------- COLORS · sálvia scale ---------- */
  --gd-salvia-200: #E2E5D0;
  --gd-salvia-400: #B8C28D;
  --gd-salvia-600: #8A9A5B;
  --gd-salvia-800: #62703D;
  --gd-salvia-900: #3D4626;
  --gd-salvia-soft: #A8B580;

  /* ---------- COLORS · carvão scale (neutrals) ---------- */
  --gd-carvao-200: #B0AFAB;
  --gd-carvao-400: #6B6B68;
  --gd-carvao-600: #4A4A48;
  --gd-carvao-800: #333333;
  --gd-carvao-900: #1F1F1F;

  /* ---------- SEMANTIC ---------- */
  --bg:       var(--gd-cera);
  --bg-alt:   var(--gd-cera-50);
  --surface:  var(--gd-cera-100);
  --paper:    var(--gd-paper-tint);
  --fg:       var(--gd-carvao);
  --fg-muted: #6B6B68;
  --fg-soft:  #8A8A86;
  --rule:     rgba(51, 51, 51, 0.14);
  --rule-strong: rgba(51, 51, 51, 0.28);
  --accent:   var(--gd-terracota);
  --accent-2: var(--gd-salvia);
  --link:     var(--gd-terracota);

  /* ---------- TYPOGRAPHY · families ---------- */
  --font-serif:  "Cinzel Decorative", "Cinzel", "Cormorant Garamond", serif;
  --font-sans:   "Montserrat", "Helvetica Neue", system-ui, sans-serif;
  --font-script: "Great Vibes", "Pinyon Script", cursive;
  --font-mono:   "JetBrains Mono", "IBM Plex Mono", monospace;

  /* ---------- TYPOGRAPHY · base ---------- */
  --tracking-tight:  0.02em;
  --tracking-normal: 0.04em;
  --tracking-wide:   0.12em;
  --tracking-xwide:  0.22em;
  --tracking-mono:   0.18em;
  --leading-display: 0.95;
  --leading-heading: 1.15;
  --leading-body:    1.7;

  /* ---------- TYPOGRAPHY · roles (font-shorthand-ish vars) ---------- */
  --type-display:  400 clamp(48px, 7vw, 96px)/0.95 var(--font-serif);
  --type-h1:       400 clamp(36px, 4.4vw, 56px)/1.05 var(--font-serif);
  --type-h2:       400 clamp(26px, 2.8vw, 36px)/1.15 var(--font-serif);
  --type-h3:       400 22px/1.2 var(--font-serif);
  --type-eyebrow:  400 11px/1.4 var(--font-mono);
  --type-body:     300 16px/1.7 var(--font-sans);
  --type-body-sm:  300 14px/1.65 var(--font-sans);
  --type-label:    400 12px/1.4 var(--font-sans);
  --type-caption:  400 11px/1.4 var(--font-sans);
  --type-script:   400 32px/1.1 var(--font-script);
  --type-script-sm:400 22px/1.1 var(--font-script);

  /* ---------- SPACING (8pt base) ---------- */
  --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: 88px;
  --space-10: 120px;

  /* ---------- RADII ---------- */
  --radius-0: 0;        /* default — editorial sharp corners */
  --radius-1: 2px;
  --radius-2: 4px;
  --radius-pill: 999px;

  /* ---------- SHADOWS — long, low, warm ---------- */
  --shadow-rest:   0 1px 2px rgba(51,33,18,0.04);
  --shadow-low:    0 8px 18px -10px rgba(51,33,18,0.18);
  --shadow-mid:    0 24px 40px -22px rgba(51,33,18,0.28);
  --shadow-deep:   0 40px 60px -30px rgba(51,33,18,0.35);
  --shadow-candle: 0 0 60px rgba(255, 200, 130, 0.35);

  /* ---------- MOTION ---------- */
  --ease-natural:  cubic-bezier(0.4, 0, 0.2, 1);
  --ease-candle:   cubic-bezier(0.36, 0.07, 0.19, 0.97); /* soft, breath-like */
  --dur-quick: 180ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
  --dur-breathe: 6s;

  /* ---------- LAYOUT ---------- */
  --measure: 64ch;     /* ideal reading width */
  --measure-tight: 46ch;
  --gutter: 32px;
}

/* ---------- DARK THEME (Carvão) ---------- */
[data-theme="dark"] {
  --bg:        #2A2A2A;
  --bg-alt:    #3A3937;
  --surface:   #3A3937;
  --paper:     #3A3937;
  --fg:        var(--gd-cera);
  --fg-muted:  #B5B0A4;
  --fg-soft:   #8A8A86;
  --rule:      rgba(249, 246, 240, 0.14);
  --rule-strong: rgba(249, 246, 240, 0.28);
  --shadow-rest: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-low:  0 8px 18px -10px rgba(0,0,0,0.5);
  --shadow-mid:  0 24px 40px -22px rgba(0,0,0,0.6);
}

/* ============================================================
   ELEMENT-LEVEL DEFAULTS
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font: var(--type-body);
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--type-h1); letter-spacing: var(--tracking-normal); }
h2, .h2 { font: var(--type-h2); letter-spacing: var(--tracking-normal); }
h3, .h3 { font: var(--type-h3); letter-spacing: var(--tracking-normal); }
.display { font: var(--type-display); letter-spacing: var(--tracking-tight); }

.eyebrow {
  font: var(--type-eyebrow);
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

.script { font: var(--type-script); color: var(--accent); }
.script-sm { font: var(--type-script-sm); color: var(--accent); }

.caption {
  font: var(--type-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-muted);
}

p { font: var(--type-body); color: var(--fg); text-wrap: pretty; max-width: var(--measure); }
small, .small { font: var(--type-body-sm); color: var(--fg-muted); }

a { color: var(--link); text-decoration: none; border-bottom: 1px solid currentColor; transition: opacity var(--dur-base) var(--ease-natural); }
a:hover { opacity: 0.7; }

hr { border: 0; border-top: 1px solid var(--rule); margin: var(--space-7) 0; }

/* Subtle paper noise — apply to body or any surface */
.gd-paper-noise {
  position: relative;
}
.gd-paper-noise::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(51,51,51,0.025) 1px, transparent 1px),
    radial-gradient(rgba(51,51,51,0.018) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 2px;
  mix-blend-mode: multiply;
  opacity: 0.7;
}

/* Kraft paper texture utility (packaging, sacolas, rótulos) */
.gd-kraft {
  background-color: #C9B689;
  background-image:
    radial-gradient(at 25% 30%, rgba(165,138,90,0.4), transparent 35%),
    radial-gradient(at 75% 80%, rgba(120,95,55,0.35), transparent 40%),
    repeating-linear-gradient(45deg, rgba(140,110,70,0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-30deg, rgba(80,55,30,0.05) 0 2px, transparent 2px 6px);
  color: #4A3A22;
}

/* Candle glow — for hero / featured imagery */
.gd-candle-glow {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 226, 180, 0.55), transparent 55%),
    radial-gradient(ellipse at 30% 20%, rgba(192,130,97,0.20), transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(138,154,91,0.14), transparent 60%);
}

@keyframes gd-breathe {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.05); opacity: 1; }
}