/* CRECER CO. — Design Tokens v6.0 (Solar Ember / Midnight) */

:root {
  /* ── Primary Colors ── */
  --color-navy:          #090909;  /* Obsidian Veil — dominant background */
  --color-deep-space:    #090909;
  --color-forest:        #ffb703;  /* Solar Ember — primary accent */
  --color-parchment:     #ffffff;  /* Pure White */

  /* ── Palette ── */
  --color-midnight:      #000c38;  /* Midnight Blue — dark surface */
  --color-fogstone:      #6c757d;  /* Fogstone — muted gray */
  --color-amber-light:   #ffc534;  /* Lighter amber — hover */
  --color-amber-dark:    #e6a200;  /* Darker amber — 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:      #1a1a2e;
  --color-mid-gray:      #6c757d;
  --color-gray:          #6c757d;
  --color-pale-gray:     #8d9ba3;

  /* ── Light Theme Surfaces ── */
  --color-bg:            #ffffff;  /* Pure White — dominant background */
  --color-bg-alt:        #f5f6f8;  /* Near-white alternate surface */
  --color-text:          #090909;  /* Obsidian Veil — body text */
  --color-text-muted:    #6c757d;  /* Fogstone — secondary text, 4.6:1 on white ✅ */
  --color-label-light:   #000c38;  /* Midnight Blue — labels on white, 18:1 ✅ */

  /* ── Backgrounds & Borders ── */
  --color-warm-gray:     #f5f6f8;
  --color-warm-border:   rgba(0, 0, 0, 0.08);
  --color-parch-dark:    #f0f0f0;
  --color-mint-white:    #ffffff;
  --color-ghost:         #f5f6f8;
  --color-border:        rgba(0, 0, 0, 0.09);
  --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: 'DM Sans', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-label:   'DM Sans', 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;
}