/* =========================================================
 * Lifecycle Services Portal — global styles
 *
 * Brings the Lummus Technology brand tokens into the LWR site
 * by overriding the DXP design-token CSS variables. Custom LWCs
 * authored in this project consume var(--dxp-g-brand) etc., so
 * setting those here changes the whole site.
 *
 * Sourced from the Lummus Technology design system handoff
 * (uploads/Lummus Visual Guidelines-2022-v3 + 2026-03 PPT master).
 * ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700;800&display=swap');

html,
body {
    height: 100%;
}

html {
    background: #ffffff;
}

body {
    margin: 0;
}

:root {
    /* ----- Lummus primary palette ----- */
    --lummus-green: #00b34a;
    --lummus-green-dark: #007244;
    --lummus-blue: #004f99;
    --lummus-blue-hover: #003c7a;
    --lummus-ink: #003a49;
    --lummus-ink-2: #044350;
    --lummus-white: #ffffff;

    /* ----- Lummus secondary palette ----- */
    --lummus-mint: #63c7b7;
    --lummus-sky: #3678c7;
    --lummus-light-green: #86d295;
    --lummus-gold: #ffc685;
    --lummus-orange: #f77a43;
    --lummus-lime: #d0e329;
    --lummus-teal: #2ba5a9;

    /* ----- Surfaces & text ----- */
    --lummus-bg: #ffffff;
    --lummus-bg-soft: #f4f6f7;
    --lummus-border: #e2e6e8;
    --lummus-border-strong: #c1c6c8;
    --lummus-fg-1: #003a49;
    --lummus-fg-2: #3e6872;
    --lummus-fg-3: #688e96;
    --lummus-fg-mute: #9bb4b9;

    /* ----- Brand gradient (blue → green, 135°) ----- */
    --lummus-brand-gradient: linear-gradient(135deg, #004f99 0%, #00b34a 100%);

    /* ----- Shadows (soft, teal-tinted, never pure black) ----- */
    --lummus-shadow-xs: 0 1px 2px rgba(0, 58, 73, 0.06);
    --lummus-shadow-sm: 0 2px 6px rgba(0, 58, 73, 0.08);
    --lummus-shadow-md: 0 6px 18px rgba(0, 58, 73, 0.1);
    --lummus-shadow-lg: 0 16px 40px rgba(0, 58, 73, 0.14);
    --lummus-shadow-focus: 0 0 0 3px rgba(0, 79, 153, 0.3);

    /* ----- Radii ----- */
    --lummus-radius-sm: 4px;
    --lummus-radius-md: 8px;
    --lummus-radius-lg: 16px;
    --lummus-radius-pill: 999px;

    /* ----- Type ----- */
    --lummus-font-sans:
        'Proxima Nova', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --lummus-tracking-eyebrow: 0.14em;
    --lummus-tracking-display: -0.015em;

    /* ----- Override the DXP semantic tokens consumed by custom LWCs ----- */
    --dxp-g-brand: var(--lummus-green);
    --dxp-g-brand-1: var(--lummus-green-dark);
    --dxp-g-brand-contrast: var(--lummus-white);
    --dxp-g-link: var(--lummus-blue);
    --dxp-g-link-hover: var(--lummus-blue-hover);
    --dxp-g-root: var(--lummus-bg);
    --dxp-g-root-contrast: var(--lummus-fg-1);
    --dxp-g-neutral: var(--lummus-border);
    --dxp-g-neutral-1: var(--lummus-bg-soft);
    --dxp-g-root-font-family: var(--lummus-font-sans);
    --dxp-s-html-font-family: var(--lummus-font-sans);
}

/* Site-wide typography. The font-family bubbles through to every LWC unless
 * a component sets its own. Headings use Lummus's light/airy display style. */
html,
body,
.slds-scope {
    font-family: var(--lummus-font-sans);
    color: var(--lummus-fg-1);
}

/* Headings — light weight, tight tracking, anchored in deep teal */
h1,
h2 {
    font-weight: 300;
    letter-spacing: var(--lummus-tracking-display);
    color: var(--lummus-fg-1);
    margin: 0 0 0.5em;
}

h3,
h4 {
    font-weight: 600;
    color: var(--lummus-fg-1);
}

a {
    color: var(--lummus-blue);
    text-decoration: none;
    transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

a:hover {
    color: var(--lummus-blue-hover);
}

/* Primary buttons (pill shape, Lummus green) — applied to any
 * lightning-button[variant="brand"] and our custom .btn-primary. */
lightning-button button.slds-button_brand,
.btn-primary {
    background-color: var(--lummus-green);
    border-color: var(--lummus-green);
    border-radius: var(--lummus-radius-pill);
    color: var(--lummus-white);
    font-weight: 600;
    padding-left: 28px;
    padding-right: 28px;
    transition:
        background-color 120ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

lightning-button button.slds-button_brand:hover,
.btn-primary:hover {
    background-color: var(--lummus-green-dark);
    border-color: var(--lummus-green-dark);
}

/* Focus ring for a11y */
lightning-button button.slds-button:focus,
.btn-primary:focus,
input:focus,
textarea:focus,
select:focus {
    outline: none;
    box-shadow: var(--lummus-shadow-focus);
}

/* The logged-in workspace routes use their own theme layout
 * (c:portalAppLayout — no header/footer regions), and the app shell
 * positions itself fixed to the viewport, so no global overrides are
 * needed for the app pages. Marketing pages keep the chrome above. */