:root {
    /* Paleta de Cores (HSL) */
    --background: 0 0% 100%;
    --foreground: 215 28% 17%;
    --card: 0 0% 100%;
    --card-foreground: 215 28% 17%;
    --popover: 0 0% 100%;
    --popover-foreground: 215 28% 17%;

    /* Cores da Marca */
    --tog-pink: 333 100% 43%;
    --tog-orange: 43 100% 52%;
    --tog-blue: 222 100% 61%;
    --tog-purple: 265 78% 57%;

    /* Estados da Interface (UI States) */
    --muted: 220 14% 96%;
    --muted-foreground: 215 16% 36%;
    --accent: 330 100% 43%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 222 100% 61%;

    /* Superfícies */
    --surface: 220 20% 97%;
    --surface-glass: 0 0% 100% / 0.7;

    /* Rodapé */
    --footer: 220 26% 7%;
    --footer-foreground: 220 14% 80%;
    --footer-muted: 220 14% 68%;

    /* Arredondamento de Bordas (Border Radius) */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Sombras */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}