@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-sans: "Inter", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --font-chivo: "Chivo", sans-serif;

    /* Core Theme Colors */
    --background: 0 0% 100%;
    --foreground: 0 0% 0%;
    --card: 0 0% 100%;
    --card-foreground: 0 0% 0%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    --primary: 0 0% 0%;
    --primary-foreground: 0 0% 100%;
    --primary-hover: 240 4% 16%;
    --secondary: 0 0% 100%;
    --secondary-foreground: 240 4% 16%;
    --secondary-hover: 240 6% 90%;
    --muted: 240 5% 96%;
    --muted-foreground: 240 4% 46%;
    --accent: 240 5% 96%;
    --accent-foreground: 0 0% 0%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --warning: 48, 96%, 89%;
    --warning-foreground: 26, 90%, 37%;
    --border: 240 4.8% 95.9%;
    --input: 240 6% 90%;
    --ring: 0 0% 0%;
    --placeholder-foreground: 240 5% 65%;

    --accent-amber: 48, 96%, 89%; /* amber-100 #fef3c7 */
    --accent-amber-foreground: 26, 90%, 37%; /* amber-700 #b45309 */
    --accent-emerald: 149, 80%, 90%; /* emerald-100 #d1fae5 */
    --accent-emerald-foreground: 161, 94%, 30%; /* emerald-600 #059669 */
    --accent-red: 0, 93%, 94%; /* red-100 #fee2e2 */
    --accent-red-foreground: 0, 72%, 51%; /* red-600 #dc2626 */
    --accent-indigo: 226, 100%, 94%; /* indigo-100 #e0e7ff */
    --accent-indigo-foreground: 243, 75%, 59%; /* indigo-600 #4f46e5 */
    --accent-pink: 326, 78%, 95%; /* pink-100 #fce7f3 */
    --accent-pink-foreground: 333, 71%, 51%; /* pink-600 #db2777 */
    --accent-purple: 269, 100%, 95%; /* purple-100 #f3e8ff */
    --accent-purple-foreground: 271, 81%, 56%; /* purple-600 #7c3aed */

    /* Component Colors */
    --component-icon: #d8598a;
    --flow-icon: #2f67d0;

    --radius: 0.5rem;
  }

  .dark {
    --background: 240 6% 10%;
    --foreground: 0 0% 100%;
    --card: 240 6% 10%;
    --card-foreground: 0 0% 100%;
    --popover: 240 6% 10%;
    --popover-foreground: 0 0% 100%;
    --primary: 0 0% 100%;
    --primary-foreground: 0 0% 0%;
    --primary-hover: 240 6% 90%;
    --secondary: 0 0% 0%;
    --secondary-foreground: 240 6% 90%;
    --secondary-hover: 240 4% 16%;
    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%;
    --accent: 240 4% 16%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --warning: 22, 78%, 26%;
    --warning-foreground: 46, 97%, 65%;
    --border: 240 3.7% 15.9%;
    --input: 240 5% 34%;
    --ring: 0 0% 100%;
    --placeholder-foreground: 240 4% 46%;

    --accent-amber: 22, 78%, 26%; /* amber-900 #78350f */
    --accent-amber-foreground: 46, 97%, 65%; /* amber-300 #fcd34d */
    --accent-emerald: 164, 86%, 16%; /* emerald-900 #064e3b */
    --accent-emerald-foreground: 158, 64%, 52%; /* emerald-400 #34d399 */
    --accent-red: 0, 63%, 31%; /* red-900 #7f1d1d */
    --accent-red-foreground: 0, 91%, 71%; /* red-400 #f87171 */
    --accent-indigo: 242, 47%, 34%; /* indigo-900 #312e81 */
    --accent-indigo-foreground: 234, 89%, 74%; /* indigo-400 #818cf8 */
    --accent-pink: 336, 69%, 30%; /* pink-900 #831843 */
    --accent-pink-foreground: 329, 86%, 70%; /* pink-400 #f472b6 */
    --accent-purple: 274, 66%, 32%; /* purple-900 #4c1d95 */
    --accent-purple-foreground: 270, 95%, 75%; /* purple-400 #a78bfa */
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
    font-family: Inter, system-ui, sans-serif;
  }
}

@layer components {
  .header-arrangement {
    @apply flex w-full h-[53px] items-center justify-between border-b border-border;
  }

  .header-start-display {
    @apply flex items-center gap-2;
  }

  .header-end-division {
    @apply flex justify-end px-2;
  }

  .header-end-display {
    @apply ml-auto mr-2 flex items-center gap-5;
  }

  .header-github-link {
    @apply inline-flex h-8 items-center justify-center rounded-md border border-input px-2 text-sm font-medium text-muted-foreground shadow-sm ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .header-notifications {
    @apply absolute right-[0px] top-[-4px] h-1 w-1 rounded-full bg-destructive;
  }

  .header-menu-bar {
    @apply flex items-center rounded-md py-1 text-sm font-medium;
  }

  .header-menu-bar-display {
    @apply flex max-w-[110px] cursor-pointer items-center gap-2 lg:max-w-[150px];
  }

  .header-menu-flow-name {
    @apply flex-1 truncate;
  }

  .header-menu-options {
    @apply mr-2 h-4 w-4;
  }

  .side-bar-arrangement {
    @apply flex h-full w-[18rem] flex-col overflow-hidden border-r scrollbar-hide;
  }

  .side-bar-search-div-placement {
    @apply relative mx-auto flex items-center py-3;
  }

  .side-bar-components-icon {
    @apply h-6 w-4 text-ring;
  }

  .side-bar-components-text {
    @apply w-full truncate pr-1 text-xs text-foreground;
  }

  .side-bar-components-div-form {
    @apply flex w-full items-center justify-between rounded-md rounded-l-none border border-l-0 border-dashed border-ring px-3 py-1 text-sm;
  }

  .side-bar-components-border {
    @apply cursor-grab rounded-l-md border-l-8;
  }

  .side-bar-components-gap {
    @apply flex flex-col gap-2 p-2;
  }

  .side-bar-components-div-arrangement {
    @apply w-full overflow-auto pb-10 scrollbar-hide;
  }

  .side-bar-button-size {
    @apply h-5 w-5;
  }

  .side-bar-button-size:hover {
    @apply hover:text-accent-foreground;
  }

  .side-bar-buttons-arrangement {
    @apply mb-2 mt-2 flex w-full items-center justify-between gap-2 px-2;
  }

  .side-bar-button {
    @apply flex w-full;
  }

  .components-disclosure-arrangement {
    @apply -mt-px flex w-full select-none items-center justify-between border-y border-y-input bg-primary-foreground px-3 py-2;
  }

  .components-disclosure-title {
    @apply flex items-center text-sm text-primary;
  }

  .toolbar-wrapper {
    @apply flex h-10 items-center gap-1 rounded-xl border border-border bg-background p-1 shadow-sm;
  }

  .playground-btn-flow-toolbar {
    @apply relative inline-flex h-8 w-full items-center justify-center gap-1.5 rounded px-3 py-1.5 text-sm font-normal transition-all duration-500 ease-in-out;
  }

  .input-search {
    @apply primary-input mx-2 pr-7;
  }

  /* GitHub Star Button */
  .github-star-link {
    @apply inline-flex h-8 items-center rounded-md text-sm font-medium text-muted-foreground shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
  }

  .github-star-content {
    @apply flex items-center px-2 pr-1;
  }

  .github-star-icon {
    @apply h-4 w-4;
  }

  .github-star-text {
    @apply ml-1;
  }

  .github-star-count-section {
    @apply border-l bg-muted/80 px-2 py-1;
  }

  .github-star-display {
    @apply flex items-center gap-1;
  }

  .github-star-count-icon {
    @apply h-3 w-3 fill-current;
  }

  .github-star-count {
    @apply text-xs font-medium text-foreground;
  }

  .github-star-loading {
    @apply flex items-center justify-center;
  }

  .github-star-skeleton {
    @apply h-3 w-8 animate-pulse bg-muted-foreground/20 rounded;
  }

  .github-star-error {
    @apply text-xs text-muted-foreground;
  }

  /* Discord Link */
  .discord-link {
    @apply inline-flex h-8 items-center rounded-md text-sm font-medium shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
    background-color: #5865f2;
    border-color: #5865f2;
    color: white;
  }

  .discord-link:hover {
    @apply opacity-90;
  }

  .discord-content {
    @apply flex items-center px-2 pr-1;
  }

  .discord-icon {
    @apply flex items-center justify-center;
  }

  .discord-text {
    @apply ml-1;
  }

  .discord-member-section {
    @apply border-l border-white/20 bg-black/10 px-2 py-1;
  }

  .discord-member-display {
    @apply flex items-center gap-1;
  }

  .discord-member-icon {
    @apply h-3 w-3;
  }

  .discord-member-count {
    @apply text-xs font-medium;
  }

  .discord-loading {
    @apply flex items-center justify-center;
  }

  .discord-skeleton {
    @apply h-3 w-8 animate-pulse bg-white/20 rounded;
  }

  .discord-error {
    @apply text-xs opacity-70;
  }
}