globals.css

@import url("/fonts/fonts.css");
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply bg-primary outline-theme-purple inline-block rounded-full px-6 py-2 font-semibold shadow-sm;
  }
  .text-primary {
    @apply bg-gradient-to-r from-[color:var(--theme-purple)] to-[color:var(--theme-blue)] bg-clip-text text-transparent !important;
  }
  .bg-primary {
    @apply bg-gradient-to-r from-[color:var(--theme-purple)] to-[color:var(--theme-blue)] text-white;
  }
  .outline-theme-purple {
    @apply hover:opacity-80 hover:outline-[color:var(--theme-purple)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-purple)];
  }
  .outline-theme-blue {
    @apply hover:opacity-80 hover:outline-[color:var(--theme-blue)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--theme-blue)];
  }
  .within-outline-theme-purple {
    @apply focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-[color:var(--theme-purple)] hover:opacity-80 hover:outline-[color:var(--theme-purple)];
  }
}

:root {
  --theme-purple: #5d52d9;
  --theme-blue: #4fc5eb;
  /* Keep the below variable names in sync with CSS_VARIABLES in globals-css.ts */
  --top-nav-bar-height: 3.5rem;
  --resume-control-bar-height: 3rem;
  --resume-padding: 1.5rem;
}