/* Brand palette: the source colours, independent of their use in components. */
html {
    --palette-pure-white: #FFFFFF;
    --palette-warm-cream: #FAF5EE;
    --palette-soft-biscuit: #E6D8CA;
    --palette-warm-cinnamon: #9C5B42;
    --palette-deep-espresso: #3D2721;
    --palette-sea-green-teal: #34838B;
    --palette-coral-flame-orange: #F05D3D;
}

/* Semantic roles. light-dark() follows the choice made in ThemeService.
   Dark colours retain the warm surfaces and cool brand contrast. */
html,
body,
body[theme~="dark"] {
    --app-background: light-dark(var(--palette-pure-white), #1d1b1a);
    --app-surface: light-dark(var(--palette-warm-cream), #2c2522);
    --app-ink: light-dark(var(--palette-deep-espresso), #eee3db);
    --app-accent: light-dark(var(--palette-sea-green-teal), #8dcbd0);
    --app-secondary: light-dark(var(--palette-warm-cinnamon), #e2ae95);
    --app-highlight: light-dark(var(--palette-coral-flame-orange), #f48064);
    --app-surface-secondary: color-mix(in srgb, var(--app-surface) 50%, var(--app-background));
    --app-border: light-dark(var(--palette-soft-biscuit), #58483e);

    /* Slightly deeper text tones keep small links and CTA labels readable.
       The original teal/coral remain the brand and button fill colours. */
    --app-link: light-dark(color-mix(in srgb, var(--palette-sea-green-teal) 85%, var(--palette-deep-espresso)), #8dcbd0);
    --app-cta-text: color-mix(in srgb, var(--palette-deep-espresso) 85%, black);

    --lumo-base-color: var(--app-background);
    --lumo-primary-color: var(--app-highlight);
    --lumo-primary-text-color: var(--app-link);
    --lumo-primary-contrast-color: var(--app-cta-text);
    --lumo-primary-color-10pct: color-mix(in srgb, var(--app-highlight) 10%, transparent);
    --lumo-primary-color-50pct: color-mix(in srgb, var(--app-highlight) 50%, transparent);

    --lumo-contrast: var(--app-ink);
    --lumo-contrast-5pct: color-mix(in srgb, var(--app-ink) 5%, transparent);
    --lumo-contrast-10pct: color-mix(in srgb, var(--app-ink) 10%, transparent);
    --lumo-contrast-20pct: color-mix(in srgb, var(--app-ink) 20%, transparent);
    --lumo-contrast-30pct: color-mix(in srgb, var(--app-ink) 30%, transparent);
    --lumo-contrast-40pct: color-mix(in srgb, var(--app-ink) 40%, transparent);
    --lumo-contrast-50pct: color-mix(in srgb, var(--app-ink) 50%, transparent);
    --lumo-contrast-60pct: color-mix(in srgb, var(--app-ink) 60%, transparent);
    --lumo-contrast-70pct: color-mix(in srgb, var(--app-ink) 70%, transparent);
    --lumo-contrast-80pct: color-mix(in srgb, var(--app-ink) 80%, transparent);
    --lumo-contrast-90pct: color-mix(in srgb, var(--app-ink) 90%, transparent);
    --lumo-header-text-color: var(--app-ink);
    --lumo-body-text-color: var(--app-ink);
    --lumo-secondary-text-color: var(--app-secondary);
    --lumo-tertiary-text-color: var(--lumo-contrast-50pct);
    --lumo-disabled-text-color: var(--lumo-contrast-30pct);

}

/* Set properties per card so a container's variant does not affect child cards. */
vaadin-card {
    --vaadin-card-background: var(--app-surface);
    --vaadin-card-border-color: var(--app-border);
    --vaadin-card-border-width: 1px;
    --vaadin-card-border-radius: var(--lumo-border-radius-l);
    --vaadin-card-padding: var(--lumo-space-m);
    --vaadin-card-title-color: var(--lumo-header-text-color);
    --vaadin-card-subtitle-color: var(--app-secondary);
}

/* Secondary actions use cinnamon; primary and semantic status variants keep
   their Lumo colours (coral CTAs, red errors, green success). */
vaadin-button:not([theme~="primary"]):not([theme~="error"]):not([theme~="success"]):not([theme~="contrast"]) {
    --lumo-primary-text-color: var(--app-secondary);
}

/* Navigation remains a brand element rather than a CTA. */
#navbar vaadin-button {
    --lumo-primary-text-color: var(--app-link);
}

vaadin-card.entryCard,
vaadin-card vaadin-card {
    --vaadin-card-background: var(--app-surface-secondary);
}