/* Custom CSS Variables and Styles for text.army */

:root {
  /* Updated color tokens to match text.army design brief - plain text aesthetic with subtle styling */
  --background: oklch(0.99 0.005 85); /* Subtle off-white background */
  --foreground: oklch(0.28 0 0); /* Dark gray for main text (#374151) */
  --card: oklch(0.98 0 0); /* Light gray for cards (#f8fafc) */
  --card-foreground: oklch(0.18 0 0); /* Darker gray for card text (#1f2937) */
  --popover: oklch(1 0 0); /* White popover background */
  --popover-foreground: oklch(0.28 0 0); /* Dark gray popover text */
  --primary: oklch(0.28 0 0); /* Primary dark gray */
  --primary-foreground: oklch(1 0 0); /* White text on primary */
  --secondary: oklch(0.55 0.15 264); /* Blue accent (#6366f1) */
  --secondary-foreground: oklch(1 0 0); /* White text on secondary */
  --muted: oklch(0.98 0 0); /* Light gray muted background */
  --muted-foreground: oklch(0.35 0 0); /* Medium gray muted text (#4b5563) */
  --accent: oklch(0.55 0.15 264); /* Blue accent for highlights */
  --accent-foreground: oklch(1 0 0); /* White text on accent */
  --destructive: oklch(0.55 0.22 25); /* Red for destructive actions */
  --destructive-foreground: oklch(1 0 0); /* White text on destructive */
  --border: oklch(0.92 0 0); /* Light gray border (#e5e7eb) */
  --input: oklch(0.98 0 0); /* Light gray input background */
  --ring: oklch(0.55 0.15 264 / 0.5); /* Blue ring with transparency */
  --radius: 0.25rem; /* Smaller radius for minimal aesthetic */
  
  /* Font families */
  --font-inter: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-playfair: "Playfair Display", ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.dark {
  /* Updated dark mode tokens to maintain readability while preserving plain text aesthetic */
  --background: oklch(0.08 0 0); /* Very dark background */
  --foreground: oklch(0.95 0 0); /* Light text */
  --card: oklch(0.12 0 0); /* Dark card background */
  --card-foreground: oklch(0.95 0 0); /* Light card text */
  --popover: oklch(0.08 0 0); /* Dark popover */
  --popover-foreground: oklch(0.95 0 0); /* Light popover text */
  --primary: oklch(0.95 0 0); /* Light primary */
  --primary-foreground: oklch(0.08 0 0); /* Dark text on primary */
  --secondary: oklch(0.65 0.15 264); /* Lighter blue for dark mode */
  --secondary-foreground: oklch(0.08 0 0); /* Dark text on secondary */
  --muted: oklch(0.15 0 0); /* Dark muted background */
  --muted-foreground: oklch(0.65 0 0); /* Medium gray muted text */
  --accent: oklch(0.65 0.15 264); /* Lighter blue accent for dark mode */
  --accent-foreground: oklch(0.08 0 0); /* Dark text on accent */
  --destructive: oklch(0.65 0.22 25); /* Lighter red for dark mode */
  --destructive-foreground: oklch(0.08 0 0); /* Dark text on destructive */
  --border: oklch(0.2 0 0); /* Dark border */
  --input: oklch(0.15 0 0); /* Dark input background */
  --ring: oklch(0.65 0.15 264 / 0.5); /* Blue ring for dark mode */
}

/* Configure Tailwind to use our custom properties */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base styles */
* {
  border-color: rgb(from var(--border) r g b);
}

body {
  background-color: rgb(from var(--background) r g b);
  color: rgb(from var(--foreground) r g b);
}

/* Font family utilities */
.font-sans {
  font-family: var(--font-inter);
}

.font-serif {
  font-family: var(--font-playfair);
}

.font-mono {
  font-family: var(--font-mono);
}

/* Color utilities using CSS custom properties */
.text-foreground { color: rgb(from var(--foreground) r g b); }
.text-primary { color: rgb(from var(--primary) r g b); }
.text-secondary { color: rgb(from var(--secondary) r g b); }
.text-muted-foreground { color: rgb(from var(--muted-foreground) r g b); }
.text-card-foreground { color: rgb(from var(--card-foreground) r g b); }
.text-secondary-foreground { color: rgb(from var(--secondary-foreground) r g b); }

.bg-background { background-color: rgb(from var(--background) r g b); }
.bg-card { background-color: rgb(from var(--card) r g b); }
.bg-muted { background-color: rgb(from var(--muted) r g b); }
.bg-secondary { background-color: rgb(from var(--secondary) r g b); }
.bg-transparent { background-color: transparent; }

.border-border { border-color: rgb(from var(--border) r g b); }
.border-primary { border-color: rgb(from var(--primary) r g b); }

.hover\:bg-secondary:hover { background-color: rgb(from var(--secondary) r g b); }
.hover\:text-secondary-foreground:hover { color: rgb(from var(--secondary-foreground) r g b); }
.hover\:border-secondary:hover { border-color: rgb(from var(--secondary) r g b); }

/* Custom Tailwind configuration for our design system */
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        background: 'rgb(from var(--background) r g b)',
        foreground: 'rgb(from var(--foreground) r g b)',
        card: {
          DEFAULT: 'rgb(from var(--card) r g b)',
          foreground: 'rgb(from var(--card-foreground) r g b)',
        },
        popover: {
          DEFAULT: 'rgb(from var(--popover) r g b)',
          foreground: 'rgb(from var(--popover-foreground) r g b)',
        },
        primary: {
          DEFAULT: 'rgb(from var(--primary) r g b)',
          foreground: 'rgb(from var(--primary-foreground) r g b)',
        },
        secondary: {
          DEFAULT: 'rgb(from var(--secondary) r g b)',
          foreground: 'rgb(from var(--secondary-foreground) r g b)',
        },
        muted: {
          DEFAULT: 'rgb(from var(--muted) r g b)',
          foreground: 'rgb(from var(--muted-foreground) r g b)',
        },
        accent: {
          DEFAULT: 'rgb(from var(--accent) r g b)',
          foreground: 'rgb(from var(--accent-foreground) r g b)',
        },
        destructive: {
          DEFAULT: 'rgb(from var(--destructive) r g b)',
          foreground: 'rgb(from var(--destructive-foreground) r g b)',
        },
        border: 'rgb(from var(--border) r g b)',
        input: 'rgb(from var(--input) r g b)',
        ring: 'rgb(from var(--ring) r g b)',
      },
      borderRadius: {
        lg: 'var(--radius)',
        md: 'calc(var(--radius) - 2px)',
        sm: 'calc(var(--radius) - 4px)',
      },
      fontFamily: {
        sans: ['var(--font-inter)', 'ui-sans-serif', 'system-ui'],
        serif: ['var(--font-playfair)', 'ui-serif', 'Georgia'],
        mono: ['var(--font-mono)', 'ui-monospace', 'SFMono-Regular'],
      },
    },
  },
}
</script>