/* ==========================================================================
   Big Peixes — Semantic Design Tokens
   Maps semantic names used in HTML to the color scales in variables.css.
   Import this AFTER variables.css or use standalone.
   ========================================================================== */

@import url('variables.css');

:root {
  /* ── Semantic Color Aliases ─────────────────────────────────────────────── */

  /* Primary (Azul Lagoa) */
  --color-primary:          var(--color-primary-500, #2B7A91);
  --color-primary-dark:     var(--color-primary-700, #1D5A6B);
  --color-primary-light:    var(--color-primary-200, #A8D5E2);
  --color-primary-lightest: var(--color-primary-50, #E8F4F8);

  /* Secondary (Laranja Por-do-Sol) */
  --color-secondary:        var(--color-accent-400, #E8722A);
  --color-secondary-dark:   var(--color-accent-600, #C45A1E);
  --color-secondary-light:  var(--color-accent-200, #F2A675);

  /* Accent Warm (Amarelo Milho) */
  --color-accent-warm:       var(--color-yellow-300, #F2C94C);
  --color-accent-warm-dark:  var(--color-yellow-500, #D4A928);
  --color-accent-warm-light: var(--color-yellow-100, #FFF3CD);

  /* Accent Coral (Coral Tilapia) */
  --color-accent-coral:          var(--color-coral-300, #E88873);
  --color-accent-coral-dark:     var(--color-coral-500, #D06A55);
  --color-accent-coral-light:    var(--color-coral-200, #F4A99B);
  --color-accent-coral-lightest: var(--color-coral-100, #FBD9D2);

  /* Nature (Verde Taboa) */
  --color-nature:          var(--color-secondary-500, #5A8C4E);
  --color-nature-dark:     var(--color-secondary-700, #3D6B33);
  --color-nature-light:    var(--color-secondary-300, #8FBF7E);
  --color-nature-lightest: var(--color-secondary-100, #D4E8CD);

  /* Backgrounds */
  --color-bg-primary:   var(--color-neutral-50, #FDF6EC);
  --color-bg-secondary: var(--color-neutral-100, #F5E6D0);
  --color-bg-elevated:  var(--color-neutral-0, #FEFCF8);
  --color-bg-dark:      var(--color-primary-800, #164452);
  --color-bg-darker:    var(--color-primary-900, #0F2F39);

  /* Text */
  --color-text-primary:   var(--color-neutral-700, #5C3D2E);
  --color-text-secondary: var(--color-neutral-500, #8B6F5E);
  --color-text-muted:     var(--color-neutral-400, #A0896E);
  --color-text-on-dark:   var(--color-neutral-0, #FEFCF8);
  --color-text-on-primary:var(--color-neutral-0, #FEFCF8);

  /* Borders */
  --color-border:        rgba(160, 137, 110, 0.2);
  --color-border-strong: rgba(160, 137, 110, 0.4);
  --color-divider:       rgba(160, 137, 110, 0.15);

  /* States */
  --color-success:       #4CAF50;
  --color-error:         #D32F2F;
  --color-info:          #2196F3;
  --color-warning:       var(--color-yellow-300, #F2C94C);

  /* Special */
  --color-whatsapp:      #25D366;
  --color-whatsapp-dark: #1DA851;
  --color-overlay-light: rgba(253, 246, 236, 0.92);
  --color-overlay-dark:  rgba(29, 90, 107, 0.85);

  /* ── Typography Aliases ─────────────────────────────────────────────────── */
  --font-display: 'Baloo 2', 'Segoe UI', cursive;
  --font-body:    'Nunito', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-accent:  'Caveat', 'Segoe Script', cursive;

  --text-hero:     clamp(2.5rem, 5vw + 1rem, 4.5rem);
  --text-h1:       clamp(2rem, 4vw + 0.5rem, 3.25rem);
  --text-h2:       clamp(1.5rem, 3vw + 0.25rem, 2.5rem);
  --text-h3:       clamp(1.25rem, 2vw + 0.25rem, 1.875rem);
  --text-h4:       clamp(1.1rem, 1.5vw + 0.25rem, 1.5rem);
  --text-body-lg:  1.125rem;
  --text-body:     1rem;
  --text-body-sm:  0.875rem;
  --text-caption:  0.75rem;

  --text-accent-lg: 1.75rem;
  --text-accent:    1.5rem;
  --text-accent-sm: 1.25rem;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.625;

  /* ── Spacing ────────────────────────────────────────────────────────────── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --space-section-y: clamp(3rem, 8vw, 6rem);
  --space-section-x: clamp(1rem, 5vw, 3rem);
  --space-container:  clamp(1rem, 4vw, 2rem);
  --space-card-padding: clamp(1.25rem, 3vw, 2rem);

  /* ── Layout ─────────────────────────────────────────────────────────────── */
  --max-width-content: 1200px;
  --max-width-text:    720px;
  --max-width-narrow:  540px;
  --max-width-wide:    1400px;

  /* ── Border Radius ──────────────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── Shadows ────────────────────────────────────────────────────────────── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.1);
  --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.1);

  /* ── Transitions ────────────────────────────────────────────────────────── */
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
}