/**
 * Pubsite Design System
 * Purpose: Marketing, brand expression, public-facing pages
 * Dependencies: Tailwind base (with semantic color extensions), DaisyUI
 *
 * This file defines the CSS variable VALUES for the pubsite context.
 * The semantic color classes (bg-card, text-foreground, etc.) are defined
 * in the main Tailwind build and reference these variables.
 */

/* Custom CSS Variables from pubsite design system */
:root {
    /* Elevation system for depth */
    --button-outline: rgba(0,0,0, .10);
    --badge-outline: rgba(0,0,0, .05);
    --opaque-button-border-intensity: -8;
    --elevate-1: rgba(0,0,0, .03);
    --elevate-2: rgba(0,0,0, .08);

    /* Brand color system (HSL values for light theme) */
    --background: 43 62% 91%;
    --foreground: 0 0% 11%;
    --border: 44.21 26.76% 80%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 11%;
    --card-border: 44 27% 84%;
    --sidebar: 0 0% 100%;
    --sidebar-foreground: 0 0% 11%;
    --sidebar-border: 44.21 26.76% 80%;
    --sidebar-primary: 207 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 43 42% 85%;
    --sidebar-accent-foreground: 203.8863 88.2845% 53.1373%;
    --sidebar-ring: 202.8169 89.1213% 53.1373%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 11%;
    --popover-border: 44 27% 82%;
    --primary: 207 100% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-border: 207 100% 45%;
    --secondary: 43 42% 85%;
    --secondary-foreground: 0 0% 11%;
    --muted: 43 42% 85%;
    --muted-foreground: 0 0% 45%;
    --accent: 20 100% 63%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0.49 54.19% 55.49%;
    --destructive-foreground: 0 0% 100%;
    --input: 44.21 26.76% 86.08%;
    --ring: 39.27 43.31% 24.9%;

    /* Typography */
    --font-sans: 'Inter', sans-serif;
    --font-serif: 'Geist', sans-serif;
    --font-mono: 'Inter', monospace;
    --radius: 0.875rem;
}

.dark {
    /* Dark theme overrides */
    --button-outline: rgba(255,255,255, .10);
    --badge-outline: rgba(255,255,255, .05);
    --opaque-button-border-intensity: 9;
    --elevate-1: rgba(255,255,255, .04);
    --elevate-2: rgba(255,255,255, .09);

    --background: 0 0% 11%;
    --foreground: 0 0% 98%;
    --border: 44.21 26.76% 20%;
    --card: 0 0% 11%;
    --card-foreground: 0 0% 98%;
    --card-border: 44 27% 16%;
    --sidebar: 0 0% 11%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-border: 44.21 26.76% 20%;
    --sidebar-primary: 207 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 43 42% 15%;
    --sidebar-accent-foreground: 203.8863 88.2845% 53.1373%;
    --sidebar-ring: 202.8169 89.1213% 53.1373%;
    --popover: 0 0% 11%;
    --popover-foreground: 0 0% 98%;
    --popover-border: 44 27% 18%;
    --primary: 207 100% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-border: 207 100% 55%;
    --secondary: 43 42% 15%;
    --secondary-foreground: 0 0% 89%;
    --muted: 43 42% 15%;
    --muted-foreground: 0 0% 55%;
    --accent: 20 100% 63%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0.49 54.19% 55.49%;
    --destructive-foreground: 0 0% 100%;
    --input: 44.21 26.76% 16.08%;
    --ring: 39.27 43.31% 74.9%;
}

/* Custom utility classes for pubsite */
.hover-elevate {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hover-elevate:hover {
    box-shadow: 0 4px 12px var(--elevate-1);
    transform: translateY(-1px);
}

.active-elevate-2 {
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.active-elevate-2:active {
    box-shadow: 0 8px 24px var(--elevate-2);
    transform: translateY(0px);
}