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

/* Claire's Original Wares brand styling — light/cream theme
   - Cream body background, deep cocoa-brown primary text
   - Sunset-gradient accents (sun yellow → cow orange → bandana red) for
     primary CTAs and the wordmark
   - HSL values mirror config/tailwind.config.js exactly
   - Phase 5.1 NOTE: `brand.dark` is the TEXT color, `brand.primary` is
     the body BG. The names are inverted from their pre-COW semantics.
*/

@layer base {
  :root {
    --sunset-yellow: 44 90% 60%;
    --sunset-orange: 28 70% 50%;
    --sunset-pink:   6 55% 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-primary text-brand-dark;
  }

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

@layer components {
  /* Primary CTA — a dark-green gradient button with cream text.
     The class name `.btn-sunset` is legacy (S&S used an orange
     gradient here; Phase 5.1 used solid dark cocoa) — kept to avoid
     churning every template that references it. The sunset gradient
     still lives in `.text-sunset` for intentional brand moments. */
  .btn-sunset {
    @apply inline-flex items-center justify-center text-brand-light font-semibold py-3 px-6 rounded-lg shadow-sm transition duration-200 cursor-pointer;
    background-image: linear-gradient(135deg, hsl(150, 45%, 28%) 0%, hsl(155, 55%, 16%) 100%);
  }
  .btn-sunset:hover {
    background-image: linear-gradient(135deg, hsl(150, 45%, 33%) 0%, hsl(155, 55%, 20%) 100%);
    @apply shadow-md;
  }

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

  /* Card surface — slightly brighter cream than the body, distinguished
     by a warm-tan border. Legacy name (`.card-dark`) is preserved to
     avoid churning every template that references it. */
  .card-dark {
    @apply bg-brand-light border border-card-border rounded-lg shadow-sm;
  }

  /* Form inputs on the cream 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-brand-light text-brand-dark 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;
}