/* ==========================================================================
   Crown Sport Nutrition — Design Tokens
   Source: Biblia-Crown-Sport-Nutrition-2026.docx + web-crown-2026 prototype
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ------------------------------------------------------------------ */
  /* CORE BRAND COLORS                                                  */
  /* ------------------------------------------------------------------ */

  /* Gold — the crown. Used for primary CTAs, headings accent, nav active,
     trust-stat numbers, pull-quotes. In print/packaging this is a metallic
     gradient; on web it's flat #C9A84C or a linear-gradient from mid to light. */
  --crown-gold:        #C9A84C;  /* Primary */
  --crown-gold-light:  #E8D48B;  /* Hover / gradient stop */
  --crown-gold-dark:   #8B7332;  /* Gold on light bg (badge text) */

  /* Blacks — the armor. Main surfaces: header (95% alpha), dark sections,
     footer. Charcoal is one step up used for card backgrounds on black bg. */
  --crown-black:       #1A1A1A;
  --crown-charcoal:    #2D2D2D;

  /* Red — the jewel. Used sparingly: danger states, the hexagon cube inside
     the logo, occasional accents on packaging. Never for body copy. */
  --crown-red:         #B22234;
  --crown-red-dark:    #7A1824;

  /* Navy — the Crown slate-blue used on crownsportnutrition.com for
     secondary surfaces (editorial backgrounds, info panels, section
     dividers). Sits under the black+gold pair as a quieter dark tone. */
  --crown-navy:        #4A5568;
  --crown-navy-dark:   #2D3748;
  --crown-navy-light:  #718096;

  /* Neutrals */
  --crown-off-white:   #F7F5F0;  /* Cream — alternating light sections */
  --crown-white:       #FFFFFF;
  --crown-gray-100:    #F3F4F6;
  --crown-gray-200:    #E5E7EB;
  --crown-gray-300:    #D1D5DB;
  --crown-gray-400:    #9CA3AF;
  --crown-gray-600:    #6B7280;
  --crown-gray-700:    #4B5563;

  /* ------------------------------------------------------------------ */
  /* PHASE COLORS — the 5-phase nutrition system.                       */
  /* Each phase has its own color used in badges, landing pages, tags.  */
  /* ------------------------------------------------------------------ */
  --phase-antes:       #F97316;  /* ANTES — orange (ignite, warm-up) */
  --phase-durante:     #2A2D34;  /* DURANTE Clásica — anthracite (foundational, timeless) */
  --phase-hyper:       #C9A961;  /* HYPER — matte gold (premium, top tier) */
  --phase-despues:     #1F8B5A;  /* DESPUÉS — deep green (recovery, regeneration) */
  --phase-salud:       #1E5FA8;  /* SALUD DIARIA — medium-deep blue (science, hydration) */

  /* ------------------------------------------------------------------ */
  /* SEMANTIC ROLES                                                     */
  /* ------------------------------------------------------------------ */
  --fg-1:              var(--crown-black);       /* primary text */
  --fg-2:              var(--crown-gray-600);    /* secondary text */
  --fg-3:              var(--crown-gray-400);    /* muted / meta */
  --fg-accent:         var(--crown-gold);        /* overline, accent */
  --fg-on-dark:        var(--crown-white);
  --fg-on-dark-2:      var(--crown-gray-300);

  --bg-1:              var(--crown-white);       /* canvas */
  --bg-2:              var(--crown-off-white);   /* alternating section */
  --bg-dark:           var(--crown-black);       /* dark section */
  --bg-dark-2:         var(--crown-charcoal);    /* card on dark */

  --border-1:          var(--crown-gray-200);
  --border-strong:     var(--crown-gray-300);
  --border-gold:       rgba(201, 168, 76, 0.3);

  --success:           #16A34A;
  --warning:           #EA580C;
  --danger:            var(--crown-red);

  /* ------------------------------------------------------------------ */
  /* GRADIENTS                                                          */
  /* ------------------------------------------------------------------ */
  --grad-gold:         linear-gradient(135deg, #C9A84C, #E8D48B);
  --grad-gold-rev:     linear-gradient(135deg, #E8D48B, #C9A84C);
  --grad-dark:         linear-gradient(135deg, #2D2D2D, #1A1A1A);
  --grad-hero-scrim:   linear-gradient(180deg, rgba(26,26,26,0.4) 0%, rgba(26,26,26,0.85) 100%);

  /* ------------------------------------------------------------------ */
  /* TYPOGRAPHY                                                         */
  /* Montserrat — all display, nav, buttons, badges, numbers, overlines */
  /* Inter    — body copy and UI chrome                                 */
  /* ------------------------------------------------------------------ */
  --font-display: 'Montserrat', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Type scale — fluid, uses clamp() where fluid is needed */
  --fs-overline:  0.75rem;      /* 12 — MONTSERRAT, uppercase, 0.1em tracking */
  --fs-meta:      0.8rem;       /* 13 */
  --fs-sm:        0.875rem;     /* 14 — buttons, footer */
  --fs-body:      1rem;         /* 16 */
  --fs-lg:        1.125rem;     /* 18 — hero subtitle */
  --fs-h4:        clamp(1rem, 1.5vw, 1.25rem);
  --fs-h3:        clamp(1.25rem, 2vw, 1.75rem);
  --fs-h2:        clamp(1.75rem, 3.5vw, 3rem);
  --fs-h1:        clamp(2rem, 5vw, 4rem);
  --fs-hero:      clamp(2.5rem, 6vw, 4.5rem);
  --fs-stat:      2.5rem;       /* stat numbers */

  --lh-display:   1.15;
  --lh-body:      1.6;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.08em;
  --tracking-widest:  0.1em;
  --tracking-caps:    0.2em;    /* small tracked caps like "SPORT NUTRITION" */

  /* ------------------------------------------------------------------ */
  /* SPACING SCALE — 8px base                                           */
  /* ------------------------------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  80px;
  --space-10: 120px;

  /* Vertical rhythm for sections */
  --section-py:    80px;
  --section-py-sm: 48px;

  /* ------------------------------------------------------------------ */
  /* RADII                                                              */
  /* Crown uses small, squared corners. Never pill except on badges.    */
  /* ------------------------------------------------------------------ */
  --radius-xs:    2px;
  --radius-sm:    4px;    /* default — buttons, cards inner, form fields */
  --radius-md:    8px;    /* cards */
  --radius-lg:    12px;
  --radius-pill:  999px;  /* badges only */

  /* ------------------------------------------------------------------ */
  /* SHADOWS — subtle, realistic. No colored shadows except gold glow.  */
  /* ------------------------------------------------------------------ */
  --shadow-1:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2:  0 4px 20px rgba(0, 0, 0, 0.06);   /* default card */
  --shadow-3:  0 8px 30px rgba(0, 0, 0, 0.12);   /* card hover */
  --shadow-4:  0 12px 40px rgba(0, 0, 0, 0.12);  /* product card hover */
  --shadow-gold:       0 4px 15px rgba(201, 168, 76, 0.3);
  --shadow-gold-hover: 0 6px 20px rgba(201, 168, 76, 0.5);

  /* ------------------------------------------------------------------ */
  /* MOTION                                                             */
  /* Crown never bounces. All motion is short, confident, linear-ish.   */
  /* ------------------------------------------------------------------ */
  --dur-fast:   0.15s;
  --dur-base:   0.3s;
  --dur-slow:   0.6s;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Layout */
  --container:       1200px;
  --container-wide:  1400px;
  --header-h:        72px;
  --header-h-mobile: 60px;

  /* ------------------------------------------------------------------ */
  /* SHORT ALIASES — for use in component files                         */
  /* ------------------------------------------------------------------ */
  --navy:        var(--crown-navy);
  --navy-dark:   var(--crown-navy-dark);
  --navy-light:  var(--crown-navy-light);
  --gold:        var(--crown-gold);
  --gold-light:  var(--crown-gold-light);
  --gold-dark:   var(--crown-gold-dark);
  --black:       var(--crown-black);
  --charcoal:    var(--crown-charcoal);
  --red:         var(--crown-red);
  --cream:       var(--crown-off-white);
  --gray-100:    var(--crown-gray-100);
  --gray-200:    var(--crown-gray-200);
  --gray-300:    var(--crown-gray-300);
  --gray-600:    var(--crown-gray-600);
  --border-2:    var(--crown-gray-300);
}

/* ==========================================================================
   SEMANTIC DEFAULTS — apply tokens to raw elements
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--fg-1);
  background: var(--bg-1);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  line-height: var(--lh-display);
  color: var(--fg-1);
}

h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); font-weight: 700; }
h3 { font-size: var(--fs-h3); font-weight: 600; }
h4 { font-size: var(--fs-h4); font-weight: 600; }

p { color: var(--fg-1); }

a { color: inherit; text-decoration: none; transition: color var(--dur-base) var(--ease-out); }
a:hover { color: var(--crown-gold); }

img { max-width: 100%; display: block; }

::selection { background: var(--crown-gold); color: var(--crown-black); }

/* Overline — recurring small-caps accent above headings */
.overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--crown-gold);
}

/* Tagline — footer signature */
.tagline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--crown-gold);
  letter-spacing: var(--tracking-wide);
}