/* ============================================================
   APP-OWNED DESIGN TOKENS (recovered)
   --------------------------------------------------------------
   Restores the spacing, type, line-height, tracking, z-index and
   semantic-background tokens that the design-system-managed
   tokens.css no longer ships. tokens.css owns brand/colour/font.
   This block owns the rest. Do not duplicate keys already defined
   in tokens.css.
   Recovered from design-kit/css/tokens.css @ 3f01884^ (pre-chrome
   adoption). 2026-06-13.
   ============================================================ */
:root {
  /* —— Brand alias (legacy) ——————————————————————————————————— */
  --tdl-orange:                 #FF4000;

  /* —— Spacing (4px base) ——————————————————————————————————— */
  --tdl-space-1:                4px;
  --tdl-space-2:                8px;
  --tdl-space-3:                12px;
  --tdl-space-4:                16px;
  --tdl-space-5:                20px;
  --tdl-space-6:                24px;
  --tdl-space-8:                32px;
  --tdl-space-10:               40px;
  --tdl-space-12:               48px;
  --tdl-space-16:               64px;
  --tdl-space-20:               80px;
  --tdl-space-24:               96px;

  /* —— Type scale ———————————————————————————————————————— */
  --tdl-fs-display-1:           clamp(48px, 7vw, 88px);
  --tdl-fs-display-2:           clamp(36px, 5vw, 64px);
  --tdl-fs-h1:                  40px;
  --tdl-fs-h2:                  32px;
  --tdl-fs-h3:                  24px;
  --tdl-fs-h4:                  18px;
  --tdl-fs-body:                16px;
  --tdl-fs-sm:                  14px;
  --tdl-fs-xs:                  12px;
  --tdl-fs-2xs:                 10px;

  /* —— Line heights ————————————————————————————————————— */
  --tdl-lh-tight:               1.05;
  --tdl-lh-snug:                1.2;
  --tdl-lh-body:                1.55;

  /* —— Tracking ————————————————————————————————————————— */
  --tdl-tracking-display:       -0.01em;
  --tdl-tracking-label:         0.12em;
  --tdl-tracking-eyebrow:       0.18em;

  /* —— Third hairline tier ——————————————————————————————— */
  --tdl-hairline-3:             #3a3a3a;

  /* —— Z-index scale ————————————————————————————————————— */
  --tdl-z-sticky:               20;
  --tdl-z-overlay:              50;
  --tdl-z-modal:                60;
  --tdl-z-toast:                70;

  /* —— Semantic backgrounds (low-alpha hues) ———————————— */
  --tdl-pos-bg:                 rgba(149, 193, 31, 0.18);
  --tdl-pos-bg-soft:            rgba(149, 193, 31, 0.06);
  --tdl-neg-bg:                 rgba(255, 64, 0, 0.18);
  --tdl-neg-bg-soft:            rgba(255, 64, 0, 0.06);
  --tdl-neg-fg:                 #FFB3B3;
  --tdl-warn-bg:                rgba(245, 166, 35, 0.18);

  /* —— Cool / informational accent ————————————————————— */
  --tdl-cool:                   #50BCBD;
  --tdl-cool-bg:                rgba(80, 188, 189, 0.15);

  /* —— Hero gradient ————————————————————————————————————— */
  --tdl-hero-glow:
    radial-gradient(70% 90% at 95% 100%,
      var(--tdl-accent) 0%,
      rgba(255,64,0,0.45) 18%,
      rgba(255,64,0,0.08) 45%,
      rgba(0,0,0,0) 65%),
    var(--tdl-bg);

  /* —— App-side colour aliases (used by hub.css + run-form) ——— */
  --tdl-color-accent:           var(--tdl-accent);
  --tdl-color-card:             #0c0c0c;
  --tdl-color-fg:               var(--tdl-fg);
  --tdl-color-fg-muted:         var(--tdl-fg-4);
  --tdl-color-line:             var(--tdl-hairline);
  --tdl-color-text:             var(--tdl-fg);
  --tdl-color-text-muted:       var(--tdl-fg-4);

  /* —— Monthly report builder aliases ——————————————————— */
  --mrb-card-2:                 var(--tdl-surf-2);
  --mrb-cool:                   var(--tdl-info);
  --mrb-fg-soft:                var(--tdl-fg-3);
  --mrb-line-2:                 var(--tdl-hairline-2);
  --mrb-pos:                    var(--tdl-pos);
  --mrb-warn:                   var(--tdl-warn);
}

/* ============================================================
   TIDAL UI KIT · BASE & LAYOUT
   Reset, typography, layout primitives.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color-scheme: dark; }
body {
  background: var(--tdl-bg);
  color: var(--tdl-fg);
  font-family: var(--tdl-font-body);
  font-size: var(--tdl-fs-body);
  line-height: var(--tdl-lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }

/* —— Typography classes ————————————————— */
.tdl-display-1 { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-display-1); line-height: var(--tdl-lh-tight); letter-spacing: var(--tdl-tracking-display); text-transform: uppercase; margin: 0; }
.tdl-display-2 { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-display-2); line-height: var(--tdl-lh-tight); letter-spacing: var(--tdl-tracking-display); text-transform: uppercase; margin: 0; }
.tdl-h1 { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-h1); line-height: var(--tdl-lh-snug); letter-spacing: -0.025em; text-transform: uppercase; margin: 0; }
.tdl-h1 .tdl-h1-dot, .tdl-h1-dot { color: var(--tdl-accent); }
.tdl-h2 { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-h2); line-height: var(--tdl-lh-snug); letter-spacing: -0.005em; text-transform: uppercase; margin: 0; }
.tdl-h3 { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-h3); line-height: var(--tdl-lh-snug); text-transform: uppercase; margin: 0; }
.tdl-h4 { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-h4); line-height: var(--tdl-lh-snug); text-transform: uppercase; margin: 0; letter-spacing: 0.02em; }
.tdl-eyebrow { display: block; font-family: var(--tdl-font-body); font-weight: 500; font-size: 11px; letter-spacing: var(--tdl-tracking-eyebrow); text-transform: uppercase; color: var(--tdl-accent); }
.tdl-label { font-family: var(--tdl-font-display); font-weight: 900; font-size: var(--tdl-fs-2xs); letter-spacing: var(--tdl-tracking-label); text-transform: uppercase; color: var(--tdl-fg-3); }
.tdl-body { font-family: var(--tdl-font-body); font-size: var(--tdl-fs-body); line-height: var(--tdl-lh-body); color: var(--tdl-fg); }
.tdl-body-sm { font-family: var(--tdl-font-body); font-size: var(--tdl-fs-sm); line-height: var(--tdl-lh-body); color: var(--tdl-fg-2); }
.tdl-muted { color: var(--tdl-fg-3); }
.tdl-dim { color: var(--tdl-fg-4); }
.tdl-mono { font-family: var(--tdl-font-mono); font-size: var(--tdl-fs-sm); }
.tdl-num { font-variant-numeric: tabular-nums; }

a { color: var(--tdl-accent); text-decoration: none; transition: opacity var(--tdl-dur-fast); }
a:hover { opacity: 0.75; }
hr.tdl-hr { border: 0; border-top: 1px solid var(--tdl-hairline); margin: var(--tdl-space-6) 0; }

::selection { background: var(--tdl-accent); color: var(--tdl-accent-fg); }

/* —— Layout primitives ————————————————— */
.tdl-container { max-width: 1280px; margin: 0 auto; padding: 0 var(--tdl-space-6); }
.tdl-container-tight { max-width: 880px; margin: 0 auto; padding: 0 var(--tdl-space-6); }
.tdl-section { padding: var(--tdl-space-16) 0; }
.tdl-section-sm { padding: var(--tdl-space-12) 0; }
.tdl-section-lg { padding: var(--tdl-space-24) 0; }

.tdl-stack { display: flex; flex-direction: column; }
.tdl-stack-1 { gap: var(--tdl-space-1); }
.tdl-stack-2 { gap: var(--tdl-space-2); }
.tdl-stack-3 { gap: var(--tdl-space-3); }
.tdl-stack-4 { gap: var(--tdl-space-4); }
.tdl-stack-6 { gap: var(--tdl-space-6); }
.tdl-stack-8 { gap: var(--tdl-space-8); }

.tdl-row { display: flex; flex-direction: row; align-items: center; }
.tdl-row-2 { gap: var(--tdl-space-2); }
.tdl-row-3 { gap: var(--tdl-space-3); }
.tdl-row-4 { gap: var(--tdl-space-4); }
.tdl-row-6 { gap: var(--tdl-space-6); }
.tdl-row.wrap { flex-wrap: wrap; }
.tdl-spacer { flex: 1; }

.tdl-grid { display: grid; gap: var(--tdl-space-4); }
.tdl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tdl-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tdl-grid-4 { grid-template-columns: repeat(4, 1fr); }
.tdl-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 900px) {
  .tdl-grid-3, .tdl-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .tdl-grid-6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .tdl-grid-2, .tdl-grid-3, .tdl-grid-4 { grid-template-columns: 1fr; }
  .tdl-grid-6 { grid-template-columns: repeat(2, 1fr); }
}

.tdl-divider { height: 1px; background: var(--tdl-hairline); width: 100%; }
.tdl-vdivider { width: 1px; background: var(--tdl-hairline); align-self: stretch; }

/* Section header pattern */
.tdl-section-head { display: flex; flex-direction: column; gap: var(--tdl-space-3); margin-bottom: var(--tdl-space-8); }
.tdl-section-head .tdl-eyebrow { color: var(--tdl-accent); }