:root {
    /* MAIN BACKGROUND (LOCKED): rgb(251, 248, 243) */
    /* rgb(251, 248, 243) ≈ hsl(38 50% 97%) */
    --background: 38 50% 97%;
    --foreground: 24 18% 16%;

    /* Cards are slightly lifted from background (warm white) */
    --card: 38 45% 99%;
    --card-foreground: 24 18% 16%;

    --popover: 38 45% 99%;
    --popover-foreground: 24 18% 16%;

    /* MUTED BROWN PRIMARY (matches screenshots ~ rgb(168,136,104)) */
    --primary: 30 27% 53%;
    --primary-foreground: 38 55% 98%;

    /* Soft warm neutrals */
    --secondary: 30 35% 91%;           /* ~ rgb(240,232,224) */
    --secondary-foreground: 24 18% 18%;

    --muted: 34 30% 93%;
    --muted-foreground: 24 10% 42%;

    /* Hover / highlight background */
    --accent: 30 35% 92%;
    --accent-foreground: 24 18% 18%;

    --destructive: 0 74% 52%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 71% 45%;
    --warning: 38 92% 50%;

    /* Borders are very soft in the screenshots */
    --border: 30 18% 86%;
    --input: 30 18% 86%;

    /* Keep focus ring aligned to primary */
    --ring: 30 27% 53%;

    --radius: 0.5rem;
    --table-mobile-min-width: 42rem;
    --table-mobile-max-height: 68vh;
}

.dark {
    /* Dark mode stays warm (charcoal) with the same brown-ish brand */
    --background: 24 20% 10%;
    --foreground: 38 35% 96%;

    --card: 24 18% 12%;
    --card-foreground: 38 35% 96%;

    --popover: 24 18% 12%;
    --popover-foreground: 38 35% 96%;

    --primary: 30 27% 58%;
    --primary-foreground: 24 22% 10%;

    --secondary: 24 16% 16%;
    --secondary-foreground: 38 35% 96%;

    --muted: 24 16% 16%;
    --muted-foreground: 38 15% 75%;

    --accent: 33 28% 55%;
    --accent-foreground: 38 55% 98%;

    --destructive: 0 55% 38%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 55% 42%;
    --warning: 38 92% 55%;

    --border: 24 14% 20%;
    --input: 24 14% 20%;

    --ring: 43 92% 62%;
}