/* ============================================================================
   Account area — shared light/dark theme tokens
   ----------------------------------------------------------------------------
   These CSS custom properties drive light/dark theming for every component
   under Components/Pages/AccountSections/ (the sidebar, mobile nav, and all
   section pages). They are read both from component-scoped *.razor.css files
   and from inline <style> blocks — custom properties inherit from :root into
   both, so a single definition here covers the whole account area.

   USAGE
     background: var(--acct-surface);                        solid surfaces
     color:      var(--acct-text-strong);                    primary text
     color:      rgba(var(--acct-fg-rgb), 0.45);             muted text (any a)
     border:     1px solid rgba(var(--acct-line-rgb), 0.08); borders
     background: rgba(var(--acct-line-rgb), 0.04);           subtle hover fills

   The *-rgb tokens hold a bare "r,g,b" triple so any opacity can be applied
   with rgba(); this keeps the dozens of distinct alpha levels in the existing
   design working without a token per alpha.

   ELEVATION & BORDERS (tokenized per-theme — do NOT hardcode rgba(0,0,0,...)):
     box-shadow: var(--acct-shadow-sm);   resting card lift
     box-shadow: var(--acct-shadow-md);   hover / raised card
     box-shadow: var(--acct-shadow-lg);   modals, popovers
     border:     1px solid var(--acct-border);  standard card/panel border
     background: var(--acct-scrim);        modal/photo backdrop (dark both themes)
   Light needs soft, cool, layered shadows for depth; dark relies on darkness.
   Defining these per-theme is why a card looks right in BOTH modes.

   FIXED COLORS (intentionally NOT tokenized — identical in both themes):
     - Brand red:   #dc3545 (and #c82333 / #b02a37 / #b52a38 / #e04555 ramps,
                    plus rgba(220,53,69,...) tints)
     - Semantic:    success #28a745/#198754, warning #ffc107, info #0d6efd,
                    neutral #6c757d — these read correctly on both themes.
     - The scrim (var(--acct-scrim)) stays dark in both themes by design.
   ========================================================================== */

:root,
:root[data-theme="dark"] {
    /* Solid surfaces (dark palette — the existing default) */
    --acct-bg:             #0a0a0a; /* account page shell                  */
    --acct-surface:        #1a1a1a; /* cards, dropdowns, modals, tables    */
    --acct-surface-alt:    #111111; /* sidebar, modal headers, table thead */
    --acct-surface-deep:   #141414; /* sticky table head, deepest panel    */
    --acct-surface-editor: #252525; /* rich-text editor toolbar            */

    /* Image-placeholder gradient stops */
    --acct-img-from: #1e1e1e;
    --acct-img-to:   #141414;

    /* Foreground / text — apply any alpha via rgba(var(--acct-fg-rgb), a) */
    --acct-fg-rgb:      248, 249, 250;
    --acct-text-strong: #f8f9fa;

    /* Lines & subtle overlays — borders and faint hover/inset fills.
       Light theme flips this to black so the same alphas darken instead. */
    --acct-line-rgb: 255, 255, 255;

    /* Composed elevation/border/scrim tokens. Dark values equal the literals
       previously hardcoded across the section CSS, so swapping a component to
       these tokens renders pixel-identical in dark mode. */
    --acct-border:      rgba(255, 255, 255, 0.08);
    --acct-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
    --acct-shadow-md:   0 6px 20px rgba(0, 0, 0, 0.35);
    --acct-shadow-lg:   0 28px 70px rgba(0, 0, 0, 0.65);
    --acct-scrim:       rgba(0, 0, 0, 0.72);
    --acct-accent-soft: rgba(220, 53, 69, 0.08);
}

:root[data-theme="light"] {
    /* Solid surfaces (light palette).
       The ramp is widened and cooled: a tinted shell with pure-white cards so
       surfaces visibly separate the way the dark ramp does (#0a0a0a→#252525). */
    --acct-bg:             #eef0f4; /* faintly cool shell so white cards lift   */
    --acct-surface:        #ffffff; /* pure white = the raised plane            */
    --acct-surface-alt:    #f5f6f9; /* sidebar/headers — distinct from both     */
    --acct-surface-deep:   #e7eaf0; /* sticky heads / deepest insets, recessed  */
    --acct-surface-editor: #f5f6f9;

    /* Image-placeholder gradient stops (slightly cooler) */
    --acct-img-from: #e7eaf0;
    --acct-img-to:   #d8dde6;

    /* Foreground / text — deep near-black for strong contrast on white */
    --acct-fg-rgb:      28, 32, 40;
    --acct-text-strong: #1b1f27;

    /* Lines & subtle overlays: cool slate-blue rather than pure black, so
       low-alpha borders read crisp instead of muddy gray on light surfaces. */
    --acct-line-rgb: 36, 47, 71;

    /* Composed elevation/border/scrim tokens tuned for light surfaces:
       soft, cool, layered shadows give real depth; the scrim stays dark. */
    --acct-border:      rgba(36, 47, 71, 0.12);
    --acct-shadow-sm:   0 1px 2px rgba(20, 28, 48, 0.06), 0 1px 3px rgba(20, 28, 48, 0.05);
    --acct-shadow-md:   0 4px 12px rgba(20, 28, 48, 0.10), 0 2px 4px rgba(20, 28, 48, 0.06);
    --acct-shadow-lg:   0 18px 50px rgba(20, 28, 48, 0.18), 0 6px 16px rgba(20, 28, 48, 0.10);
    --acct-scrim:       rgba(17, 21, 30, 0.45);
    --acct-accent-soft: rgba(220, 53, 69, 0.05);
}