/* =========================================================
   Delta Design — Foundation tokens
   Colors + Typography
   ---------------------------------------------------------
   Brand: Delta Design (Goiânia-GO)
   Direction: dark-first, purple as sole chromatic energy,
   no decorative geometry (no triangles, no polygons),
   Geologica everywhere + Instrument Serif for editorial accents.
   ========================================================= */

/* ----------  Webfonts (local, copied into /fonts)  ---------- */

/* Instrument Serif — Delta's official editorial italic */
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Geologica Cursive — used SPARINGLY for accents / italic emphasis */
@font-face {
  font-family: "Geologica Cursive";
  src: url("fonts/Geologica_Cursive-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geologica Cursive";
  src: url("fonts/Geologica_Cursive-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geologica Cursive";
  src: url("fonts/Geologica_Cursive-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ====================================================================
   Tokens
   ==================================================================== */

:root {
  /* -----  Brand color (official, from Cores spec)  ----- */
  --delta-purple:        #6A06BE;
  --delta-purple-hover:  #5905A0;
  --delta-purple-soft:   #8A2FDB;
  --delta-purple-glow:   rgba(106, 6, 190, 0.35);
  --delta-purple-12:     rgba(106, 6, 190, 0.12);
  --delta-purple-06:     rgba(106, 6, 190, 0.06);

  /* -----  Achromatic ladder (official brand palette)  ----- */
  --delta-black:         #000000;
  --delta-ink:           #282828;
  --delta-ink-2:         #1B1B1F;
  --delta-cloud:         #D9D9D9;
  --delta-paper:         #F6F6F6;
  --delta-paper-pure:    #FFFFFF;

  /* -----  Dark-mode surface ladder  ----- */
  --canvas:              #0A0A0C;
  --surface-1:           #111114;
  --surface-2:           #17171B;
  --surface-3:           #1D1D22;
  --surface-4:           #26262C;
  --surface-line:        rgba(255, 255, 255, 0.08);
  --surface-line-soft:   rgba(255, 255, 255, 0.05);

  /* -----  Light-mode surface ladder  ----- */
  --paper-1:             #FFFFFF;
  --paper-2:             #F6F6F6;
  --paper-3:             #ECECEE;
  --paper-line:          rgba(0, 0, 0, 0.08);
  --paper-line-soft:     rgba(0, 0, 0, 0.05);

  /* -----  Text (semantic, dark-mode defaults)  ----- */
  --fg-1:                #FAFAFA;
  --fg-2:                #C9C9CF;
  --fg-3:                #8E8E96;
  --fg-4:                #5C5C63;
  --fg-on-purple:        #FFFFFF;

  /* -----  Semantic / status  ----- */
  --status-info:    #3B82F6;
  --status-warn:    #F59E0B;
  --status-ok:      #22C55E;
  --status-error:   #EF4444;

  /* -----  Radii  ----- */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-pill: 9999px;

  /* -----  Spacing (8pt scale)  ----- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-28: 112px;
  --s-40: 160px;

  /* -----  Elevation  ----- */
  --shadow-ring:    0 0 0 1px var(--surface-line);
  --shadow-card:    0 0 0 1px var(--surface-line), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-feature: 0 0 0 1px var(--surface-line), 0 8px 32px rgba(0,0,0,0.55), 0 0 24px var(--delta-purple-12);
  --shadow-glow:    0 0 24px var(--delta-purple-glow);
  --shadow-focus:   0 0 0 3px rgba(108,11,214,0.35);

  /* -----  Gradients  ----- */
  --grad-primary:       linear-gradient(135deg, #6A06BE 0%, #8A2FDB 100%);
  --grad-primary-soft:  linear-gradient(135deg, rgba(106,6,190,0.18), rgba(138,47,219,0.08));
  --grad-mesh:          radial-gradient(ellipse 80% 60% at 50% -10%, rgba(106,6,190,0.45), transparent 60%);
  --grad-deep:          linear-gradient(135deg, #282828 0%, #0A0A0C 100%);
  --grad-card-violet:   linear-gradient(135deg, #350868 0%, #6A06BE 100%);
  --grad-card-indigo:   linear-gradient(135deg, #1B1644 0%, #4338CA 100%);

  /* -----  Glass / frosted surfaces  ----- */
  --glass-bg:           rgba(255, 255, 255, 0.06);
  --glass-bg-strong:    rgba(255, 255, 255, 0.10);
  --glass-bg-purple:    rgba(106, 6, 190, 0.18);
  --glass-border:       rgba(255, 255, 255, 0.12);
  --glass-border-soft:  rgba(255, 255, 255, 0.06);
  --glass-blur:         blur(20px) saturate(180%);
  --glass-blur-soft:    blur(10px) saturate(160%);
  --glass-shadow:       0 12px 32px rgba(0, 0, 0, 0.30), inset 0 0 0 1px var(--glass-border);
  --glass-bg-light:     rgba(255, 255, 255, 0.62);
  --glass-border-light: rgba(0, 0, 0, 0.06);
  --glass-shadow-light: 0 12px 32px rgba(0, 0, 0, 0.08), inset 0 0 0 1px var(--glass-border-light);

  /* -----  Motion  ----- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;

  /* -----  Type — family stacks  ----- */
  --font-display: "Geologica", "Geologica Auto", system-ui, sans-serif;
  --font-body:    "Geologica", "Geologica Auto", system-ui, sans-serif;
  --font-accent:  "Geologica Cursive", "Geologica", system-ui, sans-serif;
  --font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* -----  Type — scale  ----- */
  --t-display-1: clamp(56px, 8vw, 96px);
  --t-display-2: clamp(42px, 6vw, 72px);
  --t-h1:        clamp(36px, 4.2vw, 52px);
  --t-h2:        clamp(28px, 3vw, 40px);
  --t-h3:        24px;
  --t-h4:        20px;
  --t-body-lg:   18px;
  --t-body:      16px;
  --t-body-sm:   14px;
  --t-eyebrow:   12px;

  /* -----  Type — tracking  ----- */
  --tr-display: -0.04em;
  --tr-h1:      -0.03em;
  --tr-h2:      -0.02em;
  --tr-h3:      -0.015em;
  --tr-body:    0;
  --tr-eyebrow: 0.08em;
}

/* ====================================================================
   Light theme override
   ==================================================================== */

[data-theme="light"] {
  --canvas:      var(--delta-paper-pure);
  --surface-1:   var(--delta-paper);
  --surface-2:   #ECECEE;
  --surface-3:   #E0E0E3;
  --surface-4:   #D4D4D7;
  --surface-line:      rgba(0,0,0,0.08);
  --surface-line-soft: rgba(0,0,0,0.05);
  --fg-1: var(--delta-ink);
  --fg-2: #3A3A3F;
  --fg-3: #6C6C72;
  --fg-4: #9C9CA2;
  --shadow-card:    0 0 0 1px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-feature: 0 0 0 1px rgba(0,0,0,0.08), 0 12px 36px rgba(0,0,0,0.08), 0 0 24px var(--delta-purple-12);
  --glass-bg:     var(--glass-bg-light);
  --glass-border: var(--glass-border-light);
  --glass-shadow: var(--glass-shadow-light);
}

/* ====================================================================
   Base element styles
   ==================================================================== */

html { background: var(--canvas); color: var(--fg-1); }

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--fg-2);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--fg-1); font-weight: 700; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); letter-spacing: var(--tr-h1); line-height: 1.05; }
h2 { font-size: var(--t-h2); letter-spacing: var(--tr-h2); line-height: 1.1; }
h3 { font-size: var(--t-h3); letter-spacing: var(--tr-h3); line-height: 1.2; font-weight: 600; }
h4 { font-size: var(--t-h4); letter-spacing: var(--tr-h3); line-height: 1.25; font-weight: 600; }

p  { margin: 0; text-wrap: pretty; }
small { font-size: var(--t-body-sm); color: var(--fg-3); }

a { color: var(--delta-purple-soft); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-1); }

/* ----------  Type utilities  ---------- */

.display-1 {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: var(--fg-1);
  text-transform: uppercase;
}
.display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
}
.eyebrow {
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--delta-purple-soft);
}
.accent-italic { font-family: var(--font-accent); font-style: italic; font-weight: 500; }
.accent-serif  { font-family: var(--font-serif); font-weight: 400; letter-spacing: -0.01em; }
.accent-serif.italic { font-style: italic; }
.body-lg { font-size: var(--t-body-lg); line-height: 1.6; color: var(--fg-2); }
.body    { font-size: var(--t-body); line-height: 1.6; color: var(--fg-2); }
.body-sm { font-size: var(--t-body-sm); line-height: 1.5; color: var(--fg-3); }
.mono    { font-family: var(--font-mono); font-size: 13px; color: var(--fg-3); }

/* ====================================================================
   Editorial emphasis — Instrument Serif italic
   ==================================================================== */

em, i {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--delta-purple-soft);
  letter-spacing: -0.01em;
}
h1 em, h2 em, h3 em, h4 em,
.display-1 em, .display-2 em { letter-spacing: -0.02em; }

q {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--fg-1);
  quotes: "\201C" "\201D" "\2018" "\2019";
}
q::before { content: open-quote; }
q::after  { content: close-quote; }

.hi {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--delta-purple-soft);
  letter-spacing: -0.01em;
}
.hi-soft {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: inherit;
  letter-spacing: -0.01em;
}

.pullquote,
blockquote.pullquote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--fg-1);
  margin: 0;
  padding: 12px 0 12px 24px;
  border-left: 2px solid var(--delta-purple-soft);
  max-width: 820px;
}
.pullquote cite, blockquote.pullquote cite {
  display: block;
  margin-top: 16px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 600;
}

/* Back-compat */
.ital {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--delta-purple-soft);
  letter-spacing: -0.01em;
}
.num-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}

/* ----------  Hairline  ---------- */
.hairline { border: 0; height: 1px; background: var(--surface-line); margin: 0; }

/* ====================================================================
   Layout primitives
   ==================================================================== */

.site {
  background: var(--canvas);
  color: var(--fg-2);
  min-height: 100vh;
  font-family: var(--font-body);
  position: relative;
  overflow-x: hidden;
}

.section        { padding: 112px 0; position: relative; }
.section--tight { padding: 72px 0; }
.section.lift   { background: var(--surface-1); }
.section.dark   { background: #000; }

.container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 64px;
  align-items: flex-start;
}
.section-head.centered { align-items: center; text-align: center; }
.section-head .eyebrow { display: inline-flex; align-items: center; gap: 8px; }
.section-head h2 {
  font-size: clamp(36px, 5vw, 58px);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: 1.02;
  max-width: 820px;
  color: var(--fg-1);
}
.section-head h2 .ital {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--delta-purple-soft);
}
.section-head .lede {
  color: var(--fg-2);
  font-size: 17px;
  max-width: 65ch;
  line-height: 1.6;
}

/* Circle dot eyebrow bullet (triangle deprecated → circle) */
.eyebrow.with-tri { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow.with-tri::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--delta-purple-soft);
  border-radius: 50%;
}

.tri-bullet {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--delta-purple-soft);
  border-radius: 50%;
}

.no-serif .ital,
.no-serif .accent-serif {
  font-family: var(--font-accent) !important;
  font-style: italic !important;
  color: var(--delta-purple-soft);
}

@media (max-width: 880px) {
  .section      { padding: 72px 0; }
  .section-head { margin-bottom: 40px; }
  .hide-mobile  { display: none !important; }
}

/* ----------  Glass utilities  ---------- */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-lg);
}
.glass-purple {
  background: var(--glass-bg-purple);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: 0 12px 32px rgba(106,6,190,0.25), inset 0 0 0 1px rgba(255,255,255,0.14);
  border-radius: var(--r-lg);
}
.glass-soft {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  box-shadow: inset 0 0 0 1px var(--glass-border-soft);
  border-radius: var(--r-lg);
}