@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root {
    /* Brand palette */
    --korero-green: #55D8C2;
    --korero-navy: #19394f;
    --korero-blue: #003D50;
    --korero-dark-green: #214739;
    --korero-peach: #FEB293;
    --korero-pink: #FF7683;
    --korero-black: #1C211F;
    --korero-white: #FFFFFF;

    /* Derived */
    --korero-muted: rgba(25, 57, 79, 0.65);
    --korero-border: rgba(25, 57, 79, 0.15);
    --korero-green-tint: rgba(85, 216, 194, 0.08);
    --korero-green-focus: rgba(85, 216, 194, 0.25);
    --korero-green-soft-bg: rgba(85, 216, 194, 0.15);
    --korero-peach-soft-bg: rgba(254, 178, 147, 0.25);
    --korero-pink-soft-bg: rgba(255, 118, 131, 0.15);
    --korero-page-bg: #f5f7f8;

    /* Semantic aliases */
    --color-primary: var(--korero-green);
    --color-text: var(--korero-navy);
    --color-text-alt: var(--korero-black);
    --color-surface-dark: var(--korero-blue);
    --color-danger: var(--korero-pink);
    --color-warning: var(--korero-peach);
    --color-success: var(--korero-green);

    /* Layout */
    --korero-radius: 6px;
    --korero-font: 'DM Sans', sans-serif;
}