/* ============================================================
   Delto Design System — Core Tokens
   Brand foundations: colors, typography, spacing, radii, shadows

   Source: brand-identity.md, palette.md, typography.md,
           visual-system.md, insights-design-system.md, delto-doc.css

   FONT NOTE: brand display is TT Hoves (self-hosted from
   assets/fonts/). DM Sans is loaded too — used for body copy and
   as a fallback before TT Hoves swaps in.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=DM+Mono:wght@400;500&display=swap');

/* ── TT Hoves — self-hosted OTFs, 4 weights × 2 styles ───── */
@font-face {
  font-family: 'TT Hoves';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/TT Hoves Light.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/TT Hoves Light Italic.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TT Hoves Regular.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/TT Hoves Italic.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/TT Hoves Medium.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/TT Hoves Medium Italic.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/TT Hoves Bold.otf') format('opentype');
}
@font-face {
  font-family: 'TT Hoves';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/TT Hoves Bold Italic.otf') format('opentype');
}

:root {
  /* ─── BRAND COLORS ─────────────────────────────────────── */
  --dt-teal:         #01373d;  /* Primary — Dark Teal */
  --dt-lime:         #c0f43d;  /* Accent — highlights, CTAs */
  --dt-sand:         #f2e0c9;  /* Secondary — warm surfaces */
  --dt-lilac:        #cec7ff;  /* Tertiary — tech/innovation accents */

  /* Extended teal scale */
  --dt-teal-deep:    #012830;  /* Deeper than primary — gradients, alt slides */
  --dt-teal-mid:     #01535b;  /* Gradient middle stop */
  --dt-teal-light:   #024a53;
  --dt-teal-lighter: #03636e;
  --dt-teal-05:      rgba(1,55,61,.05);
  --dt-teal-10:      rgba(1,55,61,.10);
  --dt-teal-20:      rgba(1,55,61,.20);

  /* Extended accent scales */
  --dt-lime-dark:    #9bc832;
  --dt-lime-light:   #d4f87a;
  --dt-lilac-dark:   #a89ef5;
  --dt-lilac-light:  #e8e4ff;
  --dt-sand-light:   #f8f0e4;

  /* RGB tuples (for rgba() use) */
  --dt-teal-rgb:   1, 55, 61;
  --dt-lime-rgb:   192, 244, 61;
  --dt-sand-rgb:   242, 224, 201;
  --dt-lilac-rgb:  206, 199, 255;

  /* ─── SEMANTIC COLORS ──────────────────────────────────── */
  --dt-bg:           #ffffff;
  --dt-bg-subtle:    #f8f9fa;
  --dt-bg-code:      #f4f5f7;

  --dt-fg:           #1a1a2e;   /* body text */
  --dt-fg-muted:     #4a5568;   /* secondary text */
  --dt-fg-dim:       #718096;   /* tertiary text */

  --dt-border:       #e2e8f0;
  --dt-border-soft:  #edf2f7;

  /* Semantic status (tuned to Delto insights palette) */
  --dt-success:      #22c55e;
  --dt-warning:      #f59e0b;
  --dt-danger:       #ef4444;
  --dt-info:         var(--dt-lilac-dark);

  /* Insights report-specific semantic (darker/more saturated for charts) */
  --dt-chart-danger:  #ff6b6b;
  --dt-chart-warn:    #ffa94d;
  --dt-chart-cyan:    #5bd5d5;

  /* Dark-surface tokens (on teal backgrounds) */
  --dt-on-dark-fg:       #ffffff;
  --dt-on-dark-dim:      rgba(255,255,255,.6);
  --dt-on-dark-muted:    rgba(255,255,255,.35);
  --dt-on-dark-card:     rgba(255,255,255,.06);
  --dt-on-dark-border:   rgba(255,255,255,.1);

  /* ─── TYPOGRAPHY ───────────────────────────────────────── */
  --dt-font-display: 'TT Hoves', 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dt-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --dt-font-mono:    'DM Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale — fluid, follows Delto insights conventions */
  --dt-text-xs:   0.75rem;   /* 12 */
  --dt-text-sm:   0.875rem;  /* 14 */
  --dt-text-base: 1rem;      /* 16 */
  --dt-text-md:   1.125rem;  /* 18 */
  --dt-text-lg:   1.25rem;   /* 20 */
  --dt-text-xl:   1.5rem;    /* 24 */
  --dt-text-2xl:  1.875rem;  /* 30 */
  --dt-text-3xl:  2.25rem;   /* 36 */
  --dt-text-4xl:  3rem;      /* 48 */
  --dt-text-5xl:  clamp(2.5rem, 4.5vw, 4rem);
  --dt-text-hero: clamp(3.5rem, 7vw, 6rem);

  --dt-lh-tight:   1.1;
  --dt-lh-snug:    1.3;
  --dt-lh-normal:  1.5;
  --dt-lh-relaxed: 1.7;

  --dt-tracking-tight:  -0.02em;
  --dt-tracking-normal: 0;
  --dt-tracking-wide:   0.06em;
  --dt-tracking-wider:  0.12em;

  /* ─── SPACING (4pt grid) ───────────────────────────────── */
  --dt-space-0:   0;
  --dt-space-1:   4px;
  --dt-space-2:   8px;
  --dt-space-3:   12px;
  --dt-space-4:   16px;
  --dt-space-5:   20px;
  --dt-space-6:   24px;
  --dt-space-8:   32px;
  --dt-space-10:  40px;
  --dt-space-12:  48px;
  --dt-space-16:  64px;
  --dt-space-20:  80px;
  --dt-space-24:  96px;

  /* ─── RADII ────────────────────────────────────────────── */
  --dt-radius-xs:  4px;
  --dt-radius-sm:  6px;
  --dt-radius-md:  10px;
  --dt-radius-lg:  14px;
  --dt-radius-xl:  20px;
  --dt-radius-2xl: 28px;
  --dt-radius-full: 9999px;

  /* ─── SHADOWS (light surfaces) ─────────────────────────── */
  --dt-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --dt-shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --dt-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --dt-shadow-lg: 0 8px 30px rgba(0,0,0,0.10);
  --dt-shadow-xl: 0 24px 48px rgba(1,55,61,0.12);

  /* Glow / accent halo — used on hero cards, CTAs */
  --dt-glow-lime:  0 0 40px rgba(192,244,61,.35);
  --dt-glow-teal:  0 8px 30px rgba(1,55,61,.25);

  /* ─── MOTION ───────────────────────────────────────────── */
  --dt-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dt-ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dt-ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dt-ease-emph:    cubic-bezier(0.22, 1, 0.36, 1);
  --dt-dur-fast:     120ms;
  --dt-dur-base:     200ms;
  --dt-dur-slow:     400ms;
  --dt-dur-reveal:   700ms;
  --dt-dur-scroll:   1000ms;
  --dt-stagger:      80ms;

  /* ─── SECTION TONES (ritmo cromático) ──────────────────── */
  /* Used by `<section class="sect on-{tone}">` to alternate
     surfaces and break monotony. Pair tones:
     dark → cream, dark → lilac, sand → dark, etc.            */
  --dt-tone-dark:        linear-gradient(180deg, #012830 0%, #01373d 100%);
  --dt-tone-dark-deep:   radial-gradient(ellipse at top, #02484f 0%, #01242a 70%);
  --dt-tone-cream:       #fbfaf6;
  --dt-tone-sand:        var(--dt-sand);
  --dt-tone-sand-soft:   #f8efe1;
  --dt-tone-lilac:       var(--dt-lilac-light);
  --dt-tone-lilac-deep:  var(--dt-lilac);
  --dt-tone-white:       #ffffff;

  /* ─── LAYOUT ───────────────────────────────────────────── */
  --dt-container:    1200px;
  --dt-container-wide: 1440px;
  --dt-page-pad:     clamp(20px, 5vw, 80px);
}

/* ============================================================
   SEMANTIC TEXT STYLES
   Usage: class="dt-h1" or direct tag styling via .dt-prose
   ============================================================ */

.dt-hero,
.dt-prose h1.dt-hero {
  font-family: var(--dt-font-display);
  font-size: var(--dt-text-hero);
  font-weight: 700;
  line-height: var(--dt-lh-tight);
  letter-spacing: var(--dt-tracking-tight);
  color: var(--dt-teal);
}

.dt-h1 {
  font-family: var(--dt-font-display);
  font-size: var(--dt-text-5xl);
  font-weight: 700;
  line-height: var(--dt-lh-tight);
  letter-spacing: var(--dt-tracking-tight);
  color: var(--dt-teal);
}

.dt-h2 {
  font-family: var(--dt-font-display);
  font-size: var(--dt-text-3xl);
  font-weight: 700;
  line-height: var(--dt-lh-snug);
  letter-spacing: var(--dt-tracking-tight);
  color: var(--dt-teal);
}

.dt-h3 {
  font-family: var(--dt-font-display);
  font-size: var(--dt-text-xl);
  font-weight: 600;
  line-height: var(--dt-lh-snug);
  color: var(--dt-teal);
}

.dt-h4 {
  font-family: var(--dt-font-body);
  font-size: var(--dt-text-md);
  font-weight: 600;
  line-height: var(--dt-lh-snug);
  color: var(--dt-teal);
}

.dt-eyebrow {
  font-family: var(--dt-font-body);
  font-size: var(--dt-text-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--dt-tracking-wider);
  text-transform: uppercase;
  color: var(--dt-teal);
}

.dt-body {
  font-family: var(--dt-font-body);
  font-size: var(--dt-text-base);
  font-weight: 400;
  line-height: var(--dt-lh-relaxed);
  color: var(--dt-fg-muted);
}

.dt-body-lg {
  font-family: var(--dt-font-body);
  font-size: var(--dt-text-md);
  font-weight: 400;
  line-height: var(--dt-lh-relaxed);
  color: var(--dt-fg-muted);
}

.dt-body-sm {
  font-family: var(--dt-font-body);
  font-size: var(--dt-text-sm);
  font-weight: 400;
  line-height: var(--dt-lh-normal);
  color: var(--dt-fg-muted);
}

.dt-label {
  font-family: var(--dt-font-body);
  font-size: var(--dt-text-xs);
  font-weight: 600;
  letter-spacing: var(--dt-tracking-wide);
  text-transform: uppercase;
  color: var(--dt-fg-dim);
}

.dt-code {
  font-family: var(--dt-font-mono);
  font-size: 0.9em;
  background: var(--dt-bg-code);
  padding: 0.15em 0.4em;
  border-radius: var(--dt-radius-xs);
  color: var(--dt-teal);
}

/* Highlight span — lime by default, use inside headings */
.dt-highlight { color: var(--dt-lime-dark); }
.dt-highlight-on-dark { color: var(--dt-lime); }

/* When placed on dark teal surfaces, invert text tokens */
.dt-on-dark {
  color: var(--dt-on-dark-fg);
}
.dt-on-dark .dt-h1,
.dt-on-dark .dt-h2,
.dt-on-dark .dt-h3,
.dt-on-dark .dt-h4,
.dt-on-dark .dt-hero { color: var(--dt-on-dark-fg); }
.dt-on-dark .dt-body,
.dt-on-dark .dt-body-lg,
.dt-on-dark .dt-body-sm { color: var(--dt-on-dark-dim); }
.dt-on-dark .dt-label   { color: var(--dt-on-dark-muted); }
.dt-on-dark .dt-eyebrow { color: var(--dt-lime); }

/* Prose container — apply once to parent, style tags directly */
.dt-prose {
  font-family: var(--dt-font-body);
  color: var(--dt-fg-muted);
  line-height: var(--dt-lh-relaxed);
}
.dt-prose h1 { font-family: var(--dt-font-display); font-size: var(--dt-text-5xl); font-weight: 700; line-height: var(--dt-lh-tight); letter-spacing: var(--dt-tracking-tight); color: var(--dt-teal); margin: 0 0 var(--dt-space-6); }
.dt-prose h2 { font-family: var(--dt-font-display); font-size: var(--dt-text-3xl); font-weight: 700; line-height: var(--dt-lh-snug); letter-spacing: var(--dt-tracking-tight); color: var(--dt-teal); margin: var(--dt-space-12) 0 var(--dt-space-4); }
.dt-prose h3 { font-family: var(--dt-font-display); font-size: var(--dt-text-xl); font-weight: 600; color: var(--dt-teal); margin: var(--dt-space-8) 0 var(--dt-space-3); }
.dt-prose h4 { font-size: var(--dt-text-md); font-weight: 600; color: var(--dt-teal); margin: var(--dt-space-6) 0 var(--dt-space-2); }
.dt-prose p  { font-size: var(--dt-text-base); margin: 0 0 var(--dt-space-4); }
.dt-prose strong { color: var(--dt-fg); font-weight: 600; }
.dt-prose a { color: var(--dt-teal); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1.5px; }
.dt-prose a:hover { color: var(--dt-teal-lighter); }
.dt-prose code { font-family: var(--dt-font-mono); font-size: 0.9em; background: var(--dt-bg-code); padding: 0.15em 0.4em; border-radius: var(--dt-radius-xs); color: var(--dt-teal); }
.dt-prose ul, .dt-prose ol { margin: 0 0 var(--dt-space-4); padding-left: var(--dt-space-6); }
.dt-prose li { margin-bottom: 0.35em; }
.dt-prose li::marker { color: var(--dt-teal); }

/* Base reset — optional. Applied when class="dt" on <html> or <body> */
.dt * { box-sizing: border-box; }
.dt body { font-family: var(--dt-font-body); color: var(--dt-fg); background: var(--dt-bg); line-height: var(--dt-lh-normal); -webkit-font-smoothing: antialiased; }