/* ============================================================================
   Mailan — landing page theme ("Landingpage Redesign 2").

   Loaded on the public marketing pages only (index, features, pricing, examples, docs,
   legal), AFTER theme.css. The dashboard (app.html) never loads this file and keeps the
   Aura theme exactly as it is, so the logged-in area stays recognisable and unchanged.

   Like theme.css, this file is unlayered on purpose: deccster defines its tokens inside
   @layer theme, and unlayered declarations win over layered ones, so these :root values
   take precedence over both deccster and theme.css (which is loaded before this file).

   Two colour worlds:
     - the light page (warm off-white ground, white cards, charcoal text), and
     - the dark stage (near-black ground, orange accent) used by the hero, the closing
       call-to-action and the highlighted plan — opt in per element with `has="dark-stage"`.
   ============================================================================ */
:root {
    /* --- Design tokens of the redesign --- */
    --landing-page-background: #f6f6f4;
    --landing-surface: #ffffff;
    --landing-surface-soft: #fafaf8;
    --landing-border: #e6e6e3;
    --landing-border-strong: #cfd0cc;
    --landing-field-border: #d9dad6;
    --landing-ink: #15171c;
    --landing-muted: #5b6070;
    --landing-subtle: #8a8e99;
    --landing-label: #3a3e48;
    --landing-accent: #ff6b00;
    --landing-accent-hover: #ff7d1f;
    /* Accent as TEXT on a light ground: the pure orange only reaches 3:1, so text carries
       this darker tone (5.2:1 on the page ground). Fills use the pure orange. */
    --landing-accent-text: #b04a00;
    /* Accent as text on the dark stage (11:1 on the dark ground). */
    --landing-accent-text-on-dark: #ffb27a;
    --landing-dark-background: #0e1014;
    --landing-dark-surface: #15171c;
    --landing-dark-surface-raised: #1b1e26;
    --landing-dark-foreground: #f4f4f2;
    --landing-dark-muted: #b3b6bf;
    --landing-dark-subtle: #8a8e99;
    --landing-dark-border: rgba(255, 255, 255, 0.14);
    --landing-dark-border-soft: rgba(255, 255, 255, 0.08);
    --landing-dark-border-hover: rgba(255, 255, 255, 0.4);
    --landing-success: #22c55e;
    --landing-content-width: 1200px;
    --landing-glow: rgba(255, 107, 0, 0.16);

    /* --- deccster tokens remapped onto the redesign palette --- */
    --background-color: var(--landing-page-background);
    --background-darker-color: #efefec;
    --background-little-darker-color: #e9e9e6;
    --content-box-color: var(--landing-surface);
    --background-lighter-color: var(--landing-surface);
    --foreground-color: var(--landing-ink);
    --foreground-soft-color: var(--landing-muted);
    --foreground-medium-soft-color: var(--landing-muted);
    --text-color: var(--landing-ink);
    --grey-light-color: var(--landing-border);
    --grey-dark-color: var(--landing-border-strong);
    --grey-darker-color: var(--landing-subtle);
    --link-color: var(--landing-accent-text);

    --call-to-action-color: var(--landing-ink);
    --call-to-action-dark-color: #0a0d10;
    --call-to-action-light-color: #2e343a;

    --brand-accent-color: var(--landing-accent-text);
    --brand-accent-fill-color: var(--landing-accent);
    --brand-accent-soft-color: #fff1e5;
    --brand-accent-border-color: #ffcf9e;
    --spinner-color: var(--landing-accent);
    --success-color: #1f9d55;

    /* Rounded, soft geometry: 10px controls, 16px cards. */
    --border-radius: 0.625rem;
    --border-radius-s: 0.375rem;
    --border-radius-m: 1rem;
    --border: 1px solid var(--landing-border);
    --divider-border: 1px solid var(--landing-border);
    --default-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    --unshifted-thin-box-shadow: 0 0 0 1px var(--landing-border);

    /* Controls: soft field ground, hairline border. Paddings stay deccster's defaults so
       header buttons, selects and inputs match every other control in the system; only the
       marketing call-to-action rows below opt into a larger hit area. */
    --control-background: var(--landing-surface-soft);
    --control-border: 1px solid var(--landing-field-border);
    --button-ghost-border: 1px solid var(--landing-border-strong);
    --button-ghost-color: var(--landing-ink);

    /* Manrope everywhere on the marketing pages (self-hosted, see assets/fonts). */
    --primary-font: 'Manrope', system-ui, sans-serif;
    --secondary-font: 'Manrope', system-ui, sans-serif;
    --font-weight: 500;
}

body {
    font-family: var(--primary-font);
    -webkit-font-smoothing: antialiased;
    color: var(--text-color);
}

/* Display type: heavy, tight and balanced. */
[is=landingpage] h1,
[is=landingpage] h2,
[is=landingpage] h3 {
    font-weight: 800;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

[is=landingpage] h1 {
    letter-spacing: -0.03em;
}

[is=landingpage] p {
    text-wrap: pretty;
}

[is=landingpage] a {
    color: inherit;
}

[is=landingpage] a:hover {
    color: var(--landing-accent-text);
}

/* Overlines: 12px, bold, wide tracking, accent-coloured. */
[is=kicker] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-accent-color);
}

/* Buttons: bold 15px labels, 10px radius, the hover lifts primary fills a touch. */
[is=landingpage] [is=button] {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

/* Marketing call-to-action rows (hero, closing section): larger buttons, 14px × 22px. */
[has~=hero-actions] [is=button],
[is=closing-section] [is=button] {
    --button-padding-block: 0.875rem;
    --button-padding-inline: 1.375rem;
}

[is=landingpage] [is=button][has~=primary-background] {
    color: var(--landing-surface);
}

[is=landingpage] [is=button][has~=primary-background]:hover {
    background: var(--call-to-action-light-color);
    color: var(--landing-surface);
}

[is=landingpage] [is=button][has~=ghost-style]:hover {
    border-color: var(--landing-ink);
    color: var(--landing-ink);
}

/* Field focus: orange hairline instead of the charcoal inset ring. */
[is=landingpage] [is=input]:focus,
[is=landingpage] [is=textarea]:focus {
    box-shadow: 0 0 0 1px var(--landing-accent) inset;
    border-color: var(--landing-accent);
    background: var(--landing-surface);
}

[is=landingpage] [is=form-row] > label {
    font-size: 13px;
    font-weight: 600;
    color: var(--landing-label);
}

/* Cards: white, hairline border, 16px radius. */
[is=landingpage] [is=card] {
    border: 1px solid var(--landing-border);
    border-radius: var(--border-radius-m);
    box-shadow: var(--default-box-shadow);
}

/* Code stays monospace — the redesign renders code in Manrope, but a real code sample
   reads better in the project's mono face. */
code,
pre,
.CodeMirror,
[is=code] {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* ============================================================================
   Dark stage — `has="dark-stage"` on any section, header or card.
   Remaps the deccster tokens so every component inside renders on the dark palette
   without knowing about it: text, borders, kickers, ghost buttons, cards.
   ============================================================================ */
[has~=dark-stage] {
    --background-color: var(--landing-dark-background);
    --background-darker-color: var(--landing-dark-surface);
    --content-box-color: var(--landing-dark-surface);
    --foreground-color: var(--landing-dark-foreground);
    --text-color: var(--landing-dark-foreground);
    --foreground-soft-color: var(--landing-dark-muted);
    --foreground-medium-soft-color: var(--landing-dark-muted);
    --grey-light-color: var(--landing-dark-border-soft);
    --grey-dark-color: var(--landing-dark-border);
    --grey-darker-color: var(--landing-dark-subtle);
    --brand-accent-color: var(--landing-accent-text-on-dark);
    --link-color: var(--landing-accent-text-on-dark);
    --landing-border: var(--landing-dark-border);
    --landing-muted: var(--landing-dark-muted);
    --landing-subtle: var(--landing-dark-subtle);
    --landing-label: var(--landing-dark-muted);
    --button-ghost-border: 1px solid var(--landing-dark-border);
    --button-ghost-color: var(--landing-dark-foreground);
    --control-background: var(--landing-dark-surface);
    --control-border: 1px solid var(--landing-dark-border);
    --control-color: var(--landing-dark-foreground);
    --default-box-shadow: none;
    background: var(--landing-dark-background);
    color: var(--landing-dark-foreground);
}

[has~=dark-stage] a:hover {
    color: var(--landing-dark-foreground);
}

/* On the dark stage the primary action is the orange fill with charcoal text (6.2:1). */
[has~=dark-stage] [is=button][has~=primary-background] {
    background: var(--landing-accent);
    color: var(--landing-dark-surface);
    box-shadow: 0 8px 24px rgba(255, 107, 0, 0.28);
}

[has~=dark-stage] [is=button][has~=primary-background]:hover {
    background: var(--landing-accent-hover);
    color: var(--landing-dark-surface);
}

[has~=dark-stage] [is=button][has~=ghost-style]:hover {
    border-color: var(--landing-dark-border-hover);
    color: #ffffff;
}

[has~=dark-stage] [is=card] {
    background: var(--landing-dark-surface);
    border-color: var(--landing-dark-surface);
    box-shadow: none;
}