/* ============================================================
 * Design tokens — Phase 1.1 of the dark-mode refactor.
 * Light values match the existing chrome hex palette so this
 * file is a no-op in appearance until consuming rules switch
 * to var(--*). Dark override flips on body.dark.
 * Plan: docs/css_dark_mode_plan.md
 * ============================================================ */

:root {
    /* Surfaces */
    --bg-page:        #FFFFFF;
    --bg-card:        #FFFFFF;
    --bg-card-hover:  #F0F2F5;
    --bg-muted:       #F9FAFB;
    --bg-muted-hover: #F3F4F6;

    /* Text — four greys + brand navy. See note in plan re: #555 + #6B7280 not collapsing. */
    --fg-text:   #1A202C;  /* body text — also covers #333 */
    --fg-strong: #002965;  /* brand navy — headings, nav links, account text */
    --fg-soft:   #555555;  /* compact footer text, .footer-links a */
    --fg-muted:  #6B7280;  /* main footer text, captions, social block */
    --fg-faint:  #9CA3AF;  /* disabled, placeholders */

    /* Borders */
    --border-subtle:  #E5E7EB;  /* light dividers — also collapses #e2e8f0 */
    --border-soft:    #E0E0E0;  /* .neo* family */
    --border-default: #CED0D4;  /* header, logo-div, user-link, mobile-menu-card */
    --border-strong:  #D1D5DB;  /* footer divider */

    /* Brand / link */
    --brand-blue:       #2563EB;
    --brand-blue-hover: #1D4ED8;
    --link:             var(--brand-blue);
    --link-hover:       var(--brand-blue-hover);

    /* Warning (logout button) */
    --warn-bg:       #FEF3C7;
    --warn-bg-hover: #FDE68A;
    --warn-border:   #FBBF24;

    /* Shadows — kept distinct to preserve byte-identity in light mode */
    --shadow-input:   0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.10);
    --shadow-button:  0 1px 3px rgba(0, 0, 0, 0.10);
    --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.15);

    /* Overlay */
    --overlay: rgba(0, 0, 0, 0.5);
}

/* ============================================================
 * Dark override — opt-in via body.dark (Phase 1.2 will add
 * the cookie + toggle; for now flip in DevTools console with
 *   document.body.classList.add('dark')
 * to smoke-test.
 *
 * Palette borrows GitHub Dark surfaces; refine after visual review.
 * ============================================================ */

body.dark {
    --bg-page:        #0D1117;
    --bg-card:        #161B22;
    --bg-card-hover:  #1F2937;
    --bg-muted:       #1A202C;
    --bg-muted-hover: #21262D;

    --fg-text:   #E6EDF3;
    --fg-strong: #F0F6FC;
    --fg-soft:   #B1BAC4;
    --fg-muted:  #8B949E;
    --fg-faint:  #6E7681;

    --border-subtle:  #21262D;
    --border-soft:    #2A2F36;
    --border-default: #30363D;
    --border-strong:  #484F58;

    --brand-blue:       #58A6FF;
    --brand-blue-hover: #79C0FF;

    --warn-bg:       #3B2D0E;
    --warn-bg-hover: #4D3A12;
    --warn-border:   #B47A18;

    --shadow-input:   0 1px 3px rgba(0, 0, 0, 0.30);
    --shadow-card:    0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-button:  0 1px 3px rgba(0, 0, 0, 0.40);
    --shadow-popover: 0 4px 12px rgba(0, 0, 0, 0.50);

    --overlay: rgba(0, 0, 0, 0.7);
}