/* ============================================================
   Launchpad Shared — Cross-project styles
   Used by both Launchpad.Server and Launchpad.Addin.
   Load this BEFORE project-specific CSS (launchpad-server.css).
   ============================================================ */

/* ============================================================
   Brand Tokens — Light & Dark Mode
   ============================================================
   FluentDesignTheme sets `color-scheme: dark` on the body when
   dark mode is active (via the in-app toggle or System preference).
   We use the CSS `light-dark()` function so our custom tokens
   automatically adapt without needing a separate class selector.

   NOTE: --lp-navy, --lp-blue, --lp-blue-light, --lp-gold are
   brand constants that don't change between modes. The semantic
   tokens below are the mode-aware layer that CSS rules should use
   for text, backgrounds, and borders.
   ============================================================ */

:root {
    /* --- Brand constants (mode-independent) --- */
    --lp-navy: #0B1D3A;
    --lp-blue: #1B6FE8;
    --lp-blue-light: #4A90F0;
    --lp-gold: #D4A843;
    --lp-cream: #FAF7F2;
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

    /* --- Semantic tokens (dark-mode-aware) ---
       light-dark(light-value, dark-value) resolves based on
       the computed `color-scheme` of the element. */

    /* Primary text: headings, card titles, section headings.
       Light: navy brand → Dark: near-white for high contrast */
    --lp-text-primary: light-dark(#0B1D3A, #E8EAED);

    /* Secondary text: body paragraphs, descriptions.
       Light: dark slate with opacity → Dark: light gray */
    --lp-text-secondary: light-dark(rgba(30, 41, 59, 0.7), rgba(232, 234, 237, 0.75));

    /* Muted text: tips, captions, de-emphasized content.
       Light: slate gray → Dark: medium gray */
    --lp-text-muted: light-dark(#64748b, #9AA0A6);

    /* Surface background: page body, card backgrounds.
       Light: white → Dark: Fluent dark surface */
    --lp-bg-surface: light-dark(#ffffff, #1B1B1F);

    /* Surface-alt background: cream bands, tips sections, checklists.
       Light: warm cream → Dark: slightly elevated dark surface */
    --lp-bg-surface-alt: light-dark(#FAF7F2, #2B2B30);

    /* Border: dividers, card borders, separators.
       Light: light slate → Dark: subtle light border */
    --lp-border: light-dark(#e2e8f0, rgba(255, 255, 255, 0.12));

    /* Blockquote background: subtle accent fill.
       Light: very faint blue → Dark: slightly elevated blue tint */
    --lp-bg-blockquote: light-dark(rgba(27, 111, 232, 0.03), rgba(27, 111, 232, 0.08));

    /* Hover background: step headers, dropdown items.
       Light: faint blue → Dark: slightly visible blue */
    --lp-bg-hover: light-dark(rgba(27, 111, 232, 0.02), rgba(27, 111, 232, 0.06));

    /* Card icon background: stage icons, card decorations.
       Light: very faint blue → Dark: slightly more visible */
    --lp-bg-icon: light-dark(rgba(27, 111, 232, 0.06), rgba(27, 111, 232, 0.12));

    /* Card icon hover background */
    --lp-bg-icon-hover: light-dark(rgba(27, 111, 232, 0.12), rgba(27, 111, 232, 0.20));

    /* Mistake card problem border */
    --lp-border-error: light-dark(#fee2e2, rgba(239, 68, 68, 0.3));

    /* Shadow values — darker in light mode, lighter in dark */
    --lp-shadow-md: light-dark(0 4px 12px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.3));
    --lp-shadow-lg: light-dark(0 8px 30px rgba(0, 0, 0, 0.1), 0 8px 30px rgba(0, 0, 0, 0.35));
    --lp-shadow-xl: light-dark(0 20px 50px rgba(0, 0, 0, 0.12), 0 20px 50px rgba(0, 0, 0, 0.4));
}

/* CTA Button Pair — layout for CtaButtonPairComponent */
.cta-button-pair {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Dark variant — override Fluent Outline button tokens for
   white text/border on dark or image-backed backgrounds.
   Keeps the transparent fill so the background shows through. */
.cta-on-dark fluent-button[appearance="outline"] {
    --neutral-stroke-rest: rgba(255, 255, 255, 0.7);
    --neutral-stroke-hover: rgba(255, 255, 255, 1);
    --neutral-stroke-active: rgba(255, 255, 255, 1);
    --neutral-foreground-rest: rgba(255, 255, 255, 0.9);
    --neutral-foreground-hover: #ffffff;
    --neutral-foreground-active: #ffffff;
}