/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
    /* ============================================================
       Honey amber design tokens (from mockups theme.css).
       Two layers:
         1. Raw Honey palette — the new semantic source of truth.
         2. Legacy --color-* aliases mapped onto the palette so existing
            var(--color-*) references keep working while pages migrate.
       ============================================================ */

    /* ---------- Honey palette (light) ---------- */
    --page-bg: #f6efe3;        /* honey-tinted sand */
    --surface: #fffdf8;        /* elevation 1 (cards) */
    --surface-2: #f4ead8;      /* elevation 0 (inset / tracks) */
    --surface-3: #ecdfc7;      /* elevation 2 (hover wells) */
    --border: #e7d9c1;
    --border-strong: #d6c3a3;
    --txt: #3a3026;
    --txt-subtle: #7a6a54;     /* WCAG AA (4.57:1 on page bg) for small subtle text */

    --accent: #e08613;         /* warm amber-orange */
    --accent-soft: #fbe6c4;    /* tinted fill */
    --accent-strong: #c26a06;  /* hover / text-on-light */
    --accent-on: #ffffff;

    --pos: #4d7a3a;            /* success / income */
    --pos-soft: #e4efd7;
    --neg: #bc5226;            /* danger / negative */
    --neg-soft: #f7ddcc;
    --neg-on: #ffffff;         /* text/icon on a --neg fill */
    --info: #3d6f86;           /* info / links */
    --info-soft: #dbe8ee;
    --warn: #c98f0f;           /* warning (distinct from accent) */
    --warn-soft: #f9e8bf;

    --hero-glow: #f3d8a0;

    /* ---------- Overlay scrim (theme-independent) ----------
       Full-viewport image overlays (lightbox) always sit on a dark
       scrim with light controls in BOTH themes, so these hold the same
       values in the dark block below rather than flipping. */
    --scrim: rgb(51 65 85 / 0.75);  /* dark backdrop behind lightbox */
    --on-scrim: #f8fafc;            /* text/icons over the scrim */

    /* ---------- Legacy aliases → Honey palette ---------- */
    --color-txt: var(--txt);
    --color-txt--subtle: var(--txt-subtle);
    --color-txt--validation: var(--neg);
    --color-txt--danger: var(--neg);
    --color-txt--error: var(--neg);
    --color-txt--success: var(--pos);
    --color-link: var(--info);
    --color-primary: var(--accent);
    --color-primary-hover: var(--accent-strong);
    --color-input-bg: var(--surface);

    --color-bg--brand-secondary: var(--accent-soft);
    --color-bg--brand-secondary-hover: color-mix(in srgb, var(--accent) 25%, var(--surface));
    --color-txt--brand-secondary: var(--accent-strong);
    --color-txt--brand-secondary-hover: var(--accent);

    --color-bg--success: var(--pos-soft);
    --color-bg--danger: var(--neg-soft);
    --color-bg--info: var(--info-soft);

    --color-border: var(--border);
    --color-border--neutral: var(--border);
    --color-bg: var(--page-bg);
    --color-bg--surface: var(--surface);
}

:root:is(.dark) {
    /* ---------- Honey palette (dark) ---------- */
    --page-bg: #1c1813;
    --surface: #262019;
    --surface-2: #221d16;
    --surface-3: #2e271e;
    --border: #3a322a;
    --border-strong: #4a4035;
    --txt: #f1e8da;
    --txt-subtle: #a99a85;

    --accent: #e8a83a;
    --accent-soft: #3a2f1c;
    --accent-strong: #f4c876;
    --accent-on: #1c1813;

    --pos: #8fc879;
    --pos-soft: #2a3a22;
    --neg: #e89270;
    --neg-soft: #3a261d;
    --neg-on: #1c1813;
    --info: #8ab6cf;
    --info-soft: #1f2f38;
    --warn: #e6bd5a;
    --warn-soft: #3a2f1c;

    --hero-glow: #3a2f1c;

    /* Scrim is intentionally identical to light: the lightbox overlay is a
       dark scrim with light controls regardless of theme. Restated here so
       the values are explicit rather than silently inherited. */
    --scrim: rgb(51 65 85 / 0.75);
    --on-scrim: #f8fafc;

    /* Legacy aliases inherit the palette overrides above; only the few that
       need a distinct dark treatment are restated. */
    --color-link: var(--info);
}

body {
    color: var(--color-txt);
    background-color: var(--color-bg);
}

h2 {
    font-weight: bold;
}

footer {
    color: var(--color-txt--subtle);
}

.dark input[type="date"] {
    color-scheme: dark;
}

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

details:not([open]) {
    display: none;
}

/* .card now lives in components.css (Honey token-driven). */