/* static/style.css */

/* 1. Custom Font Definition */
@font-face {
    font-family: 'Sansation';
    src: url('/sansation/Sansation_Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Sansation';
    src: url('/sansation/Sansation_Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* 2. Shadcn UI Theme Variables (slate palette)
   Full colors, so Tailwind opacity modifiers (bg-primary/90) work. The
   <style type="text/tailwindcss"> block in layout.html maps them to utilities. */
:root {
    /* Apply Sansation globally via Tailwind's sans variable */
    --font-sans: 'Sansation', ui-sans-serif, system-ui, sans-serif;

    /* Base colors (Light mode theme) */
    --background: hsl(0 0% 100%);
    --foreground: hsl(222.2 84% 4.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(222.2 84% 4.9%);

    /* Muted/Subtle text colors */
    --muted: hsl(210 40% 96.1%);
    --muted-foreground: hsl(215.4 16.3% 46.9%);

    /* Primary color (e.g., your main brand color) */
    --primary: hsl(222.2 47.4% 11.2%); /* Almost black, very sleek */
    --primary-foreground: hsl(210 40% 98%);

    /* Accent colors (for hover states) */
    --accent: hsl(210 40% 96.1%);
    --accent-foreground: hsl(222.2 47.4% 11.2%);

    /* Errors */
    --destructive: hsl(0 84.2% 60.2%);

    /* Borders & Inputs */
    --border: hsl(214.3 31.8% 91.4%);
    --input: hsl(214.3 31.8% 91.4%);
    --ring: hsl(222.2 84% 4.9%);

    /* Component rounding (0.5rem = rounded-md) */
    --radius: 0.5rem;
}

/* Dark theme. Only applies when app.js puts .dark on <html>, which it
   does not while THEME_SWITCHING_ENABLED is false. */
.dark {
    --background: hsl(222.2 84% 4.9%);
    --foreground: hsl(210 40% 98%);
    --card: hsl(222.2 84% 4.9%);
    --card-foreground: hsl(210 40% 98%);
    --muted: hsl(217.2 32.6% 17.5%);
    --muted-foreground: hsl(215 20.2% 65.1%);
    --primary: hsl(210 40% 98%);
    --primary-foreground: hsl(222.2 47.4% 11.2%);
    --accent: hsl(217.2 32.6% 17.5%);
    --accent-foreground: hsl(210 40% 98%);
    --destructive: hsl(0 62.8% 30.6%);
    --border: hsl(217.2 32.6% 17.5%);
    --input: hsl(217.2 32.6% 17.5%);
    --ring: hsl(212.7 26.8% 83.9%);
    color-scheme: dark;
}

/* Base font for HTML/Body */
html, body {
    font-family: var(--font-sans);
}