/*
Theme Name:   Monetro Light
Theme URI:    https://monetro.com
Description:  Production-ready WooCommerce child theme for Monetro — UAE-based professional prop trading firm. Built on GeneratePress with full SEO, Schema.org, and conversion-optimised landing page.
Author:       Monetro
Author URI:   https://monetro.com
Template:     generatepress
Version:      1.3.0
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  monetro-light
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
WC requires at least: 8.0
WC tested up to: 9.5
*/

/* ══════════════════════════════════════════════════════════════
   DESIGN SYSTEM — CSS Custom Properties
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Colours (from official brand guidelines) ── */
  --clr-red:          #FF4E46;
  --clr-red-dark:     #E8342C;
  --clr-red-dim:      rgba(255,78,70,0.08);
  --clr-red-glow:     rgba(255,78,70,0.22);
  --clr-navy:         #1F2853;
  --clr-navy-dark:    #161D3E;
  --clr-navy-dim:     rgba(31,40,83,0.06);

  /* ── Supporting Colours ── */
  --clr-bg:           #FFFFFF;
  --clr-bg-alt:       #F8F9FC;
  --clr-surface:      #F1F4F8;
  --clr-body:         #374151;
  --clr-muted:        #6B7A99;
  --clr-subtle:       #9BA8BD;
  --clr-border:       #E2E8F2;
  --clr-success:      #10B981;
  --clr-gold:         #F59E0B;
  --clr-dark-section: #1F2853;
  --base:             #374151;
  --base-2:            #1F2853;
  --base-3:            #1F2853;

  /* ── Typography (Basis Theory style: Inter only — see design.basis.com/foundations/typography) ── */
  --font-primary:  'Inter', system-ui, sans-serif;
  --font-display:  'Inter', system-ui, sans-serif;
  --font-mono:     monospace;

  /* Basis-style type scale (px) */
  --type-size-12:  12px;
  --type-size-14:  14px;
  --type-size-16:  16px;
  --type-size-20:  20px;
  --type-size-24:  24px;
  --type-size-32:  32px;
  --type-size-60:  60px;

  /* Basis-style line heights (px) */
  --line-height-16:  16px;
  --line-height-20:  20px;
  --line-height-24:  24px;
  --line-height-32:  32px;
  --line-height-36:  36px;
  --line-height-72:  72px;

  /* Hero headline on dark section */
  --hero-headline-color: #FFFFFF;

  /* ── Layout ── */
  --container-w:    1280px;
  --container-pad:  clamp(16px, 4vw, 48px);
  --section-pad-y:  clamp(64px, 9vw, 104px);

  /* ── Radius ── */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs:      0 1px 4px rgba(31,40,83,0.06);
  --shadow-sm:      0 2px 10px rgba(31,40,83,0.08);
  --shadow-md:      0 8px 28px rgba(31,40,83,0.11);
  --shadow-lg:      0 20px 52px rgba(31,40,83,0.15);
  --shadow-red:     0 8px 28px rgba(255,78,70,0.28);
  --shadow-red-sm:  0 4px 14px rgba(255,78,70,0.20);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast:   180ms;
  --duration-base:   280ms;
  --duration-slow:   480ms;
}