@import "tailwindcss";

@theme {
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-background: var(--background);
  --color-foreground: var(--foreground);

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

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

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

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

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

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

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

  --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif;
  --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-heading: var(--font-playfair), var(--font-geist-sans), serif;

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

@layer base {
  :root {
    /* Modern Editorial Dark Theme defaults */
    --background: oklch(0.12 0.01 260);
    --foreground: oklch(0.95 0.01 80);

    /* Vibrant Orange Accent */
    --primary: oklch(0.65 0.20 35);
    --primary-foreground: oklch(0.98 0.008 80);

    --secondary: oklch(0.20 0.01 260);
    --secondary-foreground: oklch(0.95 0.01 80);

    --muted: oklch(0.20 0.01 260);
    --muted-foreground: oklch(0.60 0.01 80);

    --accent: oklch(0.65 0.20 35);
    --accent-foreground: oklch(0.98 0.008 80);

    --destructive: oklch(0.40 0.20 25);
    --destructive-foreground: oklch(0.98 0.008 80);

    --border: oklch(0.25 0.01 260);
    --input: oklch(0.25 0.01 260);
    --ring: oklch(0.65 0.20 35);

    --card: oklch(0.15 0.01 260);
    --card-foreground: oklch(0.95 0.01 80);

    --popover: oklch(0.15 0.01 260);
    --popover-foreground: oklch(0.95 0.01 80);

    --radius: 0.75rem;

    /* Fluid Typography Scale */
    --text-hero: clamp(3rem, 7vw, 7rem);
    --text-h1: clamp(2.5rem, 5vw, 5rem);
    --text-h2: clamp(1.75rem, 3vw, 3rem);
    --text-h3: clamp(1.25rem, 2vw, 1.75rem);
    --text-body: 1rem;
    --text-small: 0.875rem;
  }

  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  h1, .font-hero {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  h2 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
  }

  .text-hero { font-size: var(--text-hero); }
  .text-h1 { font-size: var(--text-h1); }
  .text-h2 { font-size: var(--text-h2); }
  .text-h3 { font-size: var(--text-h3); }
}

@layer utilities {
  .glass-panel {
    background: color-mix(in oklch, var(--card) 60%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid color-mix(in oklch, var(--border) 40%, transparent);
  }

  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, var(--primary), oklch(0.80 0.15 50));
  }
}