/* ============================================================
   Tokens de tema compartilhados pelos dois templates.
   Os valores --c-* reais são injetados no <head> pelo servidor
   (app/services/theme.py); os daqui são só o padrão (Azul marinho).
   Tudo que é tom translúcido deriva dos tokens via color-mix(),
   então trocar a paleta no admin recolore o site inteiro.
   ============================================================ */
:root {
    --c-primary: #2f4156;
    --c-on-primary: #fefefe;
    --c-secondary: #567c8d;
    --c-on-secondary: #fefefe;
    --c-accent: #c8d9e6;
    --c-bg: #f5efee;
    --c-surface: #fefefe;
    --c-border: #c8d9e6;
    --c-text: #2f4156;
    --c-text-muted: #66788b;
    --c-neutral: #2f4156;
    --c-on-neutral: #fefefe;
    --c-gradient-from: #567c8d;
    --c-gradient-to: #2f4156;
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Lato', system-ui, sans-serif;

    --gradient: linear-gradient(135deg, var(--c-gradient-from), var(--c-gradient-to));
    --gradient-soft: linear-gradient(135deg,
        color-mix(in srgb, var(--c-gradient-from) 9%, transparent),
        color-mix(in srgb, var(--c-gradient-to) 9%, transparent));

    --primary-06: color-mix(in srgb, var(--c-primary) 6%, transparent);
    --primary-12: color-mix(in srgb, var(--c-primary) 12%, transparent);
    --primary-20: color-mix(in srgb, var(--c-primary) 20%, transparent);
    --primary-30: color-mix(in srgb, var(--c-primary) 30%, transparent);
    --primary-50: color-mix(in srgb, var(--c-primary) 50%, transparent);
    --primary-70: color-mix(in srgb, var(--c-primary) 70%, transparent);
    --secondary-12: color-mix(in srgb, var(--c-secondary) 12%, transparent);
    --secondary-40: color-mix(in srgb, var(--c-secondary) 40%, transparent);
    --secondary-75: color-mix(in srgb, var(--c-secondary) 75%, transparent);
    --text-40: color-mix(in srgb, var(--c-text) 40%, transparent);
    --text-55: color-mix(in srgb, var(--c-text) 55%, transparent);
    --text-70: color-mix(in srgb, var(--c-text) 70%, transparent);
    --text-80: color-mix(in srgb, var(--c-text) 80%, transparent);
    --neutral-45: color-mix(in srgb, var(--c-neutral) 45%, transparent);
    --neutral-55: color-mix(in srgb, var(--c-neutral) 55%, transparent);
    --neutral-80: color-mix(in srgb, var(--c-neutral) 80%, transparent);
    --neutral-85: color-mix(in srgb, var(--c-neutral) 85%, transparent);
    --neutral-90: color-mix(in srgb, var(--c-neutral) 90%, transparent);
    --on-neutral-70: color-mix(in srgb, var(--c-on-neutral) 70%, transparent);
    --on-neutral-45: color-mix(in srgb, var(--c-on-neutral) 45%, transparent);
    --border-55: color-mix(in srgb, var(--c-border) 55%, transparent);

    --shadow-soft: 0 14px 34px color-mix(in srgb, var(--c-neutral) 7%, transparent);
    --shadow-lift: 0 18px 42px color-mix(in srgb, var(--c-neutral) 12%, transparent);
    --shadow-strong: 0 18px 40px color-mix(in srgb, var(--c-neutral) 24%, transparent);
    /* Fundo "perolado" dos ícones dos cards (T1) */
    --icon-bubble: radial-gradient(circle at 30% 30%,
        color-mix(in srgb, var(--c-surface) 95%, transparent),
        color-mix(in srgb, var(--c-bg) 90%, transparent) 60%,
        color-mix(in srgb, var(--c-accent) 55%, transparent) 100%);

    --success: #2f8f5b;
    --danger: #c0392b;
    --radius-pill: 999px;
}