/**
 * App Design System
 * Purpose: Internal application UI, data-focused interfaces
 * Dependencies: Tailwind base (with semantic color extensions), DaisyUI
 *
 * This file defines the CSS variable VALUES for the app context.
 * The semantic color classes (bg-card, text-foreground, etc.) are defined
 * in the main Tailwind build and reference these variables.
 *
 * Migrated from legacy style.css for unified CSS architecture.
 */

/* Custom CSS Variables for app context */
: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) */
    /* Currently using neutral grays - customize these for branded app experience */
    --background: 0 0% 100%;
    --foreground: 27 14% 11%; /* #1B1B1B from legacy style.css */
    --card: 0 0% 100%;
    --card-foreground: 27 14% 11%;
    --card-border: 0 0% 84%;
    --sidebar: 0 0% 100%;
    --sidebar-foreground: 27 14% 11%;
    --sidebar-border: 0 0% 90%;
    --sidebar-primary: 207 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 95%;
    --sidebar-accent-foreground: 207 100% 50%;
    --sidebar-ring: 207 100% 50%;
    --popover: 0 0% 100%;
    --popover-foreground: 27 14% 11%;
    --popover-border: 0 0% 90%;
    --primary: 207 100% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-border: 207 100% 45%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 27 14% 11%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 45%;
    --accent: 207 100% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --input: 0 0% 90%;
    --ring: 207 100% 50%;

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

.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%;
    --card: 0 0% 11%;
    --card-foreground: 0 0% 98%;
    --card-border: 0 0% 16%;
    --sidebar: 0 0% 11%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-border: 0 0% 20%;
    --sidebar-primary: 207 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 0 0% 15%;
    --sidebar-accent-foreground: 207 100% 50%;
    --sidebar-ring: 207 100% 50%;
    --popover: 0 0% 11%;
    --popover-foreground: 0 0% 98%;
    --popover-border: 0 0% 18%;
    --primary: 207 100% 50%;
    --primary-foreground: 0 0% 100%;
    --primary-border: 207 100% 55%;
    --secondary: 0 0% 15%;
    --secondary-foreground: 0 0% 89%;
    --muted: 0 0% 15%;
    --muted-foreground: 0 0% 55%;
    --accent: 207 100% 50%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --input: 0 0% 16%;
    --ring: 207 100% 50%;
}

/* Core app styles (typography, animations) */
body {
    font-family: 'Helvetica';
    color: #1B1B1B;
}

h1, h2, h3 {
    font-weight: bold;
    letter-spacing: -0.03em; /* -3% letter spacing */
}

@keyframes fadeInOut {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.toast-fade-in-out {
  animation: fadeInOut 6s ease-in-out forwards !important;
}

.toast > *:not(.toast-fade-in-out) {
  animation: none !important;
}