@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
/* hellodjt — Brand Token Overrides
   Load AFTER dothello.css. Never modify dothello.css directly.
   ============================================================ */
:root {

  /* --- Brand Colors --- */
  --dh-color-primary:        #6ee7b7;
  --dh-color-primary-light:  #a7f3d0;
  --dh-color-primary-dark:   #34d399;

  --dh-color-accent:         #f87171;
  --dh-color-accent-light:   #fca5a5;
  --dh-color-accent-dark:    #ef4444;

  /* --- Dark Surfaces (hellodjt palette) --- */
  --dh-color-dark:           #0d0d0d;
  --dh-color-dark-soft:      #111111;
  --dh-color-dark-mid:       #181818;

  /* --- Text (light on dark) --- */
  --dh-color-text:           #f0f0f0;
  --dh-color-text-muted:     #888888;
  --dh-color-text-inverse:   #0d0d0d;

  /* --- Borders --- */
  --dh-color-border:         #2a2a2a;
  --dh-color-border-light:   rgba(255, 255, 255, 0.07);
  --dh-color-border-mid:     rgba(255, 255, 255, 0.12);

  /* --- Gradients --- */
  --dh-gradient-primary:     linear-gradient(135deg, #6ee7b7, #34d399);
  --dh-gradient-dark:        linear-gradient(135deg, #0d0d0d, #181818);

  /* --- Typography (DM Sans + system-ui) --- */
  --dh-font-display:         'DM Sans', system-ui, sans-serif;
  --dh-font-body:            'DM Sans', system-ui, sans-serif;
  --dh-font-mono:            'JetBrains Mono', 'Courier New', monospace;

  /* --- Glow (hellodjt green) --- */
  --dh-shadow-glow:          0 0 40px rgba(110, 231, 183, 0.25);

  /* --- App-specific extras (not in upstream dotHello) --- */
  --dh-color-danger:         #f87171;
  --dh-color-danger-dim:     rgba(248, 113, 113, 0.15);
  --dh-color-primary-dim:    rgba(110, 231, 183, 0.15);
  --dh-color-surface:        #111111;
  --dh-color-surface2:       #181818;

  /* --- dotHello v2.3.0 token overrides for hellodjt dark theme --- */
  --dh-nav-height:           64px;
  --dh-color-surface-alt:    var(--dh-color-surface2); /* alias: dark alternate surface */
  --dh-color-nav-link:       rgba(255,255,255,0.85);   /* slightly softer on hellodjt dark nav */

  /* --- dotHello v2.4.0 semantic token overrides for hellodjt dark theme --- */

  /* On-color: primary is light mint — dark text required for WCAG contrast */
  --dh-color-on-primary:     #000000;
  --dh-color-on-accent:      #ffffff;

  /* Surfaces: map to hellodjt dark palette */
  --dh-color-bg:             var(--dh-color-dark);       /* #0d0d0d page background */
  --dh-color-surface-raised: var(--dh-color-dark-mid);   /* #181818 elevated panels */
  --dh-color-surface-overlay: rgba(0, 0, 0, 0.72);       /* darker scrim on dark bg */

  /* Interaction tints: inverted for dark theme */
  --dh-color-hover:          rgba(255, 255, 255, 0.05);
  --dh-color-active:         rgba(255, 255, 255, 0.10);

  /* Status backgrounds: slightly higher opacity to read on near-black */
  --dh-color-success-bg:     rgba(16, 185, 129, 0.15);
  --dh-color-warning-bg:     rgba(245, 158, 11, 0.15);
  --dh-color-error-bg:       rgba(239, 68, 68, 0.15);
  --dh-color-info-bg:        rgba(59, 130, 246, 0.15);

}
/* Dark base — override dotHello's default light body */
body {
  background: var(--dh-color-dark);
  color: var(--dh-color-text);
}