@import "tailwindcss";
@import "tw-animate-css";

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-light-text: var(--light-text);
  --color-dark-text: var(--dark-text);
  --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-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-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --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);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --color-gradient-odd: var(--gradient-odd);
  --color-gradient-even: var(--gradient-even);
  --color-gradient-text: var(--gradient-text);
  --color-surface-background: var(--surface-background);
  --color-surface-background-reverse: var(--surface-background-reverse);
  --color-surface-background-gradient: var(--surface-background-gradient);
  --color-surface-border: var(--surface-border);
  --color-input-border: var(--input-border);
  --color-tabs-border-gradient: var(--tabs-border-gradient);
  --spacing-section: var(--section-spacing);
  --spacing-narrow-section: var(--section-spacing2);
  --spacing-header: var(--header-height);
  --radius-ws-rounded: var(--ws-rounded);
  --breakpoint-xs: 30rem;
  --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(--reka-accordion-content-height);
    }
  }
  @keyframes accordion-up {
  from {
    height: var(--reka-accordion-content-height);
    }
  to {
    height: 0;
    }
  }
}

:root {
  /* Apple-like clean light palette */
  --background: oklch(0.99 0 0); /* near-white */
  --foreground: oklch(0.24 0 0); /* deep neutral text */
  --light-text: oklch(1 0 0);
  --dark-text: oklch(0.24 0 0);
  --card: oklch(0.99 0 0);
  --card-foreground: oklch(0.24 0 0);
  --popover: oklch(0.99 0 0);
  --popover-foreground: oklch(0.24 0 0);
  --primary: oklch(0.2 0 0); /* almost black */
  --primary-foreground: oklch(0.99 0 0);
  --secondary: oklch(0.975 0 0); /* soft elevated surface */
  --secondary-foreground: oklch(0.22 0 0);
  --muted: oklch(0.975 0 0);
  --muted-foreground: oklch(0.56 0 0);
  --accent: oklch(0.7352 0.1277 211.3);
  --accent-foreground: oklch(0.7352 0.1277 211.3);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.93 0 0); /* lighter border */
  --input: oklch(0.93 0 0);
  --ring: oklch(0.72 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.99 0 0);
  --sidebar-foreground: oklch(0.24 0 0);
  --sidebar-primary: oklch(0.2 0 0);
  --sidebar-primary-foreground: oklch(0.99 0 0);
  --sidebar-accent: oklch(0.975 0 0);
  --sidebar-accent-foreground: oklch(0.22 0 0);
  --sidebar-border: oklch(0.935 0 0);
  --sidebar-ring: oklch(0.72 0 0);
  --gradient-odd: linear-gradient(
    90deg,
    oklch(0.985 0 0) 0%,
    oklch(0.972 0 0) 50%,
    oklch(0.96 0 0) 100%
  );
  --gradient-even: linear-gradient(
    90deg,
    oklch(0.985 0 0) 0%,
    oklch(0.972 0 0) 50%,
    oklch(0.96 0 0) 100%
  );
  --gradient-text: linear-gradient(
    90deg,
    oklch(0.2 0 0) 0%,
    oklch(0.4 0 0) 50%,
    oklch(0.2 0 0) 100%
  );
  --hero-overlay: linear-gradient(
    0deg,
    oklch(0.97 0 0) 7.95%,
    oklch(0.97 0 0 / 70%) 83.29%
  );
  --gradient-bg: linear-gradient(
    90deg,
    oklch(0.7352 0.1277 211.3 / 12%) 0%,
    oklch(0.6572 0.237 316.56 / 12%) 100%
  );
  --gradient-btn-active: linear-gradient(
    90deg,
    oklch(0.96 0 0 / 45%) 0%,
    oklch(0.98 0 0 / 45%) 100%
  );
  --surface-background: oklch(0.99 0 0);
  --surface-background-reverse: oklch(0.24 0 0);
  --surface-border: oklch(0.93 0 0);
  --input-border: oklch(0.93 0 0);
  --surface-background-gradient: linear-gradient(
    90deg,
    oklch(0.9 0.03 208.13) 0%,
    oklch(0.885 0.04 317.67) 100%
  );
  --btn-border-gradient: linear-gradient(
    90deg,
    oklch(0.7352 0.1277 211.3) 0%,
    oklch(0.6572 0.237 316.56) 100%
  );
  --tabs-border-gradient: linear-gradient(90deg, #00bed7 0%, #c853ef 100%);
  --icon-gradient-start: #00bed7;
  --icon-gradient-middle: #6488e3;
  --icon-gradient-end: #c853ef;
  --icon-text-color: oklch(0.985 0 0);
  --section-spacing: 6.25rem;
  --section-spacing2: 5rem;
  --header-height: 5rem;
  --ws-rounded: 0.5rem;
  --tiktok-middle: #fff;
  --logo-width: 126px;
}

.dark {
  --background: oklch(0.2136 0.0322 262.44);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.2136 0.0322 262.44);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.2136 0.0322 262.44);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(26.862% 0.00003 271.152);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(26.862% 0.00003 271.152);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.7352 0.1277 211.3);
  --accent-foreground: oklch(0.7352 0.1277 211.3);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.269 0 0);
  --input: oklch(0.269 0 0);
  --ring: oklch(0.439 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --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(0.269 0 0);
  --sidebar-ring: oklch(0.439 0 0);
  --gradient-odd: linear-gradient(
    180deg,
    oklch(0.159 0.0183 263.71) 0%,
    oklch(0.2345 0.0361 260.66) 96.92%
  );
  --gradient-even: linear-gradient(
    360deg,
    oklch(0.159 0.0183 263.71) 0%,
    oklch(0.2345 0.0361 260.66) 96.92%
  );
  --gradient-text: linear-gradient(
    90deg,
    oklch(0.683 0 0) 0%,
    oklch(1 0 0) 50%,
    oklch(0.683 0 0) 100%
  );
  --hero-overlay: linear-gradient(
    0deg,
    oklch(0.159 0.0183 263.71) 0%,
    oklch(0.2345 0.0361 260.66 / 80%) 100%
  );

  --surface-background: oklch(0.2522 0.0413 261.81);
  --surface-background-reverse: oklch(1 0 0);
  --surface-border: oklch(0.3425 0.0504 283.41);
  --input-border: oklch(0.5474 0.0291 244.76);
  --surface-background-gradient: linear-gradient(
    90deg,
    oklch(0.2962 0.049 231.64) 0%,
    oklch(0.2798 0.0653 296) 100%
  );
  --icon-gradient-start: #999999;
  --icon-gradient-middle: #ffffff;
  --icon-gradient-end: #999999;
  --icon-text-color: oklch(0.2136 0.0322 262.44);
  --tiktok-middle: #000;
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

  body {
    @apply bg-background text-foreground;
  }
}

.bg-gradient-odd {
  background-image: var(--color-gradient-odd);
}

.bg-gradient-even {
  background-image: var(--color-gradient-even);
}

.bg-gradient-btn-active {
  background-image: var(--color-gradient-btn-active);
}

.dark-text-gradient {
  color: oklch(0.4 0 0);

  background: var(--color-gradient-text);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  background-size: 100%;
  background-repeat: no-repeat;
}

.bg-hero-bg {
  background-image: var(--hero-overlay);
}

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

/* @media (min-width: 1536px) {
  :root {
    --section-spacing: 7.8125rem;
  }
} */

@media (max-width: 768px) {
  :root {
    --section-spacing: 5rem;
    --section-spacing2: 3.125rem;
  }
}