/* Google Fonts removed - using local Geist font for better performance */
@import "tw-animate-css";

/* Geist Latin-only — removes cyrillic + latin-ext fonts (~30KB savings) */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('@fontsource-variable/geist/files/geist-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@custom-variant dark (&:is(.dark *));

/* Tailwind CSS v4 - use @import instead of @tailwind directives */
@import "tailwindcss";

@layer base {
  /* StoryFab design tokens — dark professional tool theme */
  :root {
    --bg-primary: #0d0d0f;
    --bg-secondary: #141418;
    --bg-tertiary: #1a1a1f;
    --bg-hover: #222228;
    --border-subtle: #2a2a30;
    --border-default: #3a3a42;
    --text-primary: #f0f0f2;
    --text-secondary: #8a8a96;
    --text-disabled: #4a4a52;
    --accent-primary: #f97316;
    --accent-primary-hover: #fb923c;
    --accent-secondary: #3b82f6;
    --accent-success: #22c55e;
    --accent-warning: #eab308;
    --accent-danger: #ef4444;
    --timeline-video: #8b5cf6;
    --timeline-audio: #06b6d4;
    --timeline-subtitle: #f59e0b;

    /* shadcn mapped vars — point to our design tokens */
    --background: var(--bg-primary);
    --foreground: var(--text-primary);
    --card: var(--bg-secondary);
    --card-foreground: var(--text-primary);
    --popover: var(--bg-secondary);
    --popover-foreground: var(--text-primary);
    --primary: var(--accent-primary);
    --primary-foreground: #ffffff;
    --secondary: var(--bg-tertiary);
    --secondary-foreground: var(--text-primary);
    --muted: var(--bg-tertiary);
    --muted-foreground: var(--text-secondary);
    --accent: var(--bg-hover);
    --accent-foreground: var(--text-primary);
    --destructive: var(--accent-danger);
    --border: var(--border-default);
    --input: var(--bg-tertiary);
    --ring: var(--accent-primary);

    --radius: 0.5rem;
  }

  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  html {
    @apply font-sans;
  }
}

@theme inline {
  --font-heading: var(--font-sans);
  --font-sans: 'Inter', sans-serif;
  --color-sidebar-ring: var(--sidebar-ring);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar: var(--sidebar);
  --color-chart-5: var(--chart-5);
  --color-chart-4: var(--chart-4);
  --color-chart-3: var(--chart-3);
  --color-chart-2: var(--chart-2);
  --color-chart-1: var(--chart-1);
  --color-ring: var(--ring);
  --color-input: var(--input);
  --color-border: var(--border);
  --color-destructive: var(--destructive);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent: var(--accent);
  --color-muted-foreground: var(--muted-foreground);
  --color-muted: var(--muted);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-secondary: var(--secondary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary: var(--primary);
  --color-popover-foreground: var(--popover-foreground);
  --color-popover: var(--popover);
  --color-card-foreground: var(--card-foreground);
  --color-card: var(--card);
  --color-foreground: var(--foreground);
  --color-background: var(--background);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --radius-2xl: calc(var(--radius) * 1.8);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

/* ─── Light theme ─────────────────────────────────────────── */
.light {
  /* StoryFab design tokens — light professional tool theme */
  --bg-primary: #ffffff;
  --bg-secondary: #f4f4f5;
  --bg-tertiary: #fafafa;
  --bg-hover: #e4e4e7;
  --border-subtle: #e4e4e7;
  --border-default: #d4d4d8;
  --text-primary: #09090b;
  --text-secondary: #71717a;
  --text-disabled: #a1a1aa;
  --accent-primary: #f97316;
  --accent-primary-hover: #fb923c;
  --accent-secondary: #3b82f6;
  --accent-success: #22c55e;
  --accent-warning: #eab308;
  --accent-danger: #ef4444;
  --timeline-video: #8b5cf6;
  --timeline-audio: #06b6d4;
  --timeline-subtitle: #f59e0b;

  /* shadcn mapped vars — light theme */
  --background: #ffffff;
  --foreground: #09090b;
  --card: #f4f4f5;
  --card-foreground: #09090b;
  --popover: #f4f4f5;
  --popover-foreground: #09090b;
  --primary: #f97316;
  --primary-foreground: #ffffff;
  --secondary: #f4f4f5;
  --secondary-foreground: #09090b;
  --muted: #f4f4f5;
  --muted-foreground: #71717a;
  --accent: #e4e4e7;
  --accent-foreground: #09090b;
  --destructive: #ef4444;
  --border: #e4e4e7;
  --input: #f4f4f5;
  --ring: #f97316;

  --radius: 0.5rem;

  color-scheme: light;
}

/* ─── Dark theme (legacy support) ──────────────────────────── */
.dark {
  color-scheme: dark;
}
