@import "tailwindcss";

@theme {
  /* Colors */
  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  /* Border radius */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  /* Font family - Updated for distinctive typography */
  --font-sans: var(--font-outfit), system-ui, sans-serif;
  --font-serif: var(--font-instrument-serif), Georgia, serif;
  --font-mono: var(--font-jetbrains-mono), monospace;

  /* Container */
  --container-2xl: 1400px;

  /* Animations */
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

  @keyframes accordion-down {
    from { height: 0; }
    to { height: var(--radix-accordion-content-height); }
  }

  @keyframes accordion-up {
    from { height: var(--radix-accordion-content-height); }
    to { height: 0; }
  }
}

@layer base {
  :root {
    /* Refined dark theme - modern & minimal */
    --background: 0 0% 4%;            /* #0a0a0a - True dark */
    --foreground: 0 0% 98%;           /* #fafafa - Bright white */

    --card: 0 0% 8%;                  /* #141414 - Subtle card */
    --card-foreground: 0 0% 98%;

    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;

    --primary: 18 55% 48%;            /* #be6a42 - Darker terracotta for button contrast */
    --primary-foreground: 0 0% 98%;

    --secondary: 0 0% 12%;            /* #1f1f1f - Subtle gray */
    --secondary-foreground: 0 0% 98%;

    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 55%;     /* #8c8c8c - Softer muted */

    --accent: 18 55% 48%;             /* Same as primary */
    --accent-foreground: 0 0% 98%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 98%;

    --border: 0 0% 14%;               /* #242424 - Subtle borders */
    --input: 0 0% 14%;
    --ring: 18 55% 48%;               /* Matches accent */

    --radius: 0.5rem;                 /* Slightly smaller radius for cleaner look */
  }

  /* Dark mode same as root - dark only */
  .dark {
    --background: 0 0% 4%;
    --foreground: 0 0% 98%;
    --card: 0 0% 8%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 8%;
    --popover-foreground: 0 0% 98%;
    --primary: 18 55% 48%;
    --primary-foreground: 0 0% 98%;
    --secondary: 0 0% 12%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 12%;
    --muted-foreground: 0 0% 55%;
    --accent: 18 55% 48%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    --border: 0 0% 14%;
    --input: 0 0% 14%;
    --ring: 18 55% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  a, button, [role="button"] {
    cursor: pointer;
  }

  html {
    @apply scroll-smooth;
    color-scheme: dark;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Typography - refined hierarchy */
  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight;
    font-family: var(--font-serif);
  }

  /* Simplified card hover - subtle */
  .card-hover {
    @apply transition-colors duration-200;
  }

  .card-hover:hover {
    @apply border-border/80;
  }

  /* Clean button style */
  .btn-primary {
    @apply bg-primary text-primary-foreground;
    @apply transition-opacity duration-200;
  }

  .btn-primary:hover {
    @apply opacity-90;
  }

  /* Subtle fade animation */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in {
    animation: fadeIn 0.4s ease-out;
  }
}

/* Clean utilities */
@layer utilities {
  /* Display typography with serif font */
  .text-display-1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-family: var(--font-serif);
  }

  .text-display-2 {
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-family: var(--font-serif);
  }

  .text-display-3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-family: var(--font-serif);
  }

  /* Simple accent text */
  .text-accent {
    color: hsl(var(--primary));
  }

  .backdrop-blur-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}
