@import "@fontsource/inter/latin.css";
@import "@fontsource/castoro/latin.css";
@import "@fontsource-variable/geist";

@import 'tailwindcss';
@import 'tw-animate-css';
@import 'shadcn/tailwind.css';

@plugin '@tailwindcss/typography';

@custom-variant dark (&:is(.dark *));
@custom-variant fhd (@media (min-width: 1920px));
@custom-variant uw (@media (min-width: 2250px));

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0); /* #FFFFFF */
  --foreground: oklch(0.145 0 0); /* #171717 headings */
  --card: oklch(1 0 0); /* #FFFFFF */
  --card-foreground: oklch(0.145 0 0); /* #0D0D12 */
  --popover: oklch(1 0 0); /* #FFFFFF */
  --popover-foreground: oklch(0.145 0 0); /* #0D0D12 */
  /* Brand accent (red/orange); primary fills + icons use this token */
  --hatch-cta: oklch(0.62 0.26 27);
  --primary: var(--hatch-cta);
  --primary-foreground: oklch(1 0 89.88); /* #FFFFFF */
  --primary-hover: oklch(0.54 0.26 27);
  --secondary: oklch(0.97 0 0); /* #EDEDED */
  --secondary-foreground: oklch(0.205 0 0); /* #171717 */
  --muted: oklch(0.97 0 0); /* #F4F4F5 pill bg */
  --muted-foreground: oklch(0.556 0 0); /* #5C5C5C subheadings */
  --accent: oklch(0.97 0 0); /* #F8FAFB */
  --accent-foreground: oklch(0.205 0 0); /* #171717 */
  --accent-hover: oklch(0.96 0.006 230);
  --accent-light: oklch(0.99 0.002 230);
  --accent-subtle: oklch(0.97 0.004 230);
  --destructive: oklch(0.577 0.245 27.325); /* #EF4444 */
  --destructive-foreground: oklch(1 0 89.88); /* #FFFFFF */
  --border: oklch(0.922 0 0); /* #E4E4E7 */
  --border-light: oklch(0.956 0.004 248.7);
  --input: oklch(0.922 0 0); /* #E5E5E5 */
  --ring: oklch(0.708 0 0); /* #0D0D12 */
  --chart-1: oklch(0.87 0 0); /* #E65C41 */
  --chart-2: oklch(0.556 0 0); /* #2A9D8F */
  --chart-3: oklch(0.439 0 0); /* #264653 */
  --chart-4: oklch(0.371 0 0); /* #E9C46A */
  --chart-5: oklch(0.269 0 0); /* #F4A261 */
  --logo-gray: oklch(0.66 0.027 268.5); /* #818898 */
  --tagline: oklch(0.57 0.223 275.64); /* #5F57FF */
  --features-hero-top: oklch(0.9595 0.02 286.02); /* #F0F0FF */
  --features-hero-top-0: oklch(0.9595 0.02 286.02 / 0); /* #F0F0FF @ 0% */
  --features-hero-bottom: oklch(0.9782 0.0034 247.86); /* #F6F8FA */
  --shadow-soft: 0 2px 4px 0 rgba(13, 13, 18, 0.15);
  --shadow-light: 0 2px 4px 0 rgba(13, 13, 18, 0.04);
  --success: oklch(0.79 0.12 179.5); /* #40C4AA */
  --grid-border: var(--border); /* oklch(0.924 0.003 255.9) */
  --grid-hover: oklch(0.97 0 89.88 / 0.7);
  --process-bg: oklch(0.23 0 0); /* #1C1C1C */

  --pricing-card-gradient: linear-gradient(
    180deg,
    #f9f9f9 45.1%,
    rgba(249, 249, 249, 0) 103.14%
  );

  --section-py: 3.5rem;
  --section-py-sm: 4rem;
  --section-py-lg: 5rem;

  --hero-py: 4.5rem;
  --hero-py-sm: 5.5rem;
  --hero-py-lg: 7rem;

  --section-gap: 4rem;
  --section-gap-lg: 5.125rem;

  --font-inter: var(--font-imprima), "Imprima", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Castoro", ui-serif, Georgia, serif;
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --hatch-cta: oklch(0.68 0.25 27);
  --primary: var(--hatch-cta);
  /* On red primary fills, use light text */
  --primary-foreground: oklch(0.98 0.01 260);
  --primary-hover: oklch(0.6 0.25 27);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --accent-hover: oklch(0.28 0.01 260);
  --accent-light: oklch(0.32 0.01 260);
  --accent-subtle: oklch(0.22 0.015 260);
  --border: oklch(1 0 0 / 10%);
  --border-light: oklch(0.34 0.01 260);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.98 0.01 260);
  --success: oklch(0.74 0.12 179.5);
  --logo-gray: oklch(0.76 0.01 260);
  --tagline: oklch(0.72 0.16 275);
  --features-hero-top: oklch(0.24 0.01 260);
  --features-hero-top-0: oklch(0.24 0.01 260 / 0);
  --features-hero-bottom: oklch(0.19 0.01 260);
  --shadow-soft: 0 2px 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-light: 0 2px 10px -2px rgba(0, 0, 0, 0.5);
  --grid-border: var(--border-light);
  --grid-hover: oklch(0.96 0.01 260 / 0.08);

  --process-bg: oklch(0.18 0.01 260);

  --pricing-card-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.06) 45.1%,
    rgba(255, 255, 255, 0) 103.14%
  );

  --chart-1: oklch(0.87 0 0);

  --chart-2: oklch(0.556 0 0);

  --chart-3: oklch(0.439 0 0);

  --chart-4: oklch(0.371 0 0);

  --chart-5: oklch(0.269 0 0);

  --sidebar: oklch(0.205 0 0);

  --sidebar-foreground: oklch(0.985 0 0);

  --sidebar-primary: oklch(0.488 0.243 264.376);

  --sidebar-primary-foreground: oklch(0.985 0 0);

  --sidebar-accent: oklch(0.269 0 0);

  --sidebar-accent-foreground: oklch(0.985 0 0);

  --sidebar-border: oklch(1 0 0 / 10%);

  --sidebar-ring: oklch(0.556 0 0);
}

.force-light-vars {
  /* base tokens (light) */
  --primary: var(--hatch-cta);
  --primary-foreground: oklch(1 0 89.88); /* #FFFFFF */
  --foreground: oklch(0.172 0.006 286.3);
  --muted-foreground: oklch(0.61 0.03 270); /* #666D80 */
  --border: oklch(0.924 0.003 255.9);

  /* also pin the *resolved* theme vars many utilities read */
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-foreground: var(--foreground);
  --color-muted-foreground: var(--muted-foreground);
  --color-border: var(--border);
}

@theme inline {
  /* Astro: @fontsource + --font-inter / --font-display on :root */
  --font-inter: var(--font-inter);
  --font-text: var(--font-inter);
  --font-sans: 'Geist Variable', sans-serif;
  --font-serif: var(--font-display);

  --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-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);

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

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

  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-accent-hover: var(--accent-hover);
  --color-accent-light: var(--accent-light);
  --color-accent-subtle: var(--accent-subtle);

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

  --color-border: var(--border);
  --color-border-light: var(--border-light);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);

  --color-logo-gray: var(--logo-gray);

  --color-tagline: var(--tagline);
  --color-success: var(--success);

  --shadow-soft: var(--shadow-soft);
  --shadow-light: var(--shadow-light);

  --color-hatch-cta: var(--hatch-cta);

  --color-process-bg: var(--process-bg);

  --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);
  --font-heading: var(--font-sans);
  --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);
  --radius-3xl: calc(var(--radius) * 2.2);
  --radius-4xl: calc(var(--radius) * 2.6);
}

@utility container {
  margin-inline: auto;
  padding-inline: 1.5rem;

  /* on small screens, full-width up to padding */
  max-width: 100%;

  /* when you hit your “desktop” breakpoint, cap it */
  @media (min-width: 1200px) {
    max-width: 1200px;
  }
}

/* Narrower content width (process, dense layouts) — matches Figma “small container” */
@utility container-sm {
  margin-inline: auto;
  padding-inline: 1.5rem;
  max-width: 100%;
  @media (min-width: 1200px) {
    max-width: 960px;
  }
}

/* ── Accessibility: Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@layer base {
  /* Smooth scroll only for same-page anchor navigation, not cross-page */
  html:has(:target) {
    scroll-behavior: smooth;
  }
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply antialiased bg-background text-foreground;
    overflow-x: hidden;
  }
  html {
    @apply font-sans;
  }
}

@layer utilities {
  body {
    font-family:
      var(--font-text),
      ui-sans-serif,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Helvetica,
      Arial,
      'Apple Color Emoji',
      'Segoe UI Emoji';
  }

  h1,
  h2 {
    font-family: var(--font-display), serif;
  }

  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-text), ui-sans-serif, system-ui, sans-serif;
  }

  .bg-features-hero {
    /* 180deg = top ➜ bottom */
    background-image: linear-gradient(
      180deg,
      var(--features-hero-top-0) 0%,
      var(--features-hero-bottom) 100%
    );
  }

  .shadow-soft {
    box-shadow: var(--shadow-soft);
  }
  .shadow-light {
    box-shadow: var(--shadow-light);
  }

  .bg-pricing-card {
    background-image: var(--pricing-card-gradient);
  }

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

  .font-text {
    font-family:
      var(--font-text),
      ui-sans-serif,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Helvetica,
      Arial,
      'Apple Color Emoji',
      'Segoe UI Emoji';
  }

  .font-body {
    font-family:
      var(--font-text),
      ui-sans-serif,
      system-ui,
      -apple-system,
      Segoe UI,
      Roboto,
      Helvetica,
      Arial,
      'Apple Color Emoji',
      'Segoe UI Emoji';
  }

  .section-padding {
    @apply py-14 sm:py-16 lg:py-20;
  }

  .section-gap {
    @apply mt-16 lg:mt-[82px];
  }

  .hero-padding {
    @apply pt-16 pb-16 sm:pt-20 sm:pb-20 lg:pt-24 lg:pb-24;
  }
}

@layer components {
  button {
    cursor: pointer;
  }
  [class*='border'] {
    @apply border-border;
  }
}

body {
  position: relative;
  overflow-x: hidden;
}