@import "tailwindcss";

/* 
 * Theme Configuration
 * ==================
 * 
 * Base Theme: Zinc (shadcn/ui)
 * Documentation: https://ui.shadcn.com/docs/theming#zinc
 * 
 * Custom Color Extensions
 * ----------------------
 * The following colors extend the default shadcn/ui palette:
 * - base-brand: Primary brand color
 * - base-error: Error state color
 * - base-warning: Warning state color
 * - base-success: Success state color
 * 
 * Icon Colors:
 * Follow the same color as the text color except for the following:
 * - highlight: --color-icon-primary
 * 
 * Design System Integration
 * ------------------------
 * The default shadcn-ui colors have been modified to align with our design system.
 * 
 * @dev TODO when adding new colors: 
 * - Review and update colors against Figma design system
 * - Ensure color consistency across all components
 * - Document any color modifications from default shadcn-ui
 */

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

@theme {
  --breakpoint-xl4k: 2000px;
  --font-mono:
    "Roboto Mono", ui-monospace, SFMono-Regular, "Menlo", "Monaco", "Consolas",
    "Liberation Mono", "Courier New", monospace;
  --tracking-wider: 0.72px;
  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-scroll-left: scroll-left 20s linear infinite;

  /* DEV: TODO: Remove these colors once the new design system is fully implemented. 
   * Check the border colors and gradients as well.
   */
  /* Old System Colors */
  --color-middle-dark: var(--base-border);
  --color-light-dark: var(--base-muted);
  --color-tangerine: var(--base-brand);

  /* Design System Text and Icon Colors */
  --color-primary: var(--base-primary);
  --color-secondary: var(--base-muted-foreground);
  --color-dimmed: var(--base-dimmed);
  --color-inverted: var(--base-background);
  --color-success: var(--base-success);
  --color-warning: var(--base-warning);
  --color-error: var(--base-error);
  --color-link: var(--base-brand);
  --color-link-hover: var(--base-brand);
  --color-highlight: var(--base-brand);

  /* Surface Colors */
  --color-surface-background: var(--base-background);
  --color-surface-default: var(--base-primary-foreground);
  --color-surface-contrast: var(--base-muted);
  --color-surface-hover: var(--base-border);
  --color-surface-action: var(--base-primary);
  --color-surface-action-hover: var(--base-primary-opacity-darker);
  --color-surface-destructive: var(--base-destructive);
  --color-surface-destructive-hover: var(--base-destructive-hover);
  --color-surface-disabled: var(--base-muted);

  /* Opacity Surface Colors */
  --color-surface-opacity-success: var(--base-success-opacity);
  --color-surface-opacity-warning: var(--base-warning-opacity);
  --color-surface-opacity-error: var(--base-error-opacity);
  --color-surface-opacity-brand: var(--base-brand-opacity);
  --color-surface-opacity: var(--base-primary-opacity);

  /* Solid Surface Colors */
  --color-surface-solid-success: var(--base-success);
  --color-surface-solid-warning: var(--base-warning);
  --color-surface-solid-error: var(--base-error);
  --color-surface-solid-brand: var(--base-brand);

  /* Border Colors */
  --color-border-default: var(--base-secondary);
  --color-border-contrast: var(--base-border);
  --color-border-primary: var(--base-primary-foreground);

  /* Icon Sizes */
  --size-icon-xxs: 16px;
  --size-icon-xs: 20px;
  --size-icon-sm: 24px;
  --size-icon-md: 36px;
  --size-icon-lg: 48px;
  --size-icon-xl: 76px;

  /* Text Sizes */
  --text-alternative-sm: 13px;
  --text-alternative-sm--line-height: 20px;
  --text-alternative-sm--letter-spacing: 6%;

  --text-alternative-xs: 12px;
  --text-alternative-xs--line-height: 16px;
  --text-alternative-xs--letter-spacing: 6%;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }

  /* root colors  */
  --radius: 0.625rem;
  --base-background: #ffffff;
  --base-foreground: #09090b;
  --base-muted: #f4f4f5;
  --base-muted-foreground: #71717a;
  --base-card: #ffffff;
  --base-card-foreground: #09090b;
  --base-border: #e4e4e7;
  --base-input: #e4e4e7;
  --base-primary: #18181b;
  --base-primary-foreground: #fafafa;
  --base-secondary: #f4f4f5;
  --base-secondary-foreground: #18181b;
  --base-accent: #f4f4f5;
  --base-accent-foreground: #18181b;
  --base-destructive: #ef4444;
  --base-destructive-foreground: #fafafa;
  --base-ring: #71717a;
  --base-popover: #ffffff;
  --base-popover-foreground: #09090b;
  --base-sidebar: #fafafa;
  --base-sidebar-foreground: #09090b;
  --base-sidebar-primary: #18181b;
  --base-sidebar-primary-foreground: #fafafa;
  --base-sidebar-accent: #f5f5f6;
  --base-sidebar-accent-foreground: #18181b;
  --base-sidebar-border: #e4e4e7;

  --base-chart-1: #3b82f6;
  --base-chart-2: #ec4899;
  --base-chart-3: #f59e0b;
  --base-chart-4: #a855f7;
  --base-chart-5: #10b981;
  --base-chart-6: #06b6d4;
  --base-chart-7: #fbbf24;

  /* Custom Colors */
  --base-primary-opacity: #fafafa1f;
  --base-primary-opacity-darker: #fafafab2;
  --base-brand: #ec762e;
  --base-brand-lighter: #fb8f4d;
  --base-brand-opacity: #fb8f4d1f;
  --base-success: #4ade80;
  --base-success-opacity: #4ade801f;
  --base-warning: #facc15;
  --base-warning-opacity: #facc151f;
  --base-error: #f87171;
  --base-error-opacity: #f871711f;
  --base-destructive-hover: #f87171;
  --base-dimmed: #a1a1aa;

  @keyframes scroll-left {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
}

/* 
  @DEV: TODO: Check these styles once the new design system is fully implemented.
  - Check the font sizes and line heights when create the Text component.
  
  --text-xl: 18px;
  --text-xl--line-height: 24px;

  --text-lg: 16px;
  --text-lg--line-height: 24px;

  --text-md: 14px;
  --text-md--line-height: 20px;

  --text-sm: 12px;
  --text-sm--line-height: 16px; */

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .scrollbar-none::-webkit-scrollbar {
    display: none;
  }

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

  /* Thin scrollbar on hover */
  .hover\:scrollbar-thin:hover {
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #a1a1aa transparent; /* Firefox */
  }

  .hover\:scrollbar-thin:hover::-webkit-scrollbar {
    width: 6px; /* Chrome, Safari, Opera */
  }

  .hover\:scrollbar-thin:hover::-webkit-scrollbar-track {
    background: transparent; /* Chrome, Safari, Opera */
  }

  .hover\:scrollbar-thin:hover::-webkit-scrollbar-thumb {
    background: #a1a1aa; /* Chrome, Safari, Opera */
    border-radius: 3px;
  }

  .hover\:scrollbar-thin:hover::-webkit-scrollbar-thumb:hover {
    background: #71717a; /* Chrome, Safari, Opera */
  }

  .no-scroll {
    overflow: hidden;
  }

  .card-container-about {
    @apply border-light-dark bg-surface-default xl4k:max-w-full flex flex-col rounded-lg border shadow-sm sm:max-w-full lg:max-w-[250px];
  }

  .card-header-about {
    @apply border-light-dark flex items-center gap-3 rounded-t-lg border-b px-4 py-3;
  }

  .card-header-about-text {
    @apply text-base font-normal leading-normal;
  }

  .card-body-about {
    @apply flex h-full flex-col gap-4 p-3;
  }

  .card-description-about {
    @apply flex h-full flex-col space-y-2 p-1;
  }

  .card-description-title {
    @apply flex items-center gap-1.5;
  }

  .skeleton-text {
    @apply animate-pulse rounded-md bg-gray-300;
  }

  .skeleton-icon {
    @apply animate-pulse rounded-full bg-gray-300;
  }

  .btn-connect-wallet {
    @apply bg-surface-contrast text-primary hover:bg-surface-hover flex size-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 hover:border;
  }

  .card-text-accordion {
    @apply text-secondary text-sm font-normal leading-normal;
  }

  .section-title-gap {
    @apply gap-4 sm:gap-6;
  }

  .link-tangerine {
    @apply hover:text-tangerine/80 text-tangerine font-mono text-[13px] font-medium uppercase leading-none tracking-wider;
  }

  .text-table-header {
    @apply text-xs font-semibold sm:font-medium;
  }

  .stage-tooltip-box-shadow {
    box-shadow:
      0px 4px 4px 0px rgba(0, 0, 0, 0.25),
      0px 8px 10px -6px rgba(0, 0, 0, 0.1);
  }

  .section-layout-icon {
    @apply text-secondary size-5;
  }

  /* Recharts Brush tick formatting */
  .recharts-brush-texts text {
    fill: #fafafa !important;
    font-size: 10px;
  }
}

/*
  The default border color has changed to `currentcolor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentcolor);
  }

  /*
  @DEV: TODO: Check these styles once the new design system is fully implemented.
  - Check the font sizes and line heights when create the Text component.
  
  h1 {
    @apply text-[40px] leading-[44px] tracking-[-1.2%];
  }

  h2 {
    @apply text-[30px] leading-[36px] tracking-[-0.75%];
  }

  h3 {
    @apply text-[24px] leading-[32px] tracking-[-0.6%];
  }

  h4 {
    @apply text-[20px] leading-[28px] tracking-[-0.5%];
  } */

  .dark {
    --base-background: #09090b;
    --base-foreground: #fafafa;
    --base-muted: #27272a;
    --base-muted-foreground: #a1a1aa;
    --base-card: #09090b;
    --base-card-foreground: #fafafa;
    --base-popover: #09090b;
    --base-popover-foreground: #fafafa;
    --base-border: #3f3f46;
    --base-input: #3f3f46;
    --base-primary: #fafafa;
    --base-primary-foreground: #18181b;
    --base-secondary: #27272a;
    --base-secondary-foreground: #fafafa;
    --base-accent: #27272a;
    --base-accent-foreground: #fafafa;
    --base-destructive: #7f1d1d;
    --base-destructive-foreground: #fafafa;
    --base-ring: #a1a1aa;

    --base-chart-1: #3b82f6;
    --base-chart-2: #ec4899;
    --base-chart-3: #f59e0b;
    --base-chart-4: #a855f7;
    --base-chart-5: #10b981;
    --base-chart-6: #06b6d4;
    --base-chart-7: #fbbf24;

    /* Custom Colors */
    --base-primary-opacity: #fafafa1f;
    --base-primary-opacity-darker: #fafafab2;
    --base-brand: #ec762e;
    --base-brand-lighter: #fb8f4d;
    --base-brand-opacity: #fb8f4d1f;
    --base-success: #4ade80;
    --base-success-opacity: #4ade801f;
    --base-warning: #facc15;
    --base-warning-opacity: #facc151f;
    --base-error: #f87171;
    --base-error-opacity: #f871711f;
    --base-destructive-hover: #991b1b;
    --base-dimmed: #52525b;
  }
}
