/*
 | QuicklyEvents theme — one stylesheet for every page that uses
 | resources/views/v3/layouts/base.blade.php (public site and panels).
 | Replaces the old v2-theme.css (V2 re-skin) and the inline styles that
 | base.blade.php carried. Panel-only density/chrome lives in qe-panel.css.
 |
 | 1. Brand colour tokens. Tailwind v4 utilities read --color-*, so
 |    remapping the variables recolours every indigo-* / blue-500..700
 |    utility (bg, text, border, ring, gradient, hover/focus) without the
 |    per-class !important overrides V2 needed. Light tints (50-200) of blue
 |    are left alone so info badges keep their soft look.
 | 2. Base typography.
 | 3. Legacy class names still used by a few views (counted when merged):
 |    .btn/.btn-primary/.btn-secondary (admin categories create/edit),
 |    .form-control/.form-group/.invalid-feedback/.is-invalid (8-10 uses),
 |    .font-display (membership public page). Rules for names no view uses
 |    any more (.gradient-text, .card-hover, .btn-success, .btn-danger,
 |    .form-input, .form-select, .form-label) were dropped.
 */

/* 1) Brand tokens ---------------------------------------------------------- */
:root {
    --qe-blue: #0080ff;
    --qe-blue-hover: #0069d9;
    --qe-ink: #23214a;
    --qe-yellow: #ffb20b;

    --color-indigo-50:  #eef6ff;
    --color-indigo-100: #d6e8fb;
    --color-indigo-200: #b3d4f7;
    --color-indigo-300: #8cbef2;
    --color-indigo-400: #4d9bec;
    --color-indigo-500: #1a86ff;
    --color-indigo-600: #0080ff;
    --color-indigo-700: #006ad6;
    --color-indigo-800: #0056b3;
    --color-indigo-900: #003c80;
    --color-indigo-950: #002a5c;

    --color-blue-500: #1a86ff;
    --color-blue-600: #0080ff;
    --color-blue-700: #006ad6;
}

/* Native checkboxes/radios follow the brand blue */
input[type="checkbox"], input[type="radio"] { accent-color: var(--qe-blue); }

[x-cloak] { display: none !important; }

/* 2) Typography ------------------------------------------------------------ */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1e293b;
}

/* Display headings: Plus Jakarta Sans (the public design's .qe-display) */
.font-display, .qe-display {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    letter-spacing: -0.02em;
}

/* 3) Legacy class names ---------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: .5rem;
    font-size: .875rem; font-weight: 600; line-height: 1.25rem;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--qe-blue); color: #fff; }
.btn-primary:hover { background: var(--qe-blue-hover); }
.btn-secondary { background: #fff; border-color: #e2e8f0; color: #334155; }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

.form-control {
    display: block; width: 100%;
    padding: .5rem .75rem;
    font-size: .875rem; line-height: 1.5; color: #1e293b;
    background-color: #fff; border: 1px solid #e2e8f0; border-radius: .5rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus { outline: none; border-color: var(--qe-blue); box-shadow: 0 0 0 3px rgba(0, 128, 255, .12); }
.form-control::placeholder { color: #94a3b8; }
.form-control.is-invalid { border-color: #dc2626; }
.form-group { margin-bottom: 1rem; }
.invalid-feedback { display: block; margin-top: .375rem; font-size: .8125rem; color: #dc2626; }