@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%;
    --border: 240 6% 90%;
    --input: 240 6% 90%;
    --ring: 0 0% 0%;
    --placeholder-foreground: 240 5% 65%;

    /* Status Colors */
    --status-red: #ef4444;
    --status-yellow: #eab308;
    --status-green: #4ade80;
    --status-blue: #2563eb;

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

    /* Data Type Colors */
    --datatype-blue: 221.2 83.2% 53.3%;
    --datatype-blue-foreground: 214.3 94.6% 92.7%;
    --datatype-yellow: 40.6 96.1% 40.4%;
    --datatype-yellow-foreground: 54.9 96.7% 88%;
    --datatype-red: 0 72.2% 50.6%;
    --datatype-red-foreground: 0 93.3% 94.1%;
    --datatype-emerald: 161.4 93.5% 30.4%;
    --datatype-emerald-foreground: 149.3 80.4% 90%;
    --datatype-violet: 262.1 83.3% 57.8%;
    --datatype-violet-foreground: 251.4 91.3% 95.5%;

    /* Warning */
    --warning: 48 96.6% 76.7%;
    --warning-foreground: 240 6% 10%;

    --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%;
    --border: 240 5% 26%;
    --input: 240 5% 34%;
    --ring: 0 0% 100%;
    --placeholder-foreground: 240 4% 46%;

    /* Dark mode data type colors */
    --datatype-blue: 211.7 96.4% 78.4%;
    --datatype-blue-foreground: 221.2 83.2% 53.3%;
    --datatype-yellow: 50.4 97.8% 63.5%;
    --datatype-yellow-foreground: 40.6 96.1% 40.4%;
    --datatype-red: 0 93.5% 81.8%;
    --datatype-red-foreground: 0 72.2% 50.6%;
    --datatype-emerald: 156.2 71.6% 66.9%;
    --datatype-emerald-foreground: 161.4 93.5% 30.4%;
    --datatype-violet: 252.5 94.7% 85.1%;
    --datatype-violet-foreground: 262.1 83.3% 57.8%;

    --warning: 45.9 96.7% 64.5%;
    --warning-foreground: 240 6% 10%;
  }

  * {
    @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-[14.5rem] 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;
  }
}