/* ==========================================================================
   TOPMIX Data Entry Form — semantic design tokens
   Layered on top of the TOPMIX Design System tokens (tokens/colors.css etc).
   Reference these as var(--form-*) from inline styles.
   ========================================================================== */
:root {
  /* --- Page & surfaces --- */
  --form-page-bg:            var(--surface-sand);
  --form-card-bg:            var(--surface-card);

  /* --- Field borders --- */
  --form-field-border:            var(--border-default); /* default / unfocused */
  --form-field-border-focus:      var(--green-700);       /* focused field outline */

  /* --- Text colours --- */
  --form-heading-color:      var(--primary-700, #464C40);
  --form-body-text:          var(--text-muted);            /* descriptions, helper text */
  --form-input-text:         var(--text-strong);           /* value typed into a field */
  --form-label-color:        var(--text-muted);            /* field caption labels */

  /* --- Mandatory-field indicator (the "*") --- */
  --form-mandatory-empty:    var(--danger);                /* field required & empty */
  --form-mandatory-filled:   var(--text-muted);             /* field required & filled */

  /* --- Validation / error messages --- */
  --form-error-text:         var(--danger);                /* "Invalid email", etc. */
  --form-remove-icon:        var(--danger);                /* file row ✕ */

  /* --- Lucky-draw token toast --- */
  --form-toast-text:         #2f5fa8;

  /* --- Links --- */
  --form-link-color:         var(--green-700);
  --form-link-hover:         var(--green-800, #245c37);

  /* --- Submit button --- */
  --form-button-enabled-bg:      var(--green-grass);
  --form-button-enabled-text:    var(--white);
  --form-button-disabled-bg:     var(--tertiary-200);
  --form-button-disabled-text:   var(--text-strong);
  --form-button-disabled-opacity: 0.45;

  /* --- Hero banner overlay & surfaces --- */
  --hero-overlay-dark:  rgba(24, 28, 22, 0.95);
  --hero-overlay-mid:   rgba(24, 28, 22, 0.78);
  --hero-overlay-light: rgba(24, 28, 22, 0.20);
  --hero-card-surface:  rgba(36, 42, 33, 0.82);

  /* --- Nestle All Deals Carousel showcase tokens --- */
  --carousel-bg:             #ff5252;
  --carousel-card-bg:        var(--white);
  --carousel-btn-bg:         #2b70c9;
  --carousel-btn-hover:      #1f5cae;
  --carousel-nav-bg:         var(--white);
  --carousel-nav-arrow:      #2b70c9;
  --carousel-dot-active:     #1A1A1B;
  --carousel-dot-inactive:   rgba(255, 255, 255, 0.85);
  --carousel-banner-step-1:  linear-gradient(135deg, #a81c1c 0%, #d32f2f 100%);
  --carousel-banner-step-2:  linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
  --carousel-banner-step-3:  linear-gradient(135deg, #0d47a1 0%, #1976d2 100%);
  --carousel-banner-step-4:  linear-gradient(135deg, #4a148c 0%, #7b1fa2 100%);
}