/* Cards
 * Dark surface card component with border and optional accent variants.
 * Used across dashboard, lineup, expenses, crew, and onboarding screens.
 */

@layer components {
  .card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 14px 16px;
  }

  .card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-end: 10px;
  }

  .card__label {
    font-family: "Outfit", system-ui, sans-serif;
    font-size: 0.875rem;
    font-weight: 700;
  }

  .card__link {
    font-size: 0.75rem;
    font-weight: 600;
    color: oklch(var(--lch-flare));
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  /* Accent variants — colored left border */
  .card--flare {
    border-left: 3px solid oklch(var(--lch-flare));
    & .card__label { color: oklch(var(--lch-flare)); }
  }

  .card--golden {
    border-left: 3px solid oklch(var(--lch-golden));
    & .card__label { color: oklch(var(--lch-golden)); }
  }

  .card--laser {
    border-left: 3px solid oklch(var(--lch-laser));
    & .card__label { color: oklch(var(--lch-laser)); }
  }

  .card--uv {
    border-left: 3px solid oklch(var(--lch-uv));
    & .card__label { color: oklch(var(--lch-uv)); }
  }

  /* Hero card — gradient background, dark text */
  .card--hero {
    background: linear-gradient(135deg, oklch(var(--lch-flare) / 0.9), oklch(var(--lch-golden) / 0.7));
    border: none;
    border-radius: 10px;
    padding: 22px;
    color: oklch(17% 0.02 276);
    position: relative;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      top: -30px;
      right: -30px;
      width: 120px;
      height: 120px;
      background: oklch(96% 0.007 295 / 0.08);
      border-radius: 50%;
    }
  }

  /* Dashed suggestion card */
  .card--dashed {
    background: transparent;
    border: 1px dashed var(--color-border);
    padding: 12px 16px;
    display: flex;
    gap: 12px;
  }

  /* Card stack — vertical list of cards */
  .card-stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}