/* opendraft theme for projects without the shadcn CLI. Save as your global stylesheet (for example src/index.css). */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&family=Newsreader:opsz,wght@6..72,300;6..72,400&display=swap");
@import "tailwindcss";

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

:root {
  --font-geist: "Geist";
  --font-geist-mono: "Geist Mono";
  --font-newsreader: "Newsreader";
  --blue-50: #f0f3ff;
  --blue-100: #e2e8ff;
  --blue-200: #c8d2ff;
  --blue-300: #a3b3ff;
  --blue-400: #7b8cfa;
  --blue-500: #5468f4;
  --blue-600: #3d4fe6;
  --blue-700: #3140c2;
  --blue-800: #29359a;
  --blue-900: #232d74;
  --blue-950: #151a45;
  --font-heading: var(--font-newsreader, ui-serif, Georgia, serif);
  --font-body: var(--font-geist, ui-sans-serif, system-ui, sans-serif);
  --font-code: var(--font-geist-mono, ui-monospace, monospace);
  --heading-weight: 300;
  --heading-tracking: -0.02em;
  --control-radius: 2px;
  --surface-radius: 3px;
  --text-scale: 1;
  --radius: var(--control-radius);
  --background: #fafafa;
  --foreground: #0e0e10;
  --card: #ffffff;
  --card-foreground: var(--foreground);
  --popover: #ffffff;
  --popover-foreground: var(--foreground);
  --surface: #f4f4f5;
  --primary: var(--blue-600);
  --primary-foreground: #ffffff;
  --secondary: #f1f1f3;
  --secondary-foreground: var(--foreground);
  --brand: var(--blue-600);
  --brand-foreground: #ffffff;
  --ink: #0e0e10;
  --ink-foreground: #ffffff;
  --muted: #f2f2f3;
  --muted-foreground: #6b6b72;
  --accent: #efeff1;
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.577 0.215 27);
  --destructive-foreground: #ffffff;
  --success: oklch(0.6 0.14 155);
  --warning: oklch(0.75 0.15 70);
  --border: #e4e4e7;
  --input: #d9d9de;
  --ring: color-mix(in oklch, var(--blue-500) 45%, transparent);
  --shadow-xs: 0 1px 0 rgb(14 14 16 / 0.02);
  --shadow-sm: 0 1px 2px rgb(14 14 16 / 0.04);
  --shadow-md: 0 4px 16px rgb(14 14 16 / 0.06);
  --shadow-lg: 0 8px 24px rgb(14 14 16 / 0.08);
  --shadow-xl: 0 24px 56px rgb(14 14 16 / 0.14);
  --highlight: 0 0 #0000;
}

.dark {
  --background: #0a0a0b;
  --foreground: #f2f2f3;
  --card: #111113;
  --card-foreground: var(--foreground);
  --popover: #151517;
  --popover-foreground: var(--foreground);
  --surface: #0f0f11;
  --primary: var(--blue-500);
  --primary-foreground: #ffffff;
  --secondary: #1b1b1e;
  --secondary-foreground: var(--foreground);
  --brand: var(--blue-400);
  --brand-foreground: #ffffff;
  --ink: #f2f2f3;
  --ink-foreground: #0e0e10;
  --muted: #1a1a1d;
  --muted-foreground: #8e8e96;
  --accent: rgb(255 255 255 / 0.06);
  --accent-foreground: var(--foreground);
  --destructive: oklch(0.65 0.2 25);
  --destructive-foreground: #ffffff;
  --success: oklch(0.72 0.15 155);
  --warning: oklch(0.8 0.15 75);
  --border: rgb(255 255 255 / 0.09);
  --input: rgb(255 255 255 / 0.13);
  --ring: color-mix(in oklch, var(--blue-400) 50%, transparent);
  --shadow-xs: 0 1px 0 rgb(0 0 0 / 0.3);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.45);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5);
  --shadow-xl: 0 24px 56px rgb(0 0 0 / 0.6);
  --highlight: 0 0 #0000;
}

@theme inline {
  --font-sans: var(--font-body);
  --font-display: var(--font-heading);
  --font-mono: var(--font-code);
  --text-xs: calc(0.75rem * var(--text-scale));
  --text-sm: calc(0.875rem * var(--text-scale));
  --text-base: calc(1rem * var(--text-scale));
  --text-lg: calc(1.125rem * var(--text-scale));
  --text-xl: calc(1.25rem * var(--text-scale));
  --text-2xl: calc(1.5rem * var(--text-scale));
  --text-3xl: calc(1.875rem * var(--text-scale));
  --text-4xl: calc(2.25rem * var(--text-scale));
  --text-5xl: calc(3rem * var(--text-scale));
  --text-6xl: calc(3.75rem * var(--text-scale));
  --text-7xl: calc(4.5rem * var(--text-scale));
  --text-8xl: calc(6rem * var(--text-scale));
  --text-9xl: calc(8rem * var(--text-scale));
  --color-blue-50: var(--blue-50);
  --color-blue-100: var(--blue-100);
  --color-blue-200: var(--blue-200);
  --color-blue-300: var(--blue-300);
  --color-blue-400: var(--blue-400);
  --color-blue-500: var(--blue-500);
  --color-blue-600: var(--blue-600);
  --color-blue-700: var(--blue-700);
  --color-blue-800: var(--blue-800);
  --color-blue-900: var(--blue-900);
  --color-blue-950: var(--blue-950);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-surface: var(--surface);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
  --color-ink: var(--ink);
  --color-ink-foreground: var(--ink-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-xs: calc(var(--control-radius) * 0.25);
  --radius-sm: calc(var(--control-radius) * 0.5);
  --radius-md: var(--control-radius);
  --radius-control: var(--control-radius);
  --radius-lg: var(--surface-radius);
  --radius-surface: var(--surface-radius);
  --radius-xl: calc(var(--surface-radius) + 1px);
  --radius-2xl: calc(var(--surface-radius) + 3px);
  --radius-3xl: calc(var(--surface-radius) + 5px);
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --animate-pop-in: pop-in 160ms var(--ease-out);
  --animate-pop-out: pop-out 120ms var(--ease-in) forwards;
  --animate-shimmer: shimmer 2.2s linear infinite;
  --animate-marquee: marquee var(--marquee-duration, 30s) linear infinite;
  --animate-fade-in: fade-in 300ms var(--ease-out) both;
  --animate-fade-up: fade-up 320ms var(--ease-out) both;
  --animate-pixel-on: pixel-on 650ms var(--ease-in-out) infinite;
  --animate-eq: eq 900ms var(--ease-in-out) infinite;
  --animate-blink: blink 1.1s var(--ease-in-out) infinite;
}

@layer base {
  * {
    border-color: var(--border);
    outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
  }
  html {
    color-scheme: light;
  }
  html.dark {
    color-scheme: dark;
  }
  body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4 {
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  ::selection {
    background: color-mix(in oklch, var(--brand) 28%, transparent);
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(var(--pop-y, -2px));
    filter: blur(2px);
  }
}

@keyframes pop-out {
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes pixel-on {
  0%,
    100% {
    opacity: 0.15;
  }
  40% {
    opacity: 1;
  }
}

@keyframes eq {
  0%,
    100% {
    transform: scaleY(0.35);
  }
  50% {
    transform: scaleY(1);
  }
}

@keyframes blink {
  50% {
    opacity: 0.3;
  }
}

@keyframes marquee {
  to {
    transform: translateX(calc(-50% - var(--marquee-gap, 1rem) / 2));
  }
}

@utility bg-dots {
  background-image: radial-gradient( var(--dot-color, color-mix(in oklch, var(--foreground) 14%, transparent)) 1px, transparent 1px );
  background-size: var(--dot-gap, 14px) var(--dot-gap, 14px);
}

@utility heading {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  letter-spacing: var(--heading-tracking);
}

@utility eyebrow {
  font-family: var(--font-mono);
  font-size: calc(11px * var(--text-scale));
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@utility scrollbar-hide {
  &::-webkit-scrollbar {
    display: none;
  }
  scrollbar-width: none;
}