/* ============================================================
   Self-hosted fonts (Inter + Geist Mono)
   ============================================================ */

/* Inter — latin-ext */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter — latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono — latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono — latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/fonts/geist-mono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   dnswer Design Tokens
   Light theme (default) + Dark theme via [data-theme="dark"]
   ============================================================ */

:root {
  /* === Surfaces === */
  --color-bg:              #f4f5f7;
  --color-surface:         #ffffff;
  --color-surface-raised:  #ffffff;
  --color-surface-inset:   #eef0f4;
  --color-header-bg:       #f8fafc;
  --color-hover-light:     #eef2ff;

  /* === Sidebar (always dark) === */
  --color-sidebar-bg:            #1a1d24;
  --color-sidebar-text:          #9ca3af;
  --color-sidebar-active:        #e5e7eb;
  --color-sidebar-hover:         rgba(255, 255, 255, 0.06);
  --color-sidebar-amber:         #fbbf24;
  --color-sidebar-amber-subtle:  rgba(251, 191, 36, 0.1);
  --color-sidebar-amber-medium:  rgba(251, 191, 36, 0.2);
  --color-sidebar-active-bg:     rgba(45, 212, 191, 0.15);

  /* === Text === */
  --color-text:            #111318;
  --color-text-muted:      #4b5563;
  --color-text-secondary:  #4b5563;
  --color-text-tertiary:   #6b7280;
  --color-white:           #ffffff;

  /* === Accent (Teal) === */
  --color-primary:         #0f766e;
  --color-primary-hover:   #115e59;
  --color-primary-subtle:  #ccfbf1;
  --color-primary-text:    #0f766e;
  --color-accent:          #0f766e;
  --color-accent-hover:    #115e59;
  --color-accent-subtle:   #ccfbf1;
  --color-accent-text:     #0f766e;

  /* === Semantic: Success === */
  --color-success:         #10b981;
  --color-success-dark:    #059669;
  --color-check:           #059669;
  --color-check-hover:     #047857;
  --color-green:           #10b981;
  --color-green-bg:        #dcfce7;
  --color-green-text:      #166534;
  --color-success-hint-bg: #f0fdf4;

  /* === Semantic: Warning === */
  --color-warning:         #ca8a04;
  --color-warning-dark:    #92400e;
  --color-amber:           #f59e0b;
  --color-amber-bg:        #fef3c7;
  --color-amber-bg-light:  #fffbeb;
  --color-amber-text:      #92400e;
  --color-amber-border:    #fbbf24;
  --color-yellow-bg:       #fef3c7;

  /* === Semantic: Danger === */
  --color-danger:          #dc2626;
  --color-danger-hover:    #b91c1c;
  --color-danger-bg:       #fee2e2;
  --color-red:             #dc2626;
  --color-red-bg:          #fee2e2;
  --color-red-text:        #991b1b;

  /* === Semantic: Info === */
  --color-blue-bg:         #dbeafe;
  --color-blue-text:       #1e40af;

  /* === Semantic: Other pairs === */
  --color-purple-bg:       #f3e8ff;
  --color-purple-text:     #7c3aed;
  --color-rose-bg:         #ffe4e6;
  --color-rose-text:       #be123c;
  --color-indigo-bg:       #e0e7ff;
  --color-indigo-text:     #3730a3;
  --color-teal-bg:         #d1fae5;
  --color-teal-text:       #065f46;
  --color-sky-bg:          #e0f2fe;
  --color-sky-text:        #075985;
  --color-validation-text: #5d4037;

  /* === Borders === */
  --color-border:          #d0d3da;
  --color-border-light:    #e2e4e9;
  --color-border-subtle:   #e2e4e9;

  /* === Grays === */
  --color-gray-muted:      #4b5563;
  --color-gray-light:      #f3f4f6;
  --color-bg-secondary:    #f0f0f0;
  --color-bg-light:        #f9fafb;

  /* === Card accents (nav link colors) === */
  --color-accent-blue:     #3b82f6;
  --color-accent-fuchsia:  #e11d48;
  --color-accent-teal:     #0f766e;
  --color-accent-amber:    #f59e0b;
  --color-accent-green:    #10b981;
  --color-accent-indigo:   #6366f1;
  --color-accent-sky:      #0ea5e9;

  /* === Typography === */
  --font-sans:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:             'Geist Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === Layout === */
  --radius:                6px;
  --radius-lg:             8px;
  --shadow:                0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:             0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-dropdown:       0 4px 12px rgba(0, 0, 0, 0.12);
  --focus-ring:            0 0 0 2px rgba(15, 118, 110, 0.3);

  /* === Nav bar (dark theme — kept for backward compat) === */
  --nav-bg:                #1a1d24;
  --nav-text:              #9ca3af;
  --nav-hover-bg:          rgba(255, 255, 255, 0.08);
  --nav-hover-bg-active:   rgba(255, 255, 255, 0.12);
  --nav-subtle-bg:         rgba(255, 255, 255, 0.06);
  --nav-divider:           #475569;
  --nav-text-dark:         #334155;
}

/* ============================================================
   Dark Theme
   ============================================================ */

[data-theme="dark"] {
  /* === Surfaces === */
  --color-bg:              #111318;
  --color-surface:         #1a1d24;
  --color-surface-raised:  #22252e;
  --color-surface-inset:   #151820;
  --color-header-bg:       #1e2028;
  --color-hover-light:     rgba(45, 212, 191, 0.06);

  /* === Text === */
  --color-text:            #e5e7eb;
  --color-text-muted:      #9ca3af;
  --color-text-secondary:  #9ca3af;
  --color-text-tertiary:   #6b7280;
  --color-white:           #ffffff;

  /* === Accent (Teal — brighter in dark mode) === */
  --color-primary:         #2dd4bf;
  --color-primary-hover:   #14b8a6;
  --color-primary-subtle:  rgba(45, 212, 191, 0.08);
  --color-primary-text:    #5eead4;
  --color-accent:          #2dd4bf;
  --color-accent-hover:    #14b8a6;
  --color-accent-subtle:   rgba(45, 212, 191, 0.08);
  --color-accent-text:     #5eead4;

  /* === Semantic: Success === */
  --color-success:         #34d399;
  --color-success-dark:    #10b981;
  --color-check:           #10b981;
  --color-check-hover:     #059669;
  --color-green:           #34d399;
  --color-green-bg:        rgba(52, 211, 153, 0.12);
  --color-green-text:      #6ee7b7;
  --color-success-hint-bg: rgba(52, 211, 153, 0.06);

  /* === Semantic: Warning === */
  --color-warning:         #fbbf24;
  --color-warning-dark:    #f59e0b;
  --color-amber:           #fbbf24;
  --color-amber-bg:        rgba(251, 191, 36, 0.12);
  --color-amber-bg-light:  rgba(251, 191, 36, 0.06);
  --color-amber-text:      #fcd34d;
  --color-amber-border:    rgba(251, 191, 36, 0.3);
  --color-yellow-bg:       rgba(251, 191, 36, 0.12);

  /* === Semantic: Danger === */
  --color-danger:          #f87171;
  --color-danger-hover:    #ef4444;
  --color-danger-bg:       rgba(248, 113, 113, 0.12);
  --color-red:             #f87171;
  --color-red-bg:          rgba(248, 113, 113, 0.12);
  --color-red-text:        #fca5a5;

  /* === Semantic: Info === */
  --color-blue-bg:         rgba(96, 165, 250, 0.12);
  --color-blue-text:       #93bbfd;

  /* === Semantic: Other pairs === */
  --color-purple-bg:       rgba(167, 139, 250, 0.12);
  --color-purple-text:     #c4b5fd;
  --color-rose-bg:         rgba(251, 113, 133, 0.12);
  --color-rose-text:       #fda4af;
  --color-indigo-bg:       rgba(129, 140, 248, 0.12);
  --color-indigo-text:     #a5b4fc;
  --color-teal-bg:         rgba(45, 212, 191, 0.12);
  --color-teal-text:       #5eead4;
  --color-sky-bg:          rgba(56, 189, 248, 0.12);
  --color-sky-text:        #7dd3fc;
  --color-validation-text: #fcd34d;

  /* === Borders === */
  --color-border:          #2a2d36;
  --color-border-light:    #22252e;
  --color-border-subtle:   #22252e;

  /* === Grays === */
  --color-gray-muted:      #9ca3af;
  --color-gray-light:      #22252e;
  --color-bg-secondary:    #22252e;
  --color-bg-light:        #1e2028;

  /* === Layout === */
  --shadow:                0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:             0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md:             0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-dropdown:       0 4px 12px rgba(0, 0, 0, 0.5);
  --focus-ring:            0 0 0 2px rgba(45, 212, 191, 0.3);

  /* === Nav bar === */
  --nav-bg:                #111318;
  --nav-text:              #9ca3af;
  --nav-hover-bg:          rgba(255, 255, 255, 0.08);
  --nav-hover-bg-active:   rgba(255, 255, 255, 0.12);
  --nav-subtle-bg:         rgba(255, 255, 255, 0.06);
  --nav-divider:           #2a2d36;
  --nav-text-dark:         #e5e7eb;
}

/* ============================================================
   Base Reset & Defaults
   ============================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

a:hover {
  text-decoration: underline;
}

/* Smooth theme transitions on key properties */
body,
body * {
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.05s ease;
}

/* Disable transitions on initial load (added by JS) */
.no-transitions,
.no-transitions * {
  transition: none !important;
}