/* =====================================================================
   Bastian's Tools — Shared Design System
   Minimal editorial: neutral palette, generous whitespace, one restrained
   accent, crisp typography. No gradients, no glassmorphism, no emoji chrome.
   Single source of truth for every tool. Link AFTER any CDN (e.g. Tailwind)
   so the retone layer at the bottom can normalise utility colours.
   ===================================================================== */

:root {
    /* Neutral scale (zinc) */
    --bt-bg:            #fafafa;   /* page background            */
    --bt-surface:       #ffffff;   /* cards, panels              */
    --bt-surface-2:     #f4f4f5;   /* insets, subtle fills       */
    --bt-ink:           #18181b;   /* primary text / headings    */
    --bt-ink-2:         #3f3f46;   /* body text                  */
    --bt-muted:         #71717a;   /* secondary / captions       */
    --bt-faint:         #a1a1aa;   /* disabled, placeholder      */
    --bt-border:        #e4e4e7;   /* hairlines, card borders    */
    --bt-border-strong: #d4d4d8;

    /* Single restrained accent */
    --bt-accent:        #2563eb;
    --bt-accent-hover:  #1d4ed8;
    --bt-accent-soft:   #eff4ff;   /* tints, selected states     */
    --bt-accent-ink:    #1e40af;

    /* Functional (muted, never neon) */
    --bt-success:       #15803d;
    --bt-success-soft:  #f0fdf4;
    --bt-warning:       #b45309;
    --bt-warning-soft:  #fffbeb;
    --bt-danger:        #b91c1c;
    --bt-danger-soft:   #fef2f2;

    /* Typography */
    --bt-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bt-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

    /* Radius — editorial is restrained, not pill-shaped */
    --bt-radius-sm: 6px;
    --bt-radius:    8px;
    --bt-radius-lg: 12px;

    /* Shadows — soft, low, single-layer */
    --bt-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.05);
    --bt-shadow:    0 1px 3px rgba(24, 24, 27, 0.08), 0 1px 2px rgba(24, 24, 27, 0.04);
    --bt-shadow-lg: 0 8px 24px rgba(24, 24, 27, 0.10), 0 2px 6px rgba(24, 24, 27, 0.06);

    /* Spacing scale */
    --bt-1: 0.25rem; --bt-2: 0.5rem;  --bt-3: 0.75rem; --bt-4: 1rem;
    --bt-5: 1.5rem;  --bt-6: 2rem;    --bt-8: 3rem;    --bt-10: 4rem;

    --bt-transition: 0.15s ease;

    /* Aliases kept for legacy markup that references the old token names.
       Re-pointed to flat editorial values so old gradients become solids. */
    --primary-gradient:   var(--bt-ink);
    --secondary-gradient: var(--bt-accent);
    --accent-gradient:    var(--bt-accent);
    --orange-gradient:    var(--bt-ink);
    --neutral-gradient:   var(--bt-surface-2);
    --glass-bg:           var(--bt-surface);
    --glass-border:       var(--bt-border);
    --glass-shadow:       var(--bt-shadow);
    --text-primary:       var(--bt-ink);
    --text-secondary:     var(--bt-ink-2);
    --text-muted:         var(--bt-muted);
    --bg-primary:         var(--bt-surface);
    --bg-secondary:       var(--bt-bg);
    --border-color:       var(--bt-border);
}

[data-theme="dark"] {
    --bt-bg:            #0c0c0e;
    --bt-surface:       #161618;
    --bt-surface-2:     #1f1f23;
    --bt-ink:           #f4f4f5;
    --bt-ink-2:         #d4d4d8;
    --bt-muted:         #a1a1aa;
    --bt-faint:         #71717a;
    --bt-border:        #27272a;
    --bt-border-strong: #3f3f46;
    --bt-accent:        #60a5fa;
    --bt-accent-hover:  #93c5fd;
    --bt-accent-soft:   #18243a;
    --bt-accent-ink:    #93c5fd;
    --bt-success-soft:  #0f1f15;
    --bt-warning-soft:  #241c0e;
    --bt-danger-soft:   #2a1414;
    --bt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --bt-shadow:    0 1px 3px rgba(0, 0, 0, 0.5);
    --bt-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    --text-primary:   var(--bt-ink);
    --text-secondary: var(--bt-ink-2);
    --text-muted:     var(--bt-muted);
    --bg-primary:     var(--bt-surface);
    --bg-secondary:   var(--bt-bg);
    --border-color:   var(--bt-border);
}

/* ---------- Base ---------- */
.bt-scope, body.bt {
    font-family: var(--bt-font);
    color: var(--bt-ink-2);
    background: var(--bt-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.bt h1, .bt h2, .bt h3, .bt h4 { color: var(--bt-ink); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bt-2);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 550;
    line-height: 1;
    padding: 0.625rem 1rem;
    border-radius: var(--bt-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--bt-transition), border-color var(--bt-transition), color var(--bt-transition), box-shadow var(--bt-transition);
}
.btn:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: 2px; }
.btn svg { width: 1em; height: 1em; }

.btn-primary   { background: var(--bt-accent); color: #fff; }
.btn-primary:hover { background: var(--bt-accent-hover); }

.btn-secondary { background: var(--bt-surface); color: var(--bt-ink); border-color: var(--bt-border-strong); }
.btn-secondary:hover { background: var(--bt-surface-2); border-color: var(--bt-faint); }

.btn-ghost     { background: transparent; color: var(--bt-ink-2); }
.btn-ghost:hover { background: var(--bt-surface-2); color: var(--bt-ink); }

.btn-danger    { background: var(--bt-surface); color: var(--bt-danger); border-color: var(--bt-border-strong); }
.btn-danger:hover { background: var(--bt-danger-soft); border-color: var(--bt-danger); }

.btn-sm { padding: 0.4rem 0.7rem; font-size: 0.8125rem; }
.btn-lg { padding: 0.8rem 1.4rem; font-size: 0.95rem; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }

/* Support / "buy me a coffee" — restrained, no pulse, no neon */
.btn-support {
    display: inline-flex; align-items: center; gap: var(--bt-2);
    padding: 0.55rem 0.95rem;
    font-size: 0.8125rem; font-weight: 550;
    color: var(--bt-ink-2);
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    text-decoration: none;
    transition: var(--bt-transition);
}
.btn-support:hover { background: var(--bt-surface-2); color: var(--bt-ink); border-color: var(--bt-faint); }

/* ---------- Cards & surfaces ---------- */
.bt-card {
    background: var(--bt-surface);
    border: 1px solid var(--bt-border);
    border-radius: var(--bt-radius-lg);
    box-shadow: var(--bt-shadow-sm);
}
.bt-card-pad { padding: var(--bt-5); }

/* ---------- Inputs ---------- */
.bt-input, .bt input[type="text"], .bt input[type="number"], .bt input[type="email"],
.bt textarea, .bt select {
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--bt-ink);
    background: var(--bt-surface);
    border: 1px solid var(--bt-border-strong);
    border-radius: var(--bt-radius-sm);
    padding: 0.55rem 0.7rem;
    transition: border-color var(--bt-transition), box-shadow var(--bt-transition);
}
.bt-input:focus, .bt input:focus, .bt textarea:focus, .bt select:focus {
    outline: none;
    border-color: var(--bt-accent);
    box-shadow: 0 0 0 3px var(--bt-accent-soft);
}
.bt ::placeholder { color: var(--bt-faint); }

/* ---------- Badges / chips ---------- */
.bt-badge {
    display: inline-flex; align-items: center; gap: 0.35em;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--bt-surface-2);
    color: var(--bt-muted);
    border: 1px solid var(--bt-border);
}
.bt-badge-accent { background: var(--bt-accent-soft); color: var(--bt-accent-ink); border-color: transparent; }

/* Informational callout */
.bt-note {
    background: var(--bt-accent-soft);
    border: 1px solid var(--bt-border);
    border-left: 3px solid var(--bt-accent);
    border-radius: var(--bt-radius-sm);
    padding: var(--bt-3) var(--bt-4);
    color: var(--bt-ink-2);
    font-size: 0.9rem;
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   Tailwind retone layer
   Many tools use the Tailwind 2 CDN with ad-hoc button colours
   (purple/indigo/green/blue). Re-point the handful of utilities they use
   to the editorial palette so they read as one product. Scoped to common
   interactive contexts to avoid retoning unrelated content.
   ===================================================================== */
.bg-purple-600, .bg-purple-700, .bg-indigo-600, .bg-indigo-700,
.bg-violet-600, .bg-violet-700 { background-color: var(--bt-accent) !important; }
.hover\:bg-purple-700:hover, .hover\:bg-indigo-700:hover,
.hover\:bg-violet-700:hover { background-color: var(--bt-accent-hover) !important; }

.text-purple-600, .text-purple-700, .text-indigo-600, .text-indigo-700,
.text-violet-600 { color: var(--bt-accent) !important; }
.border-purple-500, .border-indigo-500, .border-violet-500 { border-color: var(--bt-accent) !important; }
.ring-purple-500, .ring-indigo-500 { --tw-ring-color: var(--bt-accent) !important; }
.focus\:ring-purple-500:focus, .focus\:ring-indigo-500:focus { box-shadow: 0 0 0 3px var(--bt-accent-soft) !important; }

/* Tailwind GRADIENT utilities (bg-gradient-to-*, from-/to- colour stops).
   Flatten the pastel page-washes and gradient-text titles that read as
   "generic AI". Order matters: titles and white-text CTAs handled before
   the generic pastel-panel fallback. */
body[class*="bg-gradient-to"] {
    background-image: none !important;
    background-color: var(--bt-bg) !important;
}
.bg-clip-text.text-transparent,
.text-transparent.bg-clip-text {
    background-image: none !important;
    color: var(--bt-ink) !important;
    -webkit-text-fill-color: var(--bt-ink) !important;
}
[class*="bg-gradient-to"].text-white {
    background-image: none !important;
    background-color: var(--bt-ink) !important;
}
[class*="bg-gradient-to"]:not(body):not(.text-white):not(.bg-clip-text) {
    background-image: none !important;
    background-color: var(--bt-surface-2) !important;
}

/* Consistent "back to all tools" link injected at the top of every tool. */
.bt-topbar {
    display: flex;
    align-items: center;
    gap: var(--bt-3);
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.7rem 1.25rem;
}
.bt-home {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--bt-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--bt-muted);
    text-decoration: none;
    transition: color var(--bt-transition);
}
.bt-home:hover { color: var(--bt-accent); }
.bt-home svg { width: 1em; height: 1em; }

/* Floating variant for immersive full-screen tools (focus/ambient) — a small
   chip that stays readable on any background. */
.bt-back-float {
    position: fixed;
    top: 14px;
    left: 16px;
    z-index: 9999;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    font-family: var(--bt-font);
    font-size: 0.8rem;
    font-weight: 500;
    color: #18181b;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: var(--bt-radius-sm);
    backdrop-filter: blur(6px);
    text-decoration: none;
    transition: background var(--bt-transition);
}
.bt-back-float:hover { background: #fff; }
.bt-back-float svg { width: 1em; height: 1em; }

/* Normalise the ad-hoc coloured text-links (home/footer/inline links came in
   orange/pink/purple/green). Scoped to <a> so semantic text colours are safe. */
a.text-orange-600, a.text-pink-600, a.text-purple-600,
a.text-green-600, a.text-red-600, a.text-indigo-600 { color: var(--bt-accent) !important; }
a.hover\:text-orange-800:hover, a.hover\:text-pink-800:hover,
a.hover\:text-purple-800:hover, a.hover\:text-green-800:hover,
a.hover\:text-red-800:hover, a.hover\:text-indigo-800:hover { color: var(--bt-accent-hover) !important; }

/* Universal support / "buy me a coffee" button — neutralise every variant
   (orange gradients, Tailwind yellow, pulse animations) regardless of markup. */
a[href*="paypal" i] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    width: auto !important;
    padding: 0.55rem 0.95rem !important;
    font-family: var(--bt-font) !important;
    font-size: 0.85rem !important;
    font-weight: 550 !important;
    line-height: 1 !important;
    background: var(--bt-surface) !important;
    background-image: none !important;
    color: var(--bt-ink-2) !important;
    border: 1px solid var(--bt-border-strong) !important;
    border-radius: var(--bt-radius-sm) !important;
    box-shadow: none !important;
    animation: none !important;
    transform: none !important;
    text-decoration: none !important;
}
a[href*="paypal" i]:hover {
    background: var(--bt-surface-2) !important;
    color: var(--bt-ink) !important;
    border-color: var(--bt-faint) !important;
}
/* Single consistent coffee icon for every support button, regardless of markup.
   Hide any inline icon the source already has, then render one via mask. */
a[href*="paypal" i] svg { display: none !important; }
a[href*="paypal" i]::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208h1a4%204%200%200%201%200%208h-1%27%2F%3E%3Cpath%20d%3D%27M2%208h16v9a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4V8z%27%2F%3E%3Cline%20x1%3D%276%27%20y1%3D%271%27%20x2%3D%276%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2710%27%20y1%3D%271%27%20x2%3D%2710%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%271%27%20x2%3D%2714%27%20y2%3D%274%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208h1a4%204%200%200%201%200%208h-1%27%2F%3E%3Cpath%20d%3D%27M2%208h16v9a4%204%200%200%201-4%204H6a4%204%200%200%201-4-4V8z%27%2F%3E%3Cline%20x1%3D%276%27%20y1%3D%271%27%20x2%3D%276%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2710%27%20y1%3D%271%27%20x2%3D%2710%27%20y2%3D%274%27%2F%3E%3Cline%20x1%3D%2714%27%20y1%3D%271%27%20x2%3D%2714%27%20y2%3D%274%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
}