/* *****************************************************
    Host-Hive Custom Theme
    Brand: #6B21FF purple | Font: Space Grotesk
***************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Outfit:wght@300;400;500;600&display=swap');

html {
    font-size: 14px;
    font-family: 'Outfit', 'Space Grotesk', system-ui, sans-serif;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #faf8ff;
    --neutral-100: #f3f0ff;
    --neutral-200: #e9e3ff;
    --neutral-300: #d4c8ff;
    --neutral-400: #a78bfa;
    --neutral-500: #8b5cf6;
    --neutral-600: #7c3aed;
    --neutral-700: #6B21FF;
    --neutral-800: #5418d6;
    --neutral-900: #3b0fa0;
    --neutral-950: #1e0566;

    /* Host-Hive Purple Palette */
    --primary-50:  #faf8ff;
    --primary-100: #f0ebff;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6B21FF;
    --primary-800: #5418d6;
    --primary-900: #3b0fa0;
    --primary-950: #1e0566;

    /* Primary colors — Host-Hive Purple */
    --primary:          #6B21FF;
    --primary-lifted:   #5418d6;
    --primary-accented: #3b0fa0;

    /* Secondary colors */
    --secondary: #8b5cf6;
    --secondary-lifted: #7c3aed;
    --secondary-accented: #6B21FF;

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #6B21FF;
    --info-lifted: #5418d6;
    --info-accented: #3b0fa0;

    /* Notice colors */
    --notice: #6B21FF;
    --notice-lifted: #5418d6;
    --notice-accented: #3b0fa0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale */
    --grayscale: #1a1a2e;
    --grayscale-lifted: #2d2d44;
    --grayscale-accented: #3f3f5c;

    /* Neutral colors */
    --neutral: #6b7280;
    --neutral-lifted: #4b5563;
    --neutral-accented: #374151;

    /* Text colors */
    --text-inverted: var(--white);
    --text-muted: #9ca3af;
    --text-lifted: #6b7280;
    --text-accented: #4b5563;
    --text: #1a1a2e;

    /* Border colors */
    --border-muted: #ede9fe;
    --border: #ddd6fe;
    --border-lifted: #c4b5fd;
    --border-accented: #7c3aed;

    /* Background colors */
    --bg: var(--white);
    --bg-muted: #faf8ff;
    --bg-lifted: #f0ebff;
    --bg-accented: #ede9fe;
    --bg-inverted: #1a1a2e;

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ── Typography ─────────────────────────────────────────── */
body, input, button, select, textarea {
    font-family: 'Outfit', 'Space Grotesk', system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.font-heading, .brand-name, .logo-text {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* ── Logo area ──────────────────────────────────────────── */
.logo img { max-height: 36px; }

/* ── Buttons ────────────────────────────────────────────── */
button[class*="primary"],
.btn-primary,
input[type="submit"],
[class*="bg-primary"] {
    background-color: #6B21FF !important;
    border-color: #6B21FF !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
}

button[class*="primary"]:hover,
.btn-primary:hover {
    background-color: #5418d6 !important;
    border-color: #5418d6 !important;
}

/* ── Links ──────────────────────────────────────────────── */
a { color: #6B21FF; }
a:hover { color: #5418d6; }

/* ── Domain search ──────────────────────────────────────── */
input[name="query"],
input[id*="domain"],
input[placeholder*="domain"],
input[placeholder*="Domain"] {
    border-color: #ddd6fe !important;
    border-radius: 0.5rem !important;
}

input[name="query"]:focus,
input[id*="domain"]:focus {
    border-color: #6B21FF !important;
    box-shadow: 0 0 0 3px rgba(107,33,255,.15) !important;
    outline: none !important;
}

/* ── Available / Unavailable labels ─────────────────────── */
[class*="available"]:not([class*="unavailable"]) {
    color: #00a63e !important;
}

/* ── Cards / Panels ─────────────────────────────────────── */
[class*="card"], [class*="panel"], [class*="box"] {
    border-color: #ede9fe !important;
}

/* ── Nav active state ───────────────────────────────────── */
[class*="active"][class*="nav"],
[aria-current="page"] {
    color: #6B21FF !important;
    border-color: #6B21FF !important;
}

/* ── Progress / step indicators ─────────────────────────── */
[class*="step"][class*="active"],
[class*="progress"] {
    background-color: #6B21FF !important;
    border-color: #6B21FF !important;
}

/* ── Checkboxes / Radios ────────────────────────────────── */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    accent-color: #6B21FF;
}

/* ── Focus rings ────────────────────────────────────────── */
*:focus-visible {
    outline-color: #6B21FF !important;
    box-shadow: 0 0 0 3px rgba(107,33,255,.2) !important;
}

/* ── Table header ───────────────────────────────────────── */
thead tr th {
    background-color: #faf8ff !important;
    color: #3b0fa0 !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ── Alerts / Notices ───────────────────────────────────── */
[class*="alert-info"],
[class*="notice"] {
    background-color: #f0ebff !important;
    border-color: #ddd6fe !important;
    color: #3b0fa0 !important;
}