@import 'tailwindcss';

@custom-variant dark {
  &:where(
      [data-ock-theme='default-dark'] *,
      [data-ock-theme='base-dark'] *,
      [data-ock-theme='cyberpunk'] *
    ) {
    @slot;
  }
}

@layer base {
  :root {
    /* OnchainKit namespaced variables */
    --ock-radius-default: var(--radius-lg);
    --ock-radius-inner: var(--radius-md);
    --ock-font-family: 'DM Sans', sans-serif;

    /* Foreground colors */
    --ock-foreground: theme(colors.gray.950);
    --ock-foreground-muted: theme(colors.gray.600);
    --ock-foreground-inverse: theme(colors.gray.50);
    --ock-foreground-disabled: theme(colors.gray.400);

    /* Background colors */
    --ock-background: theme(colors.gray.50);
    --ock-background-hover: theme(colors.gray.200);
    --ock-background-active: theme(colors.gray.300);
    --ock-background-alternate: theme(colors.gray.200);
    --ock-background-alternate-hover: theme(colors.gray.300);
    --ock-background-alternate-active: theme(colors.gray.400);
    --ock-background-inverse: theme(colors.gray.100);
    --ock-background-inverse-hover: theme(colors.gray.200);
    --ock-background-inverse-active: theme(colors.gray.300);
    --ock-background-reverse: theme(colors.gray.950);

    /* Primary colors */
    --ock-primary: theme(colors.indigo.600);
    --ock-primary-hover: theme(colors.indigo.700);
    --ock-primary-active: theme(colors.indigo.800);
    --ock-primary-washed: theme(colors.indigo.100);
    --ock-primary-disabled: theme(colors.indigo.300);

    /* Secondary colors */
    --ock-secondary: theme(colors.slate.200);
    --ock-secondary-hover: theme(colors.slate.300);
    --ock-secondary-active: theme(colors.slate.400);

    /* State colors */
    --ock-error: theme(colors.rose.600);
    --ock-warning: theme(colors.orange.600);
    --ock-success: theme(colors.lime.600);
    --ock-success-background: theme(colors.lime.300);

    /* Line colors */
    --ock-line: theme(colors.gray.300);

    /* Shadow */
    --ock-shadow-default: 0px 8px 12px 0px #5b616e1f;
  }

  [data-ock-theme='default-dark'],
  [data-ock-theme='base-dark'],
  [data-ock-theme='cyberpunk'] {
    --ock-foreground: theme(colors.gray.50);
    --ock-foreground-muted: theme(colors.gray.400);
    --ock-foreground-inverse: theme(colors.gray.950);
    --ock-foreground-disabled: theme(colors.gray.600);

    --ock-background: theme(colors.gray.950);
    --ock-background-hover: theme(colors.gray.800);
    --ock-background-active: theme(colors.gray.700);
    --ock-background-alternate: theme(colors.gray.800);
    --ock-background-alternate-hover: theme(colors.gray.700);
    --ock-background-alternate-active: theme(colors.gray.600);
    --ock-background-inverse: theme(colors.gray.900);
    --ock-background-inverse-hover: theme(colors.gray.800);
    --ock-background-inverse-active: theme(colors.gray.700);
    --ock-background-reverse: theme(colors.gray.50);

    --ock-primary: theme(colors.indigo.400);
    --ock-primary-hover: theme(colors.indigo.300);
    --ock-primary-active: theme(colors.indigo.200);
    --ock-primary-washed: theme(colors.indigo.900);
    --ock-primary-disabled: theme(colors.indigo.950);

    --ock-secondary: theme(colors.slate.800);
    --ock-secondary-hover: theme(colors.slate.700);
    --ock-secondary-active: theme(colors.slate.600);

    --ock-error: theme(colors.rose.400);
    --ock-warning: theme(colors.orange.400);
    --ock-success: theme(colors.lime.400);
    --ock-success-background: theme(colors.lime.700);

    --ock-line: theme(colors.gray.700);
  }

  [data-ock-theme='base-light'] {
    --ock-primary: #0052ff;
    --ock-primary-hover: #014ceb;
    --ock-primary-active: #0148dc;
    --ock-primary-washed: #b2cbff;
    --ock-primary-disabled: #9dbcfe;
  }

  [data-ock-theme='base-dark'] {
    --ock-primary: #578bfa;
    --ock-primary-hover: #477ef5;
    --ock-primary-active: #5386f5;
    --ock-primary-washed: #051537;
    --ock-primary-disabled: #1b3365;
  }

  [data-ock-theme='cyberpunk'] {
    --ock-font-family: 'Oxanium', sans-serif;
    --ock-radius-default: 0.125rem;
    --ock-radius-inner: 0rem;
    --ock-primary: theme(colors.fuchsia.400);
    --ock-primary-hover: theme(colors.fuchsia.300);
    --ock-primary-active: theme(colors.fuchsia.200);
    --ock-primary-washed: theme(colors.fuchsia.900);
    --ock-primary-disabled: theme(colors.fuchsia.950);
    --ock-error: theme(colors.rose.600);
    --ock-success: theme(colors.lime.600);
    --ock-warning: theme(colors.orange.600);
  }

  [data-ock-theme='hacker'] {
    --ock-font-family: 'Noto Sans Mono', sans-serif;
    --ock-radius-default: 0.375rem;
    --ock-radius-inner: 0.125rem;

    --ock-foreground: theme(colors.zinc.950);
    --ock-foreground-muted: theme(colors.zinc.600);
    --ock-foreground-inverse: theme(colors.zinc.50);
    --ock-foreground-disabled: theme(colors.zinc.400);

    --ock-background: theme(colors.zinc.50);
    --ock-background-hover: theme(colors.zinc.200);
    --ock-background-active: theme(colors.zinc.300);
    --ock-background-alternate: theme(colors.zinc.200);
    --ock-background-alternate-hover: theme(colors.zinc.300);
    --ock-background-alternate-active: theme(colors.zinc.400);
    --ock-background-inverse: theme(colors.zinc.100);
    --ock-background-inverse-hover: theme(colors.zinc.200);
    --ock-background-inverse-active: theme(colors.zinc.300);
    --ock-background-reverse: theme(colors.neutral.50);

    --ock-primary: theme(colors.zinc.950);
    --ock-primary-hover: theme(colors.zinc.800);
    --ock-primary-active: theme(colors.zinc.700);
    --ock-primary-washed: theme(colors.zinc.100);
    --ock-primary-disabled: theme(colors.zinc.300);

    --ock-secondary: theme(colors.neutral.200);
    --ock-secondary-hover: theme(colors.neutral.300);
    --ock-secondary-active: theme(colors.neutral.400);

    --ock-error: theme(colors.rose.600);
    --ock-warning: theme(colors.orange.600);
    --ock-success: theme(colors.lime.600);

    --ock-line: theme(colors.zinc.300);
  }
}

@theme inline {
  --spacing-88: 22rem;
  --spacing-120: 30rem;

  --font-sans: 'Inter', sans-serif;
  --font-display: 'DM Sans', sans-serif;

  --font-ock: var(--ock-font-family);
  --radius-ock-default: var(--ock-radius-default);
  --radius-ock-inner: var(--ock-radius-inner);

  /* OnchainKit theme utilities with ock prefix */
  --color-ock-foreground: var(--ock-foreground);
  --color-ock-foreground-muted: var(--ock-foreground-muted);
  --color-ock-foreground-inverse: var(--ock-foreground-inverse);
  --color-ock-foreground-disabled: var(--ock-foreground-disabled);

  --color-ock-background: var(--ock-background);
  --color-ock-background-hover: var(--ock-background-hover);
  --color-ock-background-active: var(--ock-background-active);
  --color-ock-background-alternate: var(--ock-background-alternate);
  --color-ock-background-alternate-hover: var(--ock-background-alternate-hover);
  --color-ock-background-alternate-active: var(
    --ock-background-alternate-active
  );
  --color-ock-background-inverse: var(--ock-background-inverse);
  --color-ock-background-inverse-hover: var(--ock-background-inverse-hover);
  --color-ock-background-inverse-active: var(--ock-background-inverse-active);
  --color-ock-background-reverse: var(--ock-background-reverse);

  --color-ock-primary: var(--ock-primary);
  --color-ock-primary-hover: var(--ock-primary-hover);
  --color-ock-primary-active: var(--ock-primary-active);
  --color-ock-primary-washed: var(--ock-primary-washed);
  --color-ock-primary-disabled: var(--ock-primary-disabled);

  --color-ock-secondary: var(--ock-secondary);
  --color-ock-secondary-hover: var(--ock-secondary-hover);
  --color-ock-secondary-active: var(--ock-secondary-active);

  --color-ock-error: var(--ock-error);
  --color-ock-warning: var(--ock-warning);
  --color-ock-success: var(--ock-success);
  --color-ock-success-background: var(--ock-success-background);

  --color-ock-line: var(--ock-line);

  --shadow-ock-default: var(--ock-shadow-default);
}

@layer utilities {
  .scrollbar-hidden::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hidden {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
  }

  .ock-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #d1d5db #ffffff;
  }
}

@reference "./tailwind-animate-v4.css";
@layer utilities {
  .animate-enterRight {
    @apply animate-in slide-in-from-right-8 fade-in duration-500;
  }

  .animate-enterUp {
    @apply animate-in slide-in-from-bottom-8 fade-in duration-500;
  }

  .animate-enterDown {
    @apply animate-in slide-in-from-top-8 fade-in duration-500;
  }

  .placeholder-ock-default::placeholder {
    color: var(--ock-foreground-muted);
  }
}