/*
 * Auth Component Styles - Pop Art Edition
 * Login, signup, magic link flows with bold styling
 */

@layer components {
  .auth-container {
    min-block-size: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
  }

  .auth-card {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-lg);
    padding: var(--space-8);
    inline-size: 100%;
    max-inline-size: var(--max-width-sm);
    position: relative;

    /* Optional "POW!" badge */
    &::before {
      content: "";
      position: absolute;
      top: -12px;
      right: -12px;
      width: 48px;
      height: 48px;
      background: var(--color-pow-red);
      border: var(--border-medium) solid var(--color-comic-border);
      transform: rotate(12deg);
      z-index: 1;
    }
  }

  /* Variant without the badge */
  .auth-card-simple {
    background: var(--color-surface);
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-lg);
    padding: var(--space-8);
    inline-size: 100%;
    max-inline-size: var(--max-width-sm);
  }

  .auth-header {
    text-align: center;
    margin-block-end: var(--space-6);

    & h1 {
      font-size: var(--text-2xl);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      letter-spacing: 0.025em;
      margin-block-end: var(--space-2);
      text-shadow: 3px 3px 0 var(--color-zap-yellow);
    }

    & p {
      color: var(--color-ink-muted);
    }
  }

  .auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .auth-footer {
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-6);
    border-block-start: var(--border-medium) solid var(--color-comic-border);
    text-align: center;

    & p {
      color: var(--color-ink-muted);
      font-size: var(--text-sm);
      margin-block: var(--space-2);
    }

    & a {
      color: var(--color-wham-blue);
      font-weight: var(--font-bold);
      text-decoration: none;
      transition: color 0.15s ease;

      &:hover {
        color: var(--color-kapow-pink);
      }
    }
  }

  /* ==========================================================================
     Magic Link Specific Styles
     ========================================================================== */

  .magic-link-sent {
    text-align: center;
    padding: var(--space-4);

    & .magic-link-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 64px;
      height: 64px;
      margin-block-end: var(--space-4);
      background: var(--color-boom-green);
      border: var(--border-thick) solid var(--color-comic-border);
      box-shadow: var(--comic-shadow-sm);
      color: white;
    }

    & h2 {
      font-size: var(--text-xl);
      font-weight: var(--font-bold);
      text-transform: uppercase;
      margin-block-end: var(--space-2);
    }

    & p {
      color: var(--color-ink-muted);
      margin-block-end: var(--space-4);
    }

    & .email-highlight {
      font-weight: var(--font-bold);
      color: var(--color-ink);
    }
  }

  /* ==========================================================================
     Auth Error State
     ========================================================================== */

  .auth-error {
    background: light-dark(oklch(0.95 0.06 25), oklch(0.25 0.06 25));
    border: var(--border-medium) solid var(--color-comic-border);
    padding: var(--space-3);
    margin-block-end: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-pow-red);
  }

  /* ==========================================================================
     Auth Success State
     ========================================================================== */

  .auth-success {
    background: light-dark(oklch(0.96 0.05 145), oklch(0.28 0.05 145));
    border: var(--border-medium) solid var(--color-comic-border);
    padding: var(--space-3);
    margin-block-end: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-boom-green);
  }

  /* ==========================================================================
     Form Section Title (within auth card)
     ========================================================================== */

  .form-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: normal;
    letter-spacing: 0.025em;
    margin-block-end: var(--space-3);
    color: var(--color-ink);
  }

  /* ==========================================================================
     Auth Divider (for "or" separators)
     ========================================================================== */

  .auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-4);

    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 2px;
      background: var(--color-ink);
    }

    & span {
      font-weight: var(--font-bold);
      font-size: var(--text-sm);
      text-transform: uppercase;
      color: var(--color-ink-muted);
    }
  }

  /* ==========================================================================
     Social Auth Buttons
     ========================================================================== */

  .auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    border: var(--border-thick) solid var(--color-comic-border);
    box-shadow: var(--comic-shadow-sm);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;

    &:hover {
      transform: translate(2px, 2px);
      box-shadow: 2px 2px 0 var(--comic-shadow-color);
    }

    &:active {
      transform: translate(4px, 4px);
      box-shadow: none;
    }
  }

  .auth-social-btn-google {
    background: white;
    color: var(--color-ink);
  }

  .auth-social-btn-github {
    background: #24292e;
    color: white;
  }

  /* ==========================================================================
     Remember Me / Stay Signed In
     ========================================================================== */

  .auth-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);

    & a {
      font-size: var(--text-sm);
      font-weight: var(--font-bold);
      color: var(--color-wham-blue);
      text-decoration: none;

      &:hover {
        color: var(--color-kapow-pink);
      }
    }
  }
}