/* =============================================================
   DonnoWeb Design System — Foundations
   Core color + typography tokens. Import this once in any page
   that wants the DonnoWeb visual language.
   ============================================================= */

/* --- Fonts --------------------------------------------------- */
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap");

:root {
  /* =========================================================
     COLOR TOKENS
     Brand triad — preto, vermelho, dourado.
     Black = canvas. Red = action / heat. Gold = refinement.
     ========================================================= */

  /* Base canvas (obsidian black) */
  --obsidian-0:  #000000;   /* pure black for full-bleed */
  --obsidian-1:  #08080a;   /* page background */
  --obsidian-2:  #0e0e12;   /* elevated surface */
  --obsidian-3:  #15151b;   /* card surface */
  --obsidian-4:  #1c1c24;   /* hover surface */
  --obsidian-5:  #26262f;   /* divider / inset */

  /* Signal red — sourced from the brand logo */
  --red-50:   #fff0f1;
  --red-100:  #ffd7da;
  --red-200:  #ff9ba2;
  --red-300:  #f8636d;
  --red-400:  #ee2a37;
  --red-500:  #e30613;   /* PRIMARY — matches logo D */
  --red-600:  #c20410;
  --red-700:  #97030c;
  --red-800:  #5e0207;
  --red-900:  #2c0103;

  /* Royal gold — refined warm metallic */
  --gold-50:   #fdf8e7;
  --gold-100:  #fbecb4;
  --gold-200:  #f6db7a;
  --gold-300:  #efc644;
  --gold-400:  #e3b026;   /* warm secondary */
  --gold-500:  #c99416;   /* SECONDARY — primary gold */
  --gold-600:  #a3760e;
  --gold-700:  #7a5708;
  --gold-800:  #4b3404;
  --gold-900:  #251a01;

  /* Neutrals on dark canvas */
  --bone-0:  #ffffff;
  --bone-1:  #f5f5f3;
  --bone-2:  #d9d9d2;   /* primary copy on dark */
  --bone-3:  #a8a8a0;   /* secondary copy */
  --bone-4:  #6b6b66;   /* muted / captions */
  --bone-5:  #3e3e3a;   /* placeholder, disabled */

  /* Semantic accents (kept narrow — most state lives in red/gold) */
  --success: #2ec27e;
  --warning: var(--gold-400);
  --danger:  var(--red-500);
  --info:    #4a90e2;

  /* =========================================================
     SEMANTIC ROLES — refer to these from components.
     ========================================================= */
  --bg-canvas:      var(--obsidian-1);
  --bg-surface:     var(--obsidian-2);
  --bg-elevated:    var(--obsidian-3);
  --bg-hover:       var(--obsidian-4);
  --bg-inverse:     var(--bone-1);

  --fg-1:           var(--bone-1);   /* primary on dark */
  --fg-2:           var(--bone-2);   /* secondary on dark */
  --fg-3:           var(--bone-3);   /* tertiary / supporting */
  --fg-4:           var(--bone-4);   /* muted */
  --fg-inverse:     var(--obsidian-1);

  --accent:         var(--red-500);
  --accent-hover:   var(--red-400);
  --accent-press:   var(--red-600);
  --accent-soft:    rgba(227, 6, 19, 0.12);

  --gilt:           var(--gold-500);   /* the refined gold */
  --gilt-hover:     var(--gold-400);
  --gilt-soft:      rgba(201, 148, 22, 0.14);

  --border-1:       rgba(255, 255, 255, 0.08);   /* hairline */
  --border-2:       rgba(255, 255, 255, 0.14);   /* card */
  --border-strong:  rgba(255, 255, 255, 0.22);
  --border-gold:    rgba(201, 148, 22, 0.45);

  /* =========================================================
     SIGNATURE GRADIENTS
     Used very sparingly — hero protection, key CTAs only.
     ========================================================= */
  --grad-ember:     radial-gradient(120% 80% at 50% 0%, rgba(227,6,19,0.18) 0%, rgba(227,6,19,0) 60%);
  --grad-gild:      linear-gradient(135deg, #f0c84a 0%, #c99416 45%, #7a5708 100%);
  --grad-ignite:    linear-gradient(135deg, #ff3340 0%, #e30613 50%, #97030c 100%);
  --grad-protect:   linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.92) 100%);
  --grad-canvas:    linear-gradient(180deg, #08080a 0%, #000000 100%);

  /* =========================================================
     TYPOGRAPHY TOKENS
     ========================================================= */
  --font-display:   "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-body:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:      "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Type scale — 1.250 (major third) on body, expanded for display */
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-30: 1.875rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --fs-60: 3.75rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-mega:   0.18em;

  /* =========================================================
     SPACING + RADII + SHADOWS
     ========================================================= */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* Shadows — almost always heavy/atmospheric on dark canvas */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55);
  --shadow-4: 0 24px 60px rgba(0,0,0,0.65);
  --shadow-glow-red:  0 0 32px rgba(227, 6, 19, 0.35);
  --shadow-glow-gold: 0 0 28px rgba(201, 148, 22, 0.28);
  --shadow-inset:     inset 0 1px 0 rgba(255,255,255,0.04);

  /* Motion */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emph:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   150ms;
  --dur-med:    280ms;
  --dur-slow:   560ms;
}

/* =============================================================
   SEMANTIC TYPE STYLES
   Apply directly as classes (.h1, .p, .eyebrow) OR use the
   element selectors when wrapped in .dw-prose.
   ============================================================= */

.dw-display, .display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-48), 6.5vw, var(--fs-96));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.dw-h1, .h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-36), 4.5vw, var(--fs-60));
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
}

.dw-h2, .h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--fs-30), 3.2vw, var(--fs-48));
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.dw-h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.dw-h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.dw-lead, .lead {
  font-family: var(--font-body);
  font-size: var(--fs-20);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-2);
  text-wrap: pretty;
}

.dw-p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-loose);
  color: var(--fg-2);
  text-wrap: pretty;
}

.dw-small, .small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.dw-caption, .caption {
  font-family: var(--font-body);
  font-size: var(--fs-12);
  line-height: var(--lh-normal);
  color: var(--fg-4);
}

/* Tech-flavored utility — all caps eyebrow, JetBrains for code */
.dw-eyebrow, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--gilt);
}

.dw-code, code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-elevated);
  color: var(--gold-200);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-1);
}

/* Signature gradient text — used on a single hero word, not whole headings */
.dw-gild-text {
  background: var(--grad-gild);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.dw-ember-text {
  background: var(--grad-ignite);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Body reset — apply to any page using DonnoWeb tokens */
.dw-body, body.dw-body {
  background: var(--bg-canvas);
  color: var(--fg-2);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Light theme override — toggle by adding data-theme="light" to html */
[data-theme="light"] {
  --bg-canvas:    #fbfaf7;
  --bg-surface:   #ffffff;
  --bg-elevated:  #ffffff;
  --bg-hover:     #f1efe9;
  --bg-inverse:   var(--obsidian-1);

  --fg-1: var(--obsidian-1);
  --fg-2: #2a2a30;
  --fg-3: #56565d;
  --fg-4: #84848a;
  --fg-inverse: var(--bone-1);

  --border-1: rgba(0,0,0,0.07);
  --border-2: rgba(0,0,0,0.13);
  --border-strong: rgba(0,0,0,0.22);

  --shadow-1: 0 1px 2px rgba(20,15,5,0.08);
  --shadow-2: 0 6px 18px rgba(20,15,5,0.10);
  --shadow-3: 0 18px 40px rgba(20,15,5,0.14);
}