/* =====================================================================
   YakConstruction / NoteVault — amber→safety-orange GRADIENT accent with a
   complementary slate-grey, on the shared yw-theme.css system.
   ---------------------------------------------------------------------
   Load order: yakware-style.css → yw-theme.css → THIS. yw-theme.css carries
   the design-language re-skin + neutral light/dark token blocks; this file
   sets the amber→orange accent + a charcoal-slate hero/footer anchor (the
   "complementary grey"), plus the two in-app components construction uses
   that aren't in yw-theme (yw-empty, yw-chip). Light-first.
   ===================================================================== */

/* charcoal-slate anchors (the complementary grey) — dark in both themes,
   amber-tinted hairline. Footer link-hover is bright amber. */
:root {
    --hero-panel-bg:     linear-gradient(165deg, #313842 0%, #20262f 48%, #161a20 100%);
    --hero-panel-border: rgba(245,158,11,0.20);
    --footer-bg:    #181c22;
    --footer-fg:    #c7ccd4;
    --footer-muted: #8a929e;
    --footer-head:  #767d89;
    --footer-brand: #f1f4f7;
    --footer-accent: #fbbf24;   /* bright amber on the charcoal footer */
    /* code block also follows the charcoal anchor */
    --code-bg: #14181f;
}

/* —— accents: LIGHT —— */
html.yw-light {
    --accent:          #d97706;   /* amber-600 — solid rails/borders/ink */
    --accent-strong:   #b45309;
    --accent-soft:     #fbbf24;
    --accent-contrast: #1b1304;   /* dark ink on the amber→orange fill */
    --accent-tint:     rgba(217,119,6,0.12);
    --accent-ink:      #b45309;   /* amber AS TEXT on white */
    --accent-gradient:       linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --accent-gradient-hover: linear-gradient(135deg, #d97706 0%, #ea580c 100%);
}
/* —— accents: DARK —— */
html.yw-dark {
    --accent:          #f59e0b;
    --accent-strong:   #fbbf24;
    --accent-soft:     #d97706;
    --accent-contrast: #1b1304;
    --accent-tint:     rgba(245,158,11,0.16);
    --accent-ink:      #fbbf24;   /* amber AS TEXT on dark */
    --accent-gradient:       linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    --accent-gradient-hover: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
}

/* =====================================================================
   In-app components ported from yw-app.css (construction uses only these),
   re-pointed at the yw-theme tokens so they follow the theme + amber accent.
   ===================================================================== */
.yw-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-muted);
    border: 1.5px dashed var(--surface-border);
    border-radius: 14px;
    background: var(--surface-2);
}
.yw-empty__icon { font-size: 2rem; opacity: .55; margin-bottom: .5rem; color: var(--accent-ink); }
.yw-empty__title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin-bottom: .35rem; }

.yw-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
    background: var(--accent-tint);
    color: var(--accent-ink);
    border: 1px solid var(--surface-border);
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}