/* CHIRPER CUSTOM LARAVEL THEME */
:root:has(input.theme-controller[value=laravelChirper]:checked),
[data-theme="laravelChirper"] {
    color-scheme: light;

    /* Canvas + text (neutral / cooler beige balance) */
    --color-base-50: #fafafa;
    /* almost pure white, very faint gray */
    --color-base-100: #f7f7f8;
    /* neutral canvas */
    --color-base-200: #ededee;
    /* light neutral gray (still contrasty w/ border) */
    --color-base-300: #e0e1e3;
    /* mid gray, cooler but not blue */
    --color-base-content: #1a1a1c;
    /* neutral dark, softer than #111113 */

    /* Text tones */
    --text-12: var(--color-base-content);
    --text-10: color-mix(in oklab, var(--color-base-content) 64%, transparent);

    /* Brand / actions */
    --color-primary: #5580d2;
    /* cooler button blue */
    --color-primary-content: #ffffff;
    --color-secondary: #2f3136;
    /* neutral charcoal */
    --color-secondary-content: #ffffff;
    --link: #5580d2;
    --link-hover: color-mix(in oklab, #5580d2 80%, black);

    /* Borders / elevation */
    --border: 1px;
    --border-color-soft: rgba(0, 0, 0, 0.08);
    /* slightly stronger for visibility */

    /* Radii + misc */
    --radius-xs: 3px;
    --radius-sm: 5px;
    --radius-field: 8px;
    --radius-box: 10px;

    --radius-selector: var(--radius-sm);
    --radius-field: var(--radius-field);
    --radius-box: var(--radius-box);

    --depth: 1;
    --noise: 0;
}

/* Page background & base text */
html[data-theme="laravelChirper"],
:root:has(input.theme-controller[value=laravelChirper]:checked) body {
    color: var(--text-12);
}

/* Navbar = sand + hairline bottom */
.navbar {
    background: var(--color-base-100);
    border-bottom: var(--border) solid var(--border-color-soft);
    backdrop-filter: saturate(140%) blur(6px);
}

/* Cards — no shadow, soft border, tidy radius */
:where(.card) {
    background: var(--color-base-100);
    color: var(--text-12);
    border-radius: var(--radius-box);
    border: var(--border) solid var(--border-color-soft);
    box-shadow: none !important;
    /* kill all shadows */
    transition: none;
    /* no hover lift */
}

:where(.card:hover),
:where(.card.shadow),
:where(.card.shadow:hover) {
    box-shadow: none !important;
}

:where(.card .card-body) {
    padding: .875rem .875rem 1.125rem;
}

/* a hair more breathing room */

/* INPUTS / TEXTAREAS */
:where(.input, .textarea) {
    border-radius: var(--radius-field);
    border: var(--border) solid var(--border-color-soft);
    background: #fff;
}

/* reduce default textarea padding a touch */
:where(.textarea) {
    padding: .625rem .75rem;
}

/* inside cards, a hair tighter */
.card :where(.textarea) {
    padding: .5625rem .75rem;
}

:where(.input:focus, .textarea:focus) {
    outline: 2px solid color-mix(in oklab, var(--color-primary) 25%, transparent);
    outline-offset: 2px;
}

/* LINKS (site-wide) */
a {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

/* Fix: anchor-buttons should NOT be blue like links */
:where(a.btn) {
    color: inherit;
    text-decoration: none;
}

/* BUTTONS */
:where(.btn) {
    border-radius: 5px;
    box-shadow: none;
    font-weight: 500;
    /* medium */
    font-size: 0.875rem;
    /* Tailwind text-base */
    line-height: 1.25rem;
    /* align with text-base */
    padding-inline: 1rem;
    /* a bit more horizontal breathing room */
}

:where(.btn-primary),
:where(a.btn-primary) {
    background: var(--color-primary);
    color: var(--color-primary-content);
    border: none;
}

:where(.btn-primary:hover),
:where(a.btn-primary:hover) {
    background: color-mix(in oklab, var(--color-primary) 85%, black);
}

:where(.btn-ghost),
:where(a.btn-ghost) {
    color: var(--text-12);
    border: var(--border) solid var(--border-color-soft);
    background: transparent;
}

:where(.btn-ghost:hover),
:where(a.btn-ghost:hover) {
    background: rgba(0, 0, 0, 0.03);
}

:where(.btn-sm) {
    height: 2rem;
    min-height: 2rem;
    padding-inline: .75rem;
}

:where(.btn-xs) {
    height: 1.5rem;
    min-height: 1.5rem;
    padding-inline: .5rem;
    font-size: .75rem;
}

/* Toast-only success color */
:where(.toast) {
    --color-success: #598b6e;
    --color-success-content: #ffffff;
}

/* Hairline border + ensure text/icons pick up the content color */
:where(.toast .alert-success) {
    background: var(--color-success);
    color: var(--color-success-content);
    border: var(--border) solid rgba(0, 0, 0, 0.08);
}

:where(.link-primary) {
    color: var(--color-primary) !important;
}

:where(.link-primary:hover) {
    color: color-mix(in oklab, var(--color-primary) 85%, black) !important;
}

/* Timestamps / separators (like your `·` and “ago”) */
.text-base-content\/60 {
    color: var(--text-10) !important;
}

/* Footer strip */
footer.footer {
    background: var(--color-base-200);
    color: var(--text-10);
}

/* 1) Links shouldn't style buttons (fixes blue anchor-buttons) */
a:not(.btn) {
    color: var(--link);
}

a:not(.btn):hover {
    color: var(--link-hover);
}

/* Anchor buttons keep button colors in all states */
a.btn,
a.btn:visited {
    color: inherit !important;
    text-decoration: none;
}

a.btn-ghost,
a.btn-ghost:visited {
    color: var(--text-12) !important;
}

a.btn-primary,
a.btn-primary:visited {
    color: var(--color-primary-content) !important;
}

/* keep ghost text from turning blue on hover */
a.btn-ghost:hover {
    color: var(--text-12) !important;
}

/* 2) Auth inputs full width inside cards/labels */
.card .input,
.card .textarea,
.floating-label>input,
.floating-label>.input,
.floating-label>.textarea {
    width: 100%;
}

/* 3) Slightly rounder cards & fields*/
:root:has(input.theme-controller[value=laravelChirper]:checked),
[data-theme="laravelChirper"] {
    --radius-box: 10px;
    /* was 8px */
    --radius-field: 8px;
    /* was 6px */
    --noise: 0;
    /* was 1; Community look is clean */
}

/* ensure cards pick up the token over defaults */
.card {
    border-radius: var(--radius-box) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400 !important;
}