@import "tailwindcss";

@config '../tailwind.config.ts';

/*
  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);
  }
}

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  p {
    @apply mb-4;
    @apply text-flathub-dark-gunmetal;
    @apply leading-7;

    @media (prefers-color-scheme: dark) {
      @apply text-flathub-spanish-gray;
    }
  }

  main {
    flex-grow: 1;
  }

  html,
  body {
    @apply bg-background text-foreground;
    @apply p-0;
    @apply m-0;
    @apply overflow-x-hidden;
    @apply min-h-screen;
  }

  button,
  a {
    &:focus-visible {
      @apply outline;
      @apply outline-flathub-celestial-blue;
    }
  }

  a {
    @apply text-flathub-celestial-blue-dark;

    @media (prefers-color-scheme: dark) {
      @apply text-flathub-celestial-blue;
    }
  }

  mark {
    @apply rounded-sm;
    @apply bg-flathub-electric-red/40;
    @apply text-current;
  }
}

:root {
  --text-4xl--line-height: calc(2.5 / 2);
  /* // colors used via tailwind */
  --flathub-celestial-blue: 63.85% 0.1314 251.94;
  --flathub-celestial-blue-dark: 49.79% 0.1314 251.94;
  --flathub-electric-red: 57.01% 0.2339 29.23;

  --flathub-status-green: 65.83% 0.1334 159.27;
  --flathub-status-green-dark: 87.4% 0.1381 149.75;

  --flathub-status-yellow: 63.34% 0.1288 80.24;
  --flathub-status-yellow-dark: 91.01% 0.1531 100.56;

  --flathub-status-orange: 56.67% 0.176 40.5;
  --flathub-status-orange-dark: 62.94% 0.197 40.11;

  --flathub-status-red: 51.91% 0.196 25.07;
  --flathub-status-red-dark: 57.01% 0.1989 26.25;

  /* // grays */
  --flathub-white: 100% 0 106.37;

  --flathub-lotion: 98.48% 0 0;

  --flathub-gainsborow: 89.56% 0.0045 91.45;

  --flathub-gray-x11: 80.84% 0.0041 91.45;

  --flathub-spanish-gray: 68.62% 0.0046 91.47;

  --flathub-sonic-silver: 56.64% 0.0074 295.34;

  --flathub-granite-gray: 48.56% 0.0136 312.8;

  --flathub-arsenic: 35.42% 0.0248 301.11;

  --flathub-dark-gunmetal: 25.61% 0.0354 296.84;

  --flathub-black: 0% 0% 0;

  /* // reds */
  --flathub-vivid-crimson: 53.46% 0.21476703296252692 20.33110990321919;
  --flathub-dark-candy-apple-red: 46.09% 0.1876 26.75;

  --base-border-radius: 12px;
  --button-border-radius: 8px;
  --header-height: 64px;

  /* // for worldmap and below css */
  --text-primary: var(--flathub-dark-gunmetal);
  --bg-color-secondary: var(--flathub-white);
  --color-primary: var(--flathub-celestial-blue);

  /* // shad/cn theme */
  --background: var(--flathub-white);
  --foreground: var(--flathub-dark-gunmetal);

  --card: var(--flathub-white);
  --card-foreground: var(--flathub-dark-gunmetal);

  --popover: var(--flathub-white);
  --popover-foreground: var(--flathub-dark-gunmetal);

  --primary: var(--flathub-celestial-blue);
  --primary-foreground: var(--flathub-lotion);

  --secondary: var(--flathub-gainsborow);
  --secondary-foreground: var(--flathub-dark-gunmetal);

  --muted: var(--flathub-lotion);
  --muted-foreground: var(--flathub-sonic-silver);

  --accent: var(--flathub-lotion);
  --accent-foreground: var(--flathub-dark-gunmetal);

  --destructive: var(--flathub-vivid-crimson);
  --destructive-foreground: var(--flathub-lotion);

  --border: var(--flathub-gainsborow);
  --input: var(--flathub-sonic-silver);
  --ring: var(--flathub-dark-gunmetal);

  --radius: 0.5rem;
}

/* // shad/cn theme */
.dark {
  --background: var(--flathub-arsenic);
  --foreground: var(--flathub-gainsborow);

  --card: var(--flathub-dark-gunmetal);
  --card-foreground: var(--flathub-lotion);

  --popover: var(--flathub-dark-gunmetal);
  --popover-foreground: var(--flathub-lotion);

  --primary: var(--flathub-celestial-blue);
  --primary-foreground: var(--flathub-lotion);

  --secondary: var(--flathub-granite-gray);
  --secondary-foreground: var(--flathub-lotion);

  --muted: var(--flathub-arsenic);
  --muted-foreground: var(--flathub-spanish-gray);

  --accent: var(--flathub-granite-gray);
  --accent-foreground: var(--flathub-lotion);

  --destructive: var(--flathub-dark-candy-apple-red);
  --destructive-foreground: var(--flathub-lotion);

  --border: var(--flathub-granite-gray);
  --input: var(--flathub-spanish-gray);
  --ring: var(--flathub-gainsborow);

  /* // for worldmap and below css */
  --text-primary: var(--flathub-gainsborow);
  --bg-color-secondary: var(--flathub-arsenic);
  --color-primary: var(--flathub-celestial-blue);

  /* // for chart colors */
  :root {
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}
