/* ==========================================================================
   Delhom Acoustics design system (Branding Guidelines 2026): home welcome.
   --------------------------------------------------------------------------
   Subset of the sheet introduced by feat/global-design-system, limited to the
   home page title and the intro panel. Token names and rules are kept
   identical to that branch, so the two merge without a fight.
   ========================================================================== */

:root {
    --ds-alabaster-light: #FDFBF7; /* subtle surface */
    --ds-slate-mist:      #D1D9D9; /* borders */
    --ds-deep-anthracite: #2F3E46; /* primary text / structure */
    --ds-fg:              #2F3E46;
    --ds-fg-muted:        #4B5A62;
    --ds-radius-md:       4px;
}
:root[data-mantine-color-scheme="dark"] {
    --ds-alabaster-light: #26343C; /* surface: lifts off the canvas */
    --ds-slate-mist:      #3D4C55; /* borders */
    --ds-deep-anthracite: #E9E5DC; /* structure flips to warm light */
    --ds-fg:              #F2EFE7;
    --ds-fg-muted:        #C6C9C3;
}

/* Page title: large, regular weight, anthracite. The branch sets it in Playfair Display
   (--ds-font-display); for now it keeps the app font, SVN Century Gothic, so no
   external font is loaded. The branch applies this to every page title
   (.ds-appshell h1); here it is limited to the home page. */
.mantine-AppShell-main:has(.ds-home) h1 {
    font-weight: 400;
    font-size: 40px;
    letter-spacing: -0.01em;
    color: var(--ds-fg);
}

/* Intro panel: warm surface, hairline border, anthracite left accent. */
.ds-home .ds-intro {
    background: var(--ds-alabaster-light);
    border: 1px solid var(--ds-slate-mist);
    border-left: 3px solid var(--ds-deep-anthracite);
    border-radius: var(--ds-radius-md);
    box-shadow: none;
}

/* Lede: the headline sentence, larger, primary font. !important: this app's
   Mantine theme pins Text to 14px / 400 (the branch drops that default). */
.ds-home .ds-intro-lede {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.35;
    color: var(--ds-fg);
}

/* Supporting line: muted, comfortable reading. */
.ds-home .ds-intro-sub {
    font-size: 15px !important;
    line-height: 1.6;
    color: var(--ds-fg-muted);
    max-width: 68ch;
}

/* Section titles ("Pinned applications", "Available Applications"): regular
   weight, like the page title. The branch restyles them as small-caps eyebrows;
   only the weight is taken here. */
.ds-home h2 {
    font-weight: 400;
}