/* ============================================================================
   Mailan — "Aura Enterprise Interface" theme (layout/aura_enterprise_interface).
   Light, minimalist-corporate, Indigo primary. Overrides deccster's default dark
   theme: deccster defines its theme tokens in @layer theme, and unlayered rules
   (this file) win over layered ones, so these :root values take precedence.
   ============================================================================ */
:root {
    /* --- Surfaces (light, tonal layering) --- */
    --content-box-color: #ffffff;
    --background-color: #f8f9ff;
    /* surface / app canvas */
    --background-darker-color: #eef2fb;
    /* container-low (sunken) */
    --background-little-darker-color: #e9eefb;
    /* e.g. data-grid header (note: not a typo) */
    --background-littel-lighter-color: #ffffff;
    --background-lighter-color: #ffffff;
    /* cards / panels */
    --background-more-lighter-color: #ffffff;
    --background-super-light-color: #ffffff;

    /* --- Text (navy on light) --- */
    --foreground-color: #0b1c30;
    /* on-surface */
    --foreground-medium-soft-color: rgba(11, 28, 48, 0.72);
    --foreground-soft-color: #464555;
    /* on-surface-variant */
    --text-color: var(--foreground-color);
    --inverted-text-color: #ffffff;
    --link-color: var(--call-to-action-color);

    /* --- Neutral scale (cool slate) for borders/dividers --- */
    --grey-light-color: #e3e8f2;
    --grey-dark-color: #cdd5e6;
    --grey-darker-color: #94a3b8;

    /* --- Primary = Indigo (the "pulse") --- */
    --call-to-action-color: #4f46e5;
    --call-to-action-dark-color: #3525cd;
    --call-to-action-light-color: #6366f1;
    --call-to-action-lighter-color: #a5b4fc;
    --spinner-color: var(--call-to-action-color);

    /* --- Status --- */
    --error-color: #ba1a1a;
    --warn-color: #d76a03;
    --success-color: #1f9d55;

    /* --- Form controls --- */
    /* White thumb/marker so they read clearly on the coloured checked state. */
    --toggle-thumb-color: #ffffff;
    --checkbox-marker-color: #ffffff;

    /* --- Borders & radius (soft-modern) --- */
    --border: 1px solid var(--grey-dark-color);
    --divider-border: 1px solid var(--grey-light-color);
    --dark-divider-border: 1px solid var(--grey-dark-color);
    --border-radius: 0.5rem;
    /* 8px – inputs, buttons, small cards */
    --border-radius-s: 0.25rem;
    /* 4px – checkboxes, chips */
    --border-radius-m: 0.75rem;
    /* 12px */

    /* --- Ambient depth (no harsh black shadows) --- */
    --default-box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
    --unshifted-thin-box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.06);

    /* --- Typography --- */
    --primary-font: 'Inter', system-ui, sans-serif;
    /* body / data UI */
    --secondary-font: 'Plus Jakarta Sans', sans-serif;
    /* headings / marketing */
    --font-weight: 400;
    --letter-spacing: 0;

    --button-ghost-border: 1px solid var(--call-to-action-light-color);
}

/* Headings use the marketing display face with tight tracking. */
h1,
h2,
h3,
h4,
[is=app-navigation-title],
[is=header-row-title],
[is=hero-copy] h1,
[is=section-header] h2 {
    font-family: var(--secondary-font);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* All-caps overlines (kicker / label) per the design's label-md spec. */
[is=kicker] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--call-to-action-color);
}

/* Technical contexts use a monospace face. CodeMirror stays on its dark (darcula)
   theme — matching the design's charcoal code container — but in the project font. */
code,
pre,
.CodeMirror,
[is=code] {
    font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

/* Mailan brand logo (replaces the wordmark in headers/footers/sidebar). deccster's
   [is=brand] draws a placeholder square via ::before — hide it, we use a real logo. */

[is=brand] img {
    height: 50px;
    width: auto;
    display: block;
}

[has~=nav-brand] img {
    height: 50px;
}

/* Text buttons on the primary (indigo) fill use the light on-primary colour. */
[is=button][has~=primary-background] {
    color: var(--background-color);
}

/* Icon-buttons keep the indigo fill and render their glyph in the light on-primary colour
   (konsistentet-icon-button-style: "Lila Hintergrund bleibt, Icons hell/weiß").
   --control-color is set too because deccster's icon-button glyph falls back to it. */
[is=icon-button][has~=primary-background] {
    color: var(--inverted-text-color);
    --control-color: var(--inverted-text-color);
}