/*
 * PowerShare design tokens
 * ------------------------
 * Inspired by the Rustle app's warm, layered, "paper-feel" aesthetic — but with the PowerShare
 * blue/purple brand palette (kept from the original NavMenu gradient #667eea → #764ba2).
 * Everything here is a CSS custom property so individual components can theme by overriding.
 */

:root {
    /* ----- Brand palette --------------------------------------------------------------- */
    --ps-brand-primary:        #667eea;   /* CTA, focus rings, active states */
    --ps-brand-primary-deep:   #5269d6;   /* hover for primary */
    --ps-brand-secondary:      #764ba2;   /* accent, gradients */
    --ps-brand-secondary-deep: #5f3a86;   /* hover for secondary */
    --ps-brand-gradient:       linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --ps-brand-gradient-soft:  linear-gradient(135deg, rgba(102, 126, 234, 0.10) 0%, rgba(118, 75, 162, 0.10) 100%);

    /* ----- Semantic accents (status, KPIs) ------------------------------------------- */
    --ps-success:   #2ea44f;
    --ps-success-soft: rgba(46, 164, 79, 0.12);
    --ps-warning:   #e8a92e;
    --ps-warning-soft: rgba(232, 169, 46, 0.14);
    --ps-danger:    #d64545;
    --ps-danger-soft: rgba(214, 69, 69, 0.12);
    --ps-info:      #4aa3df;
    --ps-info-soft: rgba(74, 163, 223, 0.12);

    /* ----- Ink (text) hierarchy ------------------------------------------------------- */
    /* Contrast targets (WCAG AA on the page background):
     *   ink-deep on page bg ≈ 14:1
     *   ink-soft on page bg ≈ 9:1
     *   ink-mute on page bg ≈ 5:1   ← still readable, used for labels/captions
     *   ink-faint on white  ≈ 3:1   ← decorative only (placeholder, disabled) */
    --ps-ink-deep:  #0f1020;   /* primary headings & high-emphasis */
    --ps-ink-soft:  #232542;   /* body text */
    --ps-ink-mute:  #5a5b75;   /* secondary text, captions */
    --ps-ink-faint: #8c8fa6;   /* placeholder, disabled */

    /* ----- Surfaces ------------------------------------------------------------------- */
    /* Cards sit slightly off-white so headings still feel "ink on paper" against pure white. */
    --ps-surface-card:   #ffffff;
    --ps-surface-hover:  linear-gradient(180deg, #ffffff 0%, #fafbff 100%);
    --ps-surface-input:  rgba(255, 255, 255, 0.85);
    --ps-surface-input-focus: #fff;
    --ps-surface-overlay: rgba(20, 20, 40, 0.45);
    --ps-surface-sidebar: linear-gradient(180deg, #5b6fd4 0%, #6a4694 100%);
    --ps-surface-topbar:  linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Page background — neutral with a barely-there purple tint so cards (which are nearly
       white) still feel like they "sit" on the page. Earlier versions were too colored and
       hurt text contrast. */
    --ps-surface-page:
        radial-gradient(60% 50% at 15% 0%, rgba(102, 126, 234, 0.05), transparent 70%),
        radial-gradient(60% 50% at 85% 100%, rgba(118, 75, 162, 0.04), transparent 70%),
        linear-gradient(180deg, #f6f7fb 0%, #f1f2f9 100%);

    /* ----- Borders --------------------------------------------------------------------- */
    --ps-border-soft:  1px solid rgba(102, 126, 234, 0.14);
    --ps-border-card:  1px solid rgba(102, 126, 234, 0.18);
    --ps-border-input: 1px solid rgba(102, 126, 234, 0.22);
    --ps-border-strong:1px solid rgba(102, 126, 234, 0.42);

    /* ----- Shadow stacks --------------------------------------------------------------- */
    --ps-shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        0 2px 4px rgba(31, 35, 80, 0.04),
        0 18px 40px -28px rgba(31, 35, 80, 0.28);
    --ps-shadow-card-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 8px rgba(31, 35, 80, 0.08),
        0 28px 60px -28px rgba(31, 35, 80, 0.45);
    --ps-shadow-button:
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        0 1px 2px rgba(31, 35, 80, 0.12),
        0 4px 10px -3px rgba(102, 126, 234, 0.38);
    --ps-shadow-button-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        0 1px 2px rgba(31, 35, 80, 0.18),
        0 8px 18px -3px rgba(102, 126, 234, 0.50);
    --ps-shadow-focus-ring: 0 0 0 3px rgba(102, 126, 234, 0.32);
    --ps-shadow-topbar: 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 12px rgba(31, 35, 80, 0.18);

    /* ----- Radii ----------------------------------------------------------------------- */
    --ps-radius-xs: 6px;
    --ps-radius-sm: 10px;
    --ps-radius-md: 14px;
    --ps-radius-lg: 18px;
    --ps-radius-xl: 22px;
    --ps-radius-pill: 999px;

    /* ----- Easing & motion ------------------------------------------------------------- */
    --ps-ease-out:      cubic-bezier(0.22, 1, 0.36, 1);
    --ps-ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
    --ps-dur-fast:      160ms;
    --ps-dur-med:       240ms;
    --ps-dur-slow:      420ms;

    /* ----- Layout ---------------------------------------------------------------------- */
    --ps-topbar-height: 50px;
    --ps-sidebar-width: 240px;
    --ps-sidebar-collapsed: 64px;

    /* ----- Typography ------------------------------------------------------------------ */
    --ps-font-sans:  'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --ps-font-brand: 'Outfit', 'Inter', sans-serif;
    --ps-font-mono:  ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    /* tabular numbers — tables, dashboards, time displays */
    --ps-tnum: tabular-nums;
}

/* =========================================================================================
   DARK MODE
   Activated by data-bs-theme="dark" on the document root. Bootstrap 5.3's own dark vars
   take effect at the same time, so utilities like .text-bg-light still recolor correctly.
   ========================================================================================= */
[data-bs-theme="dark"] {
    --ps-ink-deep:  #f4f5fb;
    --ps-ink-soft:  #d5d7e2;
    --ps-ink-mute:  #9ea1b8;
    --ps-ink-faint: #6e7088;

    --ps-surface-card:  #1d1e2e;
    --ps-surface-hover: linear-gradient(180deg, #232438 0%, #1e1f31 100%);
    --ps-surface-input: rgba(255, 255, 255, 0.05);
    --ps-surface-input-focus: rgba(255, 255, 255, 0.08);
    --ps-surface-overlay: rgba(0, 0, 0, 0.55);

    /* Subtler page bg so cards "lift" — keep a hint of the brand gradient. */
    --ps-surface-page:
        radial-gradient(60% 50% at 15% 0%,   rgba(102, 126, 234, 0.10), transparent 70%),
        radial-gradient(60% 50% at 85% 100%, rgba(118,  75, 162, 0.08), transparent 70%),
        linear-gradient(180deg, #14152a 0%, #11121f 100%);

    --ps-border-soft:  1px solid rgba(255, 255, 255, 0.06);
    --ps-border-card:  1px solid rgba(255, 255, 255, 0.08);
    --ps-border-input: 1px solid rgba(255, 255, 255, 0.12);
    --ps-border-strong:1px solid rgba(102, 126, 234, 0.55);

    --ps-shadow-card:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 2px 4px rgba(0, 0, 0, 0.30),
        0 18px 40px -28px rgba(0, 0, 0, 0.60);
    --ps-shadow-card-hover:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 6px 12px rgba(0, 0, 0, 0.45),
        0 28px 60px -28px rgba(0, 0, 0, 0.70);
}

/*
 * Paper grain — reused across "ivory" surfaces via background-image. Stays subtle: blends
 * multiplicatively so it darkens highlights, lightens shadows, mimicking real paper.
 * Drop-in via .ps-paper class.
 */
.ps-paper {
    position: relative;
    isolation: isolate;
}
.ps-paper::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.30 0 0 0 0 0.30 0 0 0 0 0.45 0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.18'/></svg>");
    mix-blend-mode: multiply;
    opacity: 0.22;
    z-index: 0;
}
.ps-paper > * { position: relative; z-index: 1; }