/* Vallartahub design tokens. Light only: this app has no dark mode.
   Source of truth: the Astro site's src/assets/css/base.css and DESIGN.md.
   Change brand values there first, then mirror them in section 1. */

:root {
    color-scheme: light;

    /* 1. Brand tokens: same names and values as the Astro site */
    --font-primary: "Montserrat Variable", "Montserrat", sans-serif;

    --text-10: 10px;
    --text-12: 12px;
    --text-13: 13px;
    --text-14: 14px;
    --text-15: 15px;
    --text-16: 16px;
    --text-18: 18px;
    --text-20: 20px;
    --text-24: 24px;
    --text-26: 26px;
    --text-30: 30px;
    --text-40: 40px;
    --text-50: 50px;

    --color-white: #ffffff;
    --color-border: #e5e5e5;
    --color-accent-1: #eb662b;
    --color-accent-soft: #fef7f4;
    --color-dark-1: #222222;
    --color-light-1: #f9f9f9;
    --color-light-2: #777777;
    --color-light-5: #f5f5f2;
    --color-error-1: #fee2e2;
    --color-error-2: #b91c1c;
    --color-success-1: #dcfce7;
    --color-success-2: #166534;
    --color-warning-1: #fef9c3;
    --color-yellow-2: #eab308;

    --radius-default: 12px;

    /* 2. Blazor Blueprint tokens, mapped onto the brand tokens */
    --font-sans: var(--font-primary);
    --radius: var(--radius-default);

    --background: var(--color-white);
    --foreground: var(--color-dark-1);
    --card: var(--color-white);
    --card-foreground: var(--color-dark-1);
    --popover: var(--color-white);
    --popover-foreground: var(--color-dark-1);
    --primary: var(--color-accent-1);
    --primary-foreground: var(--color-white);
    --secondary: var(--color-light-5);
    --secondary-foreground: var(--color-dark-1);
    --muted: var(--color-light-1);
    --muted-foreground: var(--color-light-2);
    --accent: var(--color-accent-soft);
    --accent-foreground: var(--color-accent-1);
    --destructive: var(--color-error-2);
    --destructive-foreground: var(--color-white);
    --border: var(--color-border);
    --input: var(--color-border);
    --ring: var(--color-accent-1);

    --sidebar: var(--color-white);
    --sidebar-foreground: var(--color-dark-1);
    --sidebar-primary: var(--color-accent-1);
    --sidebar-primary-foreground: var(--color-white);
    --sidebar-accent: var(--color-accent-soft);
    --sidebar-accent-foreground: var(--color-accent-1);
    --sidebar-border: var(--color-border);
    --sidebar-ring: var(--color-accent-1);

    --alert-danger: var(--color-error-2);
    --alert-danger-bg: var(--color-error-1);
    --alert-danger-foreground: var(--color-error-2);
    --alert-success: var(--color-success-2);
    --alert-success-bg: var(--color-success-1);
    --alert-success-foreground: var(--color-success-2);
    --alert-warning: var(--color-yellow-2);
    --alert-warning-bg: var(--color-warning-1);
    --alert-warning-foreground: var(--color-dark-1);

    /* The site has no chart palette yet: an orange ramp built from the accent */
    --chart-1: var(--color-accent-1);
    --chart-2: oklch(0.837 0.128 66.29);
    --chart-3: oklch(0.705 0.213 47.604);
    --chart-4: oklch(0.553 0.195 38.402);
    --chart-5: oklch(0.47 0.157 37.304);

    /* Library sizes come from these. .275rem makes h-10 controls the site's 44px. */
    --bb-spacing: 0.275rem;
    --bb-text-sm: var(--text-15);
}

/* Document defaults from the site's base.css */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-size: var(--text-15);
    font-weight: 400;
    line-height: 1.875;
}

/* 3. Tailwind utilities for markup, such as bg-accent-soft, text-15, rounded-chip */
@theme inline {
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-destructive-foreground: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);

    --color-accent-1: var(--color-accent-1);
    --color-accent-soft: var(--color-accent-soft);
    --color-dark-1: var(--color-dark-1);
    --color-light-1: var(--color-light-1);
    --color-light-2: var(--color-light-2);
    --color-light-5: var(--color-light-5);
    --color-error-1: var(--color-error-1);
    --color-error-2: var(--color-error-2);
    --color-success-1: var(--color-success-1);
    --color-success-2: var(--color-success-2);
    --color-warning-1: var(--color-warning-1);
    --color-yellow-2: var(--color-yellow-2);

    --font-sans: var(--font-primary);

    --text-sm: var(--text-15);
    --text-10: var(--text-10);
    --text-12: var(--text-12);
    --text-13: var(--text-13);
    --text-14: var(--text-14);
    --text-15: var(--text-15);
    --text-16: var(--text-16);
    --text-18: var(--text-18);
    --text-20: var(--text-20);
    --text-24: var(--text-24);
    --text-26: var(--text-26);
    --text-30: var(--text-30);
    --text-40: var(--text-40);
    --text-50: var(--text-50);

    /* Shape roles from DESIGN.md */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: var(--radius-default);
    --radius-xl: 24px;
    --radius-search: 50px;
    --radius-chip: 200px;
    --radius-pill: 999px;
}