@font-face {
  font-family: "Inter var";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter var";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "CommitMono";
  src:
    local("Commit Mono"),
    local("CommitMono"),
    url("../assets/fonts/CommitMono-VariableFont.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

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

/* Explicitly scan @decocms/ui components for Tailwind classes */
@source "../components/**/*.tsx";

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

@utility no-scrollbar {
  @apply [scrollbar-width:none] [&::-webkit-scrollbar]:hidden;
}

@utility border-shadow {
  box-shadow: var(--shadow-border);
}

@utility card-shadow {
  box-shadow: var(--card-shadow);
}

:root {
  --background: oklch(0.99 0.003 73);
  --foreground: oklch(0.145 0.01 60);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0.01 60);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0.01 60);
  --muted: oklch(0.955 0.006 80);
  --muted-foreground: oklch(0.46 0.012 60);
  --accent: oklch(0.955 0.008 80);
  --accent-foreground: oklch(0.2 0.01 60);
  --border: oklch(0.915 0.005 80);
  --input: oklch(0.88 0.006 80);
  --ring: oklch(0.205 0.012 60);

  --primary: oklch(0.205 0.012 60);
  --primary-foreground: oklch(0.98 0.005 60);

  --secondary: oklch(0.955 0.006 80);
  --secondary-foreground: oklch(0.2 0.01 60);

  --destructive: oklch(0.58 0.22 27);
  --destructive-foreground: oklch(0.97 0.01 17);
  --success: oklch(0.6 0.17 149);
  --success-foreground: oklch(0.98 0.02 156);
  --warning: oklch(0.62 0.17 70);
  --warning-foreground: oklch(0.99 0.02 95);
  --special: oklch(0.55 0.18 290);
  --special-foreground: oklch(0.98 0.02 295);

  --sidebar: oklch(0.975 0.006 80);
  --sidebar-foreground: oklch(0.2 0.01 60);
  --sidebar-accent: oklch(0.94 0.012 80);
  --sidebar-accent-foreground: oklch(0.2 0.01 60);
  --sidebar-border: oklch(0.915 0.005 80);
  --sidebar-ring: oklch(0.205 0.012 60);
  --sidebar-primary: oklch(0.205 0.012 60);
  --sidebar-primary-foreground: oklch(0.98 0.005 60);

  --chart-1: oklch(0.73 0.15 289);
  --chart-2: oklch(0.6 0.18 150);
  --chart-3: oklch(0.61 0.2 6.81);
  --chart-4: oklch(0.84 0.17 84.5);
  --chart-5: oklch(0.74 0.17 159);

  --font-sans: "Inter var", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono:
    "CommitMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;

  --spacing: 0.25rem;
  --radius: 0.375rem;
  --border-hairline: 1px;

  --shadow-xs: oklch(0 0 0 / 0.03) 0px 1px 2px;
  --shadow-sm: oklch(0 0 0 / 0.04) 0px 2px 4px, oklch(0 0 0 / 0.02) 0px 1px 2px;
  --shadow-md:
    oklch(0 0 0 / 0.06) 0px 4px 12px, oklch(0 0 0 / 0.04) 0px 2px 4px;
  --shadow-lg:
    oklch(0 0 0 / 0.08) 0px 8px 32px, oklch(0 0 0 / 0.06) 0px 4px 12px;
  --card-shadow:
    0px 0px 0px 1px #1d1b1814, 0px 1px 2px -1px #1d1b1812, 0px 2px 4px 0px
    #1d1b180d;
}

.dark {
  --background: oklch(0.175 0.005 60);
  --foreground: oklch(0.96 0.005 60);
  --card: oklch(0.21 0.005 60);
  --card-foreground: oklch(0.96 0.005 60);
  --popover: oklch(0.22 0.005 60);
  --popover-foreground: oklch(0.96 0.005 60);
  --muted: oklch(0.23 0.005 60);
  --muted-foreground: oklch(0.62 0.008 60);
  --accent: oklch(0.26 0.005 60);
  --accent-foreground: oklch(0.96 0.005 60);
  --border: oklch(0.26 0.005 60);
  --input: oklch(0.28 0.005 60);
  --ring: oklch(0.82 0.01 60);

  --primary: oklch(0.82 0.01 60);
  --primary-foreground: oklch(0.14 0.01 60);

  --secondary: oklch(0.21 0.005 60);
  --secondary-foreground: oklch(0.96 0.005 60);

  --destructive: oklch(0.62 0.22 27);
  --destructive-foreground: oklch(0.97 0.01 17);
  --success: oklch(0.45 0.15 149);
  --success-foreground: oklch(0.97 0.02 156);
  --warning: oklch(0.65 0.15 70);
  --warning-foreground: oklch(0.98 0.02 95);
  --special: oklch(0.6 0.16 290);
  --special-foreground: oklch(0.97 0.02 295);

  --sidebar: oklch(0.155 0.005 60);
  --sidebar-foreground: oklch(0.96 0.005 60);
  --sidebar-accent: oklch(0.23 0.005 60);
  --sidebar-accent-foreground: oklch(0.96 0.005 60);
  --sidebar-border: oklch(0.26 0.005 60);
  --sidebar-ring: oklch(0.82 0.01 60);
  --sidebar-primary: oklch(0.82 0.01 60);
  --sidebar-primary-foreground: oklch(0.14 0.01 60);

  --chart-1: oklch(0.73 0.15 289);
  --chart-2: oklch(0.6 0.18 150);
  --chart-3: oklch(0.61 0.2 6.81);
  --chart-4: oklch(0.84 0.17 84.5);
  --chart-5: oklch(0.74 0.17 159);
  --card-shadow:
    inset 0 1px 0 0 #ffffff08, inset 0 0 0 1px #ffffff08, 0 0 0 1px #0000001a,
    0 2px 2px 0 #0000001a, 0 4px 4px 0 #0000001a, 0 8px 8px 0 #0000001a;
}

@theme inline {
  --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-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-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-special: var(--special);
  --color-special-foreground: var(--special-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);
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);

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

  --font-sans: var(--font-sans);
  --font-mono: var(--font-mono);
  --font-serif: var(--font-serif);

  /* Custom font weight scale */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 650;

  /* Box Shadow Scale */
  --shadow-xs: var(--shadow-xs);
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);

  /* Border Radius - matches Tailwind's scale, proportional to --radius (md = base) */
  --radius-none: 0;
  --radius-xs: calc(var(--radius) * 0.333);
  --radius-sm: calc(var(--radius) * 0.667);
  --radius-DEFAULT: var(--radius);
  --radius-md: var(--radius);
  --radius-lg: calc(var(--radius) * 1.333);
  --radius-xl: calc(var(--radius) * 1.667);
  --radius-2xl: calc(var(--radius) * 2.667);
  --radius-3xl: calc(var(--radius) * 4);
  --radius-4xl: calc(var(--radius) * 5.333);
  --radius-full: 9999px;

  --default-border-width: 1px;

  /* Spacing Scale - dynamic scaling based on --spacing */
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0\.5: calc(var(--spacing) * 0.5);
  --spacing-1: var(--spacing);
  --spacing-1\.5: calc(var(--spacing) * 1.5);
  --spacing-2: calc(var(--spacing) * 2);
  --spacing-2\.5: calc(var(--spacing) * 2.5);
  --spacing-3: calc(var(--spacing) * 3);
  --spacing-3\.5: calc(var(--spacing) * 3.5);
  --spacing-4: calc(var(--spacing) * 4);
  --spacing-5: calc(var(--spacing) * 5);
  --spacing-6: calc(var(--spacing) * 6);
  --spacing-7: calc(var(--spacing) * 7);
  --spacing-8: calc(var(--spacing) * 8);
  --spacing-9: calc(var(--spacing) * 9);
  --spacing-10: calc(var(--spacing) * 10);
  --spacing-11: calc(var(--spacing) * 11);
  --spacing-12: calc(var(--spacing) * 12);
  --spacing-14: calc(var(--spacing) * 14);
  --spacing-16: calc(var(--spacing) * 16);
  --spacing-20: calc(var(--spacing) * 20);
  --spacing-24: calc(var(--spacing) * 24);
  --spacing-28: calc(var(--spacing) * 28);
  --spacing-32: calc(var(--spacing) * 32);
  --spacing-36: calc(var(--spacing) * 36);
  --spacing-40: calc(var(--spacing) * 40);
  --spacing-44: calc(var(--spacing) * 44);
  --spacing-48: calc(var(--spacing) * 48);
  --spacing-52: calc(var(--spacing) * 52);
  --spacing-56: calc(var(--spacing) * 56);
  --spacing-60: calc(var(--spacing) * 60);
  --spacing-64: calc(var(--spacing) * 64);
  --spacing-72: calc(var(--spacing) * 72);
  --spacing-80: calc(var(--spacing) * 80);
  --spacing-96: calc(var(--spacing) * 96);

  --text-sm: 0.8125rem;

  --animate-device-icon-pop: device-icon-pop 150ms var(--ease-out-cubic) both;
  --animate-connection-travel: connection-travel 2.6s var(--ease-in-out-cubic)
    infinite;
  --animate-connection-arrive: connection-arrive 2.6s var(--ease-out-cubic)
    infinite;
  --animate-preview-nav: preview-nav 1.1s var(--ease-in-out-cubic) infinite;
  --animate-card-land: card-land 240ms var(--ease-out-quint) both;
}

/* Animations */

:root {
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);

  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);

  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* A kanban card settling into the lane it was just dropped in. With live gap
   preview the card is already sitting in its destination when the pointer is
   released, so there's no distance left to travel — the motion has to be the
   card itself settling: it lands slightly small and leaning, then straightens.
   Echoes the lean the old FLIP implementation gave a lane-changing card. */
@keyframes card-land {
  from {
    opacity: 0;
    transform: scale(0.94) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes device-icon-pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* A dot travelling along the wire from the "you" node to the "deco" node on the
   commerce onboarding "schedule a meeting" card — reads as a live connection. */
@keyframes connection-travel {
  0% {
    left: 0%;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* A single ring that blooms out of the deco node exactly as the dot lands,
   completing the "message delivered" beat. Same period keeps it in sync. */
@keyframes connection-arrive {
  0%,
  72% {
    transform: scale(0.85);
    opacity: 0;
  }
  84% {
    opacity: 0.4;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Indeterminate top progress bar shown the instant a page/section is selected,
   until the preview iframe finishes loading — immediate click feedback. */
@keyframes preview-nav {
  0% {
    left: -40%;
    width: 40%;
  }
  50% {
    width: 55%;
  }
  100% {
    left: 100%;
    width: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Park it as a static full-width bar — still signals loading, no motion. */
  @keyframes preview-nav {
    0%,
    100% {
      left: 0%;
      width: 100%;
    }
  }

  @keyframes device-icon-pop {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Reveal the landed card without the scale/lean flourish. */
  @keyframes card-land {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  /* Park the dot mid-wire and drop the ring instead of animating. */
  @keyframes connection-travel {
    0%,
    100% {
      left: 50%;
      opacity: 1;
    }
  }
  @keyframes connection-arrive {
    0%,
    100% {
      opacity: 0;
    }
  }
}

/* Shadows */

:root {
  --shadow-border:
    0px 0px 0px 0.5px rgba(0, 0, 0, 0.09),
    0px 1px 2px -1px rgba(0, 0, 0, 0.2), 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}

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

  button:not(:disabled),
  [role="button"]:not([aria-disabled="true"]),
  select:not(:disabled),
  summary,
  [type="button"]:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="reset"]:not(:disabled),
  input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled) {
    cursor: pointer;
  }

  button:disabled,
  select:disabled,
  input:disabled,
  textarea:disabled,
  [role="button"][aria-disabled="true"] {
    cursor: not-allowed;
  }

  body {
    @apply bg-background text-foreground font-sans antialiased;
    font-weight: 450;
    font-feature-settings:
      "cv01", "cv02", "cv03", "cv04", "cv08", "cv10", "ss08";
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  /* Custom scrollbars for the whole product - only show on hover */
  * {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }

  *:hover {
    scrollbar-color: var(--border) transparent;
  }

  *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 4px;
  }

  *:hover::-webkit-scrollbar-thumb {
    background-color: var(--border);
  }

  *::-webkit-scrollbar-corner {
    background: transparent;
  }
}

/* ============================================================
   Brand colors
   --brand / --brand-foreground are the active Tailwind tokens.
   The palette variables are kept for reference and marketing surfaces.
   ============================================================ */
:root {
  --brand: #d0ec1a;
  --brand-foreground: #07401a;

  --brand-green-light: #d0ec1a;
  --brand-green-dark: #07401a;
  --brand-purple-light: #a595ff;
  --brand-purple-dark: #151042;
  --brand-yellow-light: #ffc116;
  --brand-yellow-dark: #392b02;
}

@media only screen and (min-device-pixel-ratio: 2),
  only screen and (min-resolution: 192dpi) {
  :root {
    --border-hairline: 0.5px;
  }
}

@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;
  }
}
