/* @import "https://unpkg.com/open-props"; */
/* @import "open-props.min.css"; */


@layer base, components, utilities, themes, images;

@layer base {
  body {
    font-family: "VT323", monospace;
    color: white;
    background: linear-gradient(45deg, var(--pink-6), var(--indigo-7));
  }
}

@layer components {
  header, footer {
    padding: var(--size-4);
    text-align: center;
    background: linear-gradient(45deg, var(--orange-5), var(--yellow-5));
  }
  h1 {
    font-family: "Press Start 2P", system-ui;
  }
  .sidebar ul {
    padding-left: 0;
    list-style-type: none;
  }
  .sidebar li {
    margin-bottom: var(--size-3);
    padding: var(--size-3);
    background: rgba(0, 0, 0, 0.5);
  }
  .rad-button {
    cursor: pointer;

    padding: var(--size-3) var(--size-4);

    font-size: var(--size-4);
    font-weight: var(--font-bold);
    color: var(--white);

    background-color: var(--accent-color);
    border: none;
    border-radius: var(--radius-2);
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: var(--shadow-2);

    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .rad-button:hover,
  .rad-button:focus { 
    transform: translateY(-2px);
    background-color: var(--accent-color-hover);
    outline: 2px solid var(--blue-3); 
  }

  .rad-button:active {
    transform: translateY(1px);
  }
}

@layer utilities {
  .text-large {
    font-size: var(--size-8);
  }
  .bold {
    font-weight: var(--font-bold);
  }
}

@layer themes {
  .theme-dark {
    --background-color: var(--gray-9);
    --text-color: var(--gray-3);
    --accent-color: var(--pink-6); 
    --accent-color-hover: var(--pink-5); 
    body {
      color: var(--text-color);
      background-color: var(--background-color);
    }
    a {
      color: var(--accent-color);
    }
  }
}

@layer images {
  .responsive-image {
    max-width: 100%;
    height: auto;
  }
}