@tailwind base;
@tailwind components;
@tailwind utilities;

/* Subtle & Spirited brand styling
   - Dark body background + light text everywhere
   - Sunset-gradient accents for primary CTAs and the brand wordmark
   - Custom CSS vars mirror the showcase site (~/subtle-spirited-showcase/src/index.css)
*/

@layer base {
  :root {
    --sunset-yellow: 45 95% 60%;
    --sunset-orange: 25 90% 55%;
    --sunset-pink:   330 75% 50%;
    --gradient-sunset: linear-gradient(
      135deg,
      hsl(var(--sunset-yellow)) 0%,
      hsl(var(--sunset-orange)) 50%,
      hsl(var(--sunset-pink))   100%
    );
  }

  body {
    @apply bg-brand-dark text-brand-light;
  }

  /* Devise sometimes generates legacy white-background containers;
     this catches those without us having to edit each template. */
  .min-h-screen {
    @apply bg-brand-dark;
  }
}

@layer components {
  .btn-sunset {
    @apply inline-flex items-center justify-center text-white font-semibold py-3 px-6 rounded-lg shadow-sunset transition duration-200 cursor-pointer;
    background-image: var(--gradient-sunset);
  }
  .btn-sunset:hover {
    @apply shadow-glow;
  }

  .text-sunset {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }

  .card-dark {
    @apply bg-brand-primary border border-card-border rounded-lg;
  }

  /* Form inputs on the dark surface */
  .form-input,
  .form-textarea,
  .form-select,
  input[type="text"]:not([class*="bg-"]),
  input[type="email"]:not([class*="bg-"]),
  input[type="password"]:not([class*="bg-"]),
  input[type="number"]:not([class*="bg-"]),
  textarea:not([class*="bg-"]),
  select:not([class*="bg-"]) {
    @apply bg-muted text-brand-light border-card-border rounded-md;
  }
  .form-input:focus,
  input[type="text"]:focus,
  input[type="email"]:focus,
  input[type="password"]:focus,
  input[type="number"]:focus,
  textarea:focus,
  select:focus {
    @apply ring-2 ring-brand-accent border-brand-accent outline-none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Flash Message Animations */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

[role="alert"] {
  animation: slideDown 0.3s ease-out;
}

/* Accessible focus states for flash messages */
[role="alert"]:focus-within {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}