/* =============================================================
   UGCPro.social — Global Design Tokens
   Import this FIRST in every CSS file via @import
   or include the <link> tags in every HTML head.

   Fonts loaded via Google Fonts in includes/partials/global_head.php
   Font Awesome 6 Free loaded via CDN

   Brand palette:
     --brand-orange:  #ce420c  (primary CTA, energy)
     --brand-purple:  #7942b9  (secondary, creative)
     --brand-blue:    #3064c5  (trust, links)
     --brand-sky:     #2ea9d5  (accent, fresh)
     --brand-amber:   #e3a328  (highlight, warm)
     --brand-navy:    #142c55  (deep text, authority)
   ============================================================= */

:root {
  /* === Brand colours === */
  --brand-orange:   #ce420c;
  --brand-purple:   #7942b9;
  --brand-blue:     #3064c5;
  --brand-sky:      #2ea9d5;
  --brand-amber:    #e3a328;
  --brand-navy:     #142c55;

  /* Tints (10% opacity) */
  --brand-orange-tint: #ce420c1A;
  --brand-purple-tint: #7942b91A;
  --brand-blue-tint:   #3064c51A;
  --brand-sky-tint:    #2ea9d51A;
  --brand-amber-tint:  #e3a3281A;
  --brand-navy-tint:   #142c551A;

  /* Light tints (solid, for backgrounds) */
  --brand-orange-light: #FDF0EB;
  --brand-purple-light: #F2EBFB;
  --brand-blue-light:   #EBF0FB;
  --brand-sky-light:    #EAF6FB;
  --brand-amber-light:  #FDF6E8;
  --brand-navy-light:   #E8EBF0;

  /* === Primary UI colours (mapped from brand) === */
  --primary:        var(--brand-orange);
  --primary-dark:   #b33509;
  --primary-light:  var(--brand-orange-light);
  --secondary:      var(--brand-purple);
  --accent-ui:      var(--brand-sky);
  --link-color:     var(--brand-blue);
  --nav-dark:       var(--brand-navy);

  /* === Neutrals === */
  --white:          #ffffff;
  --gray-50:        #F8F8FC;
  --gray-100:       #F0F0F8;
  --gray-200:       #E4E4EF;
  --gray-300:       #CACAD8;
  --gray-400:       #9898B0;
  --gray-500:       #6B6B80;
  --gray-700:       #2E2E40;
  --gray-900:       #111118;

  /* === Typography === */
  --font-body:      'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display:   'Dancing Script', cursive;
  --font-mono:      'Courier New', Courier, monospace;

  /* === Sizing === */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      14px;
  --radius-xl:      20px;
  --radius-full:    9999px;

  /* === Shadows === */
  --shadow-sm:      0 1px 3px rgba(20,44,85,.07), 0 2px 8px rgba(20,44,85,.05);
  --shadow-md:      0 4px 16px rgba(20,44,85,.1);
  --shadow-lg:      0 8px 32px rgba(20,44,85,.14);
}