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

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

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-display: var(--font-display);
  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-heading: var(--font-display);
  --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);
  --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);
}

:root {
  /* shadcn semantic tokens — warm palette */
  --background:          oklch(0.952 0.012 75);
  --foreground:          oklch(0.198 0.017 55);
  --card:                oklch(1 0 0);
  --card-foreground:     oklch(0.198 0.017 55);
  --popover:             oklch(1 0 0);
  --popover-foreground:  oklch(0.198 0.017 55);
  --primary:             oklch(0.545 0.165 35);
  --primary-foreground:  oklch(1 0 0);
  --secondary:           oklch(0.930 0.013 75);
  --secondary-foreground: oklch(0.198 0.017 55);
  --muted:               oklch(0.930 0.013 75);
  --muted-foreground:    oklch(0.480 0.025 60);
  --accent:              oklch(0.930 0.013 75);
  --accent-foreground:   oklch(0.198 0.017 55);
  --destructive:         oklch(0.545 0.165 35);
  --destructive-foreground: oklch(1 0 0);
  --border:              oklch(0.867 0.018 70);
  --input:               oklch(0.867 0.018 70);
  --ring:                oklch(0.545 0.165 35);
  --radius:              0.75rem;
  --chart-1: oklch(0.545 0.165 35);
  --chart-2: oklch(0.490 0.110 155);
  --chart-3: oklch(0.520 0.110 78);
  --chart-4: oklch(0.480 0.130 255);
  --chart-5: oklch(0.480 0.025 60);
  --sidebar:                    oklch(0.930 0.013 75);
  --sidebar-foreground:         oklch(0.198 0.017 55);
  --sidebar-primary:            oklch(0.545 0.165 35);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent:             oklch(0.930 0.013 75);
  --sidebar-accent-foreground:  oklch(0.198 0.017 55);
  --sidebar-border:             oklch(0.867 0.018 70);
  --sidebar-ring:               oklch(0.545 0.165 35);

  /* FlockOff brand tokens */
  --fo-ember:            oklch(0.545 0.165 35);
  --fo-flame:            oklch(0.630 0.155 45);
  --fo-text2:            oklch(0.480 0.025 60);
  --fo-text3:            oklch(0.650 0.020 65);
  --fo-surface2:         oklch(0.930 0.013 75);

  --fo-mutual:           oklch(0.490 0.110 155);
  --fo-mutual-bg:        oklch(0.490 0.110 155 / 0.10);
  --fo-mutual-border:    oklch(0.490 0.110 155 / 0.30);
  --fo-following:        oklch(0.520 0.110 78);
  --fo-following-bg:     oklch(0.520 0.110 78 / 0.10);
  --fo-following-border: oklch(0.520 0.110 78 / 0.30);
  --fo-follower:         oklch(0.480 0.130 255);
  --fo-follower-bg:      oklch(0.480 0.130 255 / 0.10);
  --fo-follower-border:  oklch(0.480 0.130 255 / 0.30);

  --fo-status-complete:  oklch(0.527 0.154 150);
  --fo-status-partial:   oklch(0.666 0.160 60);
  --fo-status-progress:  oklch(0.558 0.195 240);
  --fo-status-undone:    oklch(0.558 0.215 295);

  --fo-murmur:           oklch(0.198 0.017 55);

  --fo-shadow-card:      0 2px 8px oklch(0 0 0 / 0.06), 0 1px 2px oklch(0 0 0 / 0.04);
  --fo-shadow-elevated:  0 8px 24px oklch(0 0 0 / 0.10), 0 2px 6px oklch(0 0 0 / 0.06);
  --fo-shadow-hero:      0 16px 48px oklch(0 0 0 / 0.12);
}

.dark {
  /* shadcn semantic tokens — dark warm palette */
  --background:          oklch(0.155 0.012 60);
  --foreground:          oklch(0.940 0.010 75);
  --card:                oklch(0.228 0.015 58);
  --card-foreground:     oklch(0.940 0.010 75);
  --popover:             oklch(0.228 0.015 58);
  --popover-foreground:  oklch(0.940 0.010 75);
  --primary:             oklch(0.620 0.175 38);
  --primary-foreground:  oklch(1 0 0);
  --secondary:           oklch(0.192 0.013 60);
  --secondary-foreground: oklch(0.940 0.010 75);
  --muted:               oklch(0.192 0.013 60);
  --muted-foreground:    oklch(0.660 0.025 65);
  --accent:              oklch(0.192 0.013 60);
  --accent-foreground:   oklch(0.940 0.010 75);
  --destructive:         oklch(0.620 0.175 38);
  --destructive-foreground: oklch(1 0 0);
  --border:              oklch(0.270 0.018 58);
  --input:               oklch(0.270 0.018 58);
  --ring:                oklch(0.620 0.175 38);
  --chart-1: oklch(0.620 0.175 38);
  --chart-2: oklch(0.600 0.120 155);
  --chart-3: oklch(0.640 0.130 78);
  --chart-4: oklch(0.580 0.140 255);
  --chart-5: oklch(0.660 0.025 65);
  --sidebar:                    oklch(0.192 0.013 60);
  --sidebar-foreground:         oklch(0.940 0.010 75);
  --sidebar-primary:            oklch(0.620 0.175 38);
  --sidebar-primary-foreground: oklch(1 0 0);
  --sidebar-accent:             oklch(0.192 0.013 60);
  --sidebar-accent-foreground:  oklch(0.940 0.010 75);
  --sidebar-border:             oklch(0.270 0.018 58);
  --sidebar-ring:               oklch(0.620 0.175 38);

  /* FlockOff brand tokens — dark */
  --fo-ember:            oklch(0.620 0.175 38);
  --fo-flame:            oklch(0.680 0.160 48);
  --fo-text2:            oklch(0.660 0.025 65);
  --fo-text3:            oklch(0.485 0.020 65);
  --fo-surface2:         oklch(0.192 0.013 60);

  --fo-mutual:           oklch(0.600 0.120 155);
  --fo-mutual-bg:        oklch(0.600 0.120 155 / 0.12);
  --fo-mutual-border:    oklch(0.600 0.120 155 / 0.35);
  --fo-following:        oklch(0.640 0.130 78);
  --fo-following-bg:     oklch(0.640 0.130 78 / 0.12);
  --fo-following-border: oklch(0.640 0.130 78 / 0.35);
  --fo-follower:         oklch(0.580 0.140 255);
  --fo-follower-bg:      oklch(0.580 0.140 255 / 0.12);
  --fo-follower-border:  oklch(0.580 0.140 255 / 0.35);

  --fo-murmur:           oklch(0.940 0.010 75);

  --fo-shadow-card:      0 2px 8px oklch(0 0 0 / 0.25), 0 1px 2px oklch(0 0 0 / 0.15);
  --fo-shadow-elevated:  0 8px 24px oklch(0 0 0 / 0.35), 0 2px 6px oklch(0 0 0 / 0.20);
  --fo-shadow-hero:      0 16px 48px oklch(0 0 0 / 0.45);
}

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

@keyframes fo-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fo-fade-up {
  animation: fo-fade-up 0.4s ease forwards;
  opacity: 0;
}

@keyframes fo-stripe {
  from { background-position: 1rem 0; }
  to   { background-position: 0 0; }
}

.fo-feature-card:hover {
  box-shadow: var(--fo-shadow-elevated);
}

.fo-progress-stripe {
  background-image: linear-gradient(
    45deg,
    oklch(1 0 0 / 0.12) 25%, transparent 25%,
    transparent 50%, oklch(1 0 0 / 0.12) 50%,
    oklch(1 0 0 / 0.12) 75%, transparent 75%, transparent
  );
  background-size: 1rem 1rem;
  animation: fo-stripe 0.6s linear infinite;
}