/* CRECER CO. — Design Tokens v7.0 (Brand Board 2026) */

:root {
  /* ── Primary Colors (Brand Board) ── */
  --color-navy:          #000c38;  /* Azul Noche — primary dark */
  --color-deep-space:    #000c38;
  --color-forest:        #ffb703;  /* Amarillo Crecer — primary accent */
  --color-parchment:     #f6f4ef;  /* Crema — dominant background */

  /* ── Palette ── */
  --color-midnight:      #000c38;  /* Azul Noche */
  --color-fogstone:      #6b6455;  /* Gris Cálido — secondary text */
  --color-amber-light:   #ffc534;  /* Lighter amber — hover */
  --color-amber-dark:    #e6a200;  /* Ocre Raíz — pressed */

  /* ── Backward-compat aliases ── */
  --color-forest-light:  #ffc534;
  --color-forest-dark:   #e6a200;
  --color-steel-blue:    #000c38;
  --color-abyss:         #000c38;
  --color-emerald:       #ffb703;
  --color-emerald-dark:  #e6a200;
  --color-emerald-light: #ffc534;
  --color-gold:          #ffb703;
  --color-gold-dark:     #e6a200;
  --color-gold-light:    #ffd44d;
  --color-electric:      #ffb703;

  /* ── Text Neutrals ── */
  --color-charcoal:      #000c38;
  --color-mid-gray:      #6b6455;
  --color-gray:          #6b6455;
  --color-pale-gray:     #9a8f80;

  /* ── Light Theme Surfaces ── */
  --color-bg:            #f6f4ef;  /* Crema — dominant background (60%) */
  --color-bg-alt:        #edeae3;  /* Crema oscuro — alternate surface */
  --color-text:          #000c38;  /* Azul Noche — body text */
  --color-text-muted:    #6b6455;  /* Gris Cálido — secondary text */
  --color-label-light:   #000c38;  /* Azul Noche — labels on crema ✅ */

  /* ── Backgrounds & Borders ── */
  --color-warm-gray:     #edeae3;
  --color-warm-border:   rgba(0, 12, 56, 0.10);
  --color-parch-dark:    #e0ddd6;
  --color-mint-white:    #f6f4ef;
  --color-ghost:         #edeae3;
  --color-border:        rgba(0, 12, 56, 0.10);
  --color-white:         #FFFFFF;
  --color-danger:        #CC3333;

  /* ── Gradients ── */
  --grad-growth:     linear-gradient(135deg, #ffb703 0%, #e6a200 100%);
  --grad-gold:       linear-gradient(135deg, #ffd44d 0%, #ffb703 100%);
  --grad-dark:       linear-gradient(135deg, #090909 0%, #000c38 100%);
  --grad-night:      linear-gradient(135deg, #090909 0%, #000c38 100%);
  --grad-midnight:   linear-gradient(135deg, #000c38 0%, #090909 100%);

  /* ── Typography ── */
  --font-display: 'Satoshi', system-ui, sans-serif;
  --font-body:    'Satoshi', system-ui, sans-serif;
  --font-label:   'Montserrat', sans-serif;

  /* ── Type Scale ── */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3rem;
  --text-hero: clamp(2.5rem, 5.5vw, 4.5rem);

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

  /* ── Layout ── */
  --container-max:   1200px;
  --container-wide:  1440px;
  --gutter:          clamp(1rem, 4vw, 2rem);
  --section-py:      clamp(3rem, 8vw, 6rem);

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ── Shadows ── */
  --shadow-card:  0 2px 16px rgba(0, 0, 0, 0.08);
  --shadow-hover: 0 8px 28px rgba(255, 183, 3, 0.20);
  --shadow-glow:  0 0 28px rgba(255, 183, 3, 0.40);
  --shadow-nav:   0 2px 20px rgba(0, 0, 0, 0.10);

  /* ── Transitions ── */
  --ease:           cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  220ms;
  --duration-slow:  400ms;
}