@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {
  color-scheme: normal;
  /* Abstractions */
  --color-bg: #FFF;
  --color-bg-secondary: #F9F9F9;
  --color-text: black;
  --color-text-reversed: white;
  --color-text-subtle: var(--zinc-500);
  --color-link: black;
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);
  --color-highlight: var(--yellow-200);

  /* Accent colors */
  --color-primary: oklch(55.23% 0.1498 258.67);
  --color-secondary: var(--zinc-100);
  --color-negative: var(--red-600);
  --color-negative-light: var(--red-100);
  --color-positive: var(--green-600);
  --color-positive-light: var(--green-100);
  --color-warning: var(--yellow-500);
  --color-neutral: var(--zinc-500);
  --color-pending: var(--blue-500);
  --color-pending-light: var(--blue-100);
  --color-evaluated: var(--purple-700);
  --color-evaluated-light: var(--purple-100);
  --color-disabled: #878484;

  /* SVG color values */
  --color-filter-text: invert(0);
  --color-filter-text-reversed: invert(1);
  --color-filter-negative: invert(22%) sepia(85%) saturate(1790%) hue-rotate(339deg) brightness(105%) contrast(108%);
  --color-filter-positive: invert(44%) sepia(89%) saturate(409%) hue-rotate(89deg) brightness(94%) contrast(97%);

  /* Input */
  --input-border-color: var(--zinc-300);
  --input-background: var(--color-text-reversed);
  --input-block-size: var(--size-10);
  --input-font-size: var(--size-5);

  /* Button */
  --btn-radius: 24px !important;
  --btn-block-size: var(--size-12);
  --min-button-width: 8rem;
  --btn-font-weight: 500;
  --btn-font-size: 1rem;

  /* Branding */
  --eventya-logo-url: url("/assets/stejar/logo_eventya-1fbe8760.png");
  --brand-logo-url: url("/assets/brand_logo-3c97e844.png");
  --brand-logo-minimalist-url: url("/brand_logo_minimalist.png");

  /* Sizes */
  --size-1: 0.25rem;
  /* 4px */
  --size-2: 0.5rem;
  /* 8px */
  --size-3: 0.75rem;
  /* 12px */
  --size-4: 1rem;
  /* 16px */
  --size-1-2: 50%;
  --size-1-3: 33.333333%;
  --size-2-3: 66.666667%;
  --size-1-4: 25%;
  --size-1-5: 20%;
  --size-1-6: 16.666667%;
  --size-1-12: 8.333333%;

  --container-width: 1024px;

  --default-font-family: 'Poppins', sans-serif;
}

/* Light Theme */
:root[data-theme="light"] {
  --color-bg: #FFF;
  --color-bg-container: var(--zinc-50);
  --color-text: #000;
  --color-text-reversed: #FFF;
  --color-text-subtle: var(--zinc-600);
  --color-link: black;
  --color-border-light: var(--zinc-100);
  --color-border: var(--zinc-200);
  --color-border-dark: var(--zinc-400);
  --color-selected: var(--blue-100);
  --color-selected-dark: var(--blue-300);
  --color-highlight: var(--yellow-200);

  /* Accent colors */
  --color-secondary: var(--zinc-100);
  --color-negative: var(--red-600);
  --color-positive: var(--green-600);


  /* SVG color values */
  --color-filter-text: invert(1);
  --color-filter-text-reversed: invert(0);
  --color-filter-negative: invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%) contrast(97%);
  --color-filter-positive: invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%) contrast(91%);

  --eventya-logo-url: url("/assets/stejar/logo_eventya-1fbe8760.png");
  --brand-logo-url: url("/assets/brand_logo-3c97e844.png");
  --brand-logo-minimalist-url: url("/brand_logo_minimalist.png");
}

/* Dark Theme */
:root[data-theme="dark"] {
  --color-bg: var(--zinc-950);
  --color-bg-secondary: var(--zinc-800);
  --color-bg-container: var(--stone-800);
  --color-text: white;
  --color-text-reversed: black;
  --color-text-subtle: var(--zinc-400);
  --color-link: var(--blue-400);
  --color-border-light: var(--zinc-900);
  --color-border: var(--zinc-800);
  --color-border-dark: var(--zinc-600);
  --color-selected: var(--blue-950);
  --color-selected-dark: var(--blue-800);
  --color-highlight: var(--yellow-900);

  /* Accent colors */
  --color-secondary: var(--zinc-800);
  --color-negative: var(--red-900);
  --color-positive: var(--green-900);

  /* SVG color values */
  --color-filter-text: invert(1);
  --color-filter-text-reversed: invert(0);
  --color-filter-negative: invert(15%) sepia(65%) saturate(2067%) hue-rotate(339deg) brightness(102%) contrast(97%);
  --color-filter-positive: invert(23%) sepia(62%) saturate(554%) hue-rotate(91deg) brightness(93%) contrast(91%);

  --eventya-logo-url: url("/assets/stejar/logo_eventya_white-8181ec1c.png");
  --brand-logo-url: url("/brand_logo_white.png");
  --brand-logo-minimalist-url: url("/brand_logo_minimalist_white.png");
}

/* Global styles */
* {
  border-color: var(--color-border);
  scrollbar-color: #C1C1C1 transparent;
  scrollbar-width: thin;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-synthesis-weight: none;
  overscroll-behavior: none;
  text-rendering: optimizeLegibility;
  font-family: var(--default-font-family);
}

.turbo-progress-bar {
  background-color: var(--color-primary);
}

::selection {
  background-color: var(--color-selected);
}

:root {
  h1 {
    color: var(--primary-color);
    font-size: 2rem;
    line-height: 1.5rem;
    margin-bottom: 0.5rem;
  }

  h2 {
    color: var(--secondary-color);
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
  }


  h3 {
    color: var(--secondary-color);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  p {
    color: var(--text-color);
    font-size: 1rem;
    line-height: 1.5;
  }

  .primary-link {
    color: var(--color-link) !important;

    &:hover {
      color: var(--color-text) !important;
      text-decoration: underline;
    }
  }

  ul {
    list-style: disc;
    padding-left: 1.5rem;
  }

  ul li {
    margin-bottom: 1rem;
  }
}