/*
 * Design tokens ported 1:1 from src/index.css of the React app.
 * Keep these values in sync — they are the source of truth for the brand palette.
 */

:root {
    --background: 25 65% 62%;
    --foreground: 20 25% 10%;

    --card: 28 45% 78%;
    --card-foreground: 20 25% 10%;

    --popover: 28 45% 78%;
    --popover-foreground: 20 25% 10%;

    --primary: 20 45% 18%;
    --primary-foreground: 35 30% 95%;

    --secondary: 25 55% 70%;
    --secondary-foreground: 20 30% 14%;

    --muted: 25 50% 68%;
    --muted-foreground: 20 15% 35%;

    --accent: 195 40% 32%;
    --accent-foreground: 195 10% 98%;

    --gold: 20 45% 18%;
    --gold-foreground: 35 30% 95%;

    --petrol: 195 40% 32%;
    --petrol-foreground: 195 10% 98%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 98%;

    --border: 25 40% 55%;
    --input: 28 40% 72%;
    --ring: 20 45% 18%;

    --radius: 0.75rem;
}

/* Convenience aliases */
:root {
    --bg: hsl(var(--background));
    --fg: hsl(var(--foreground));
    --color-primary: hsl(var(--primary));
    --color-primary-fg: hsl(var(--primary-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-fg: hsl(var(--accent-foreground));
    --color-petrol: hsl(var(--petrol));
    --color-card: hsl(var(--card));
    --color-card-fg: hsl(var(--card-foreground));
    --color-border: hsl(var(--border));
    --color-muted-fg: hsl(var(--muted-foreground));
}