/* ==========================================================================
   Impactful Speaking — V8 Stylesheet
   Pure BEM · Zero inline styles · Zero !important
   Design tokens inherited from V7
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */

:root {
  /* Colours */
  --cyan:           #14E0FB;
  --cyan--op:       rgba(20, 224, 251, 0.6);
  --teal:           #0FA3B1;
  --teal--op:       rgba(15, 163, 177, 0.6);
  --teal-deep:      #084B54;
  --purple:         #BB4BFF;
  --purple--op:     rgba(187, 75, 255, 0.6);
  --dpurple:        #7B2FBE;
  --dpurple--op:        rgba(123, 47, 190, 0.6);
  --yellow:         #F4EA00;
  --yellow--op:     rgba(244, 234, 0, 0.6);
  --green:          #40C360;
  --green--op:      rgba(64, 195, 96, 0.6);
  --dark-red:       #c0392b;
  --red:            #f52c17;
  --orange:         #e67e22;
  --orange--op:      rgba(230, 126, 34, 0.6);
  --blue:           #16a9f6;
  --blue--op:       rgba(22, 169, 246, 0.6);
  --dark-blue:      #228fc8;
  --indigo:         #1E0A3C;
  --dark:           #080C10;
  --dark--op:       rgba(8, 12, 16, 0.7);
  --dark-deep:      #040709;
  --dark2:          #0D1F35;
  --dpurp-bg:       #150826;
  --white:          #FFFFFF;
  --light:          #F4F7FA;
  --text:           #F0F4F8;
  --text-light:     #F0F4F8;
  --text-dim:       rgba(240, 244, 248, 0.6);
  --text-dark:      #1A2332;
  --text-dim-dark:  #5A6B7A;
  --border:         rgba(255, 255, 255, 0.08);
  --border-light:   rgba(0, 0, 0, 0.08);
  --border-gray:    gray;

  /* On-light accent variants */
  --cyan-on-light:    #0A7285;
  --purple-on-light:  #6E28A8;
  --green-on-light:   #1C7230;
  --red-on-light:     #dc2b18;
  --yellow-on-light:  #7A6E00;

  /* backgrounds*/
  --cyan--bg:       rgba(20, 224, 251, 0.3);
  --teal--bg:       rgba(15, 163, 177, 0.3);
  --purple--bg:     rgba(187, 75, 255, 0.3);
  --dpurple--bg:    rgba(123, 47, 190, 0.3);
  --yellow--bg:     rgba(244, 234, 0, 0.3);
  --green--bg:      rgba(64, 195, 96, 0.3);
  --dark--bg:       rgba(8, 12, 16, 0.3);
  --orange--bg:      rgba(230, 126, 34, 0.3)
  --blue--bg:       rgba(22, 169, 246, 0.3);
  
  /* Gradients */
  --grad-title:   linear-gradient(135deg, var(--cyan) 0%, var(--purple) 100%);
  --grad-cyan:    linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
  --grad-purple:  linear-gradient(135deg, var(--purple) 0%, var(--dpurple) 150%);
  --grad-btn:     var(--grad-cyan);
  --grad-btn2:    var(--grad-purple);

  /* Card image gradient tints */
  --grad-card-cyan:    linear-gradient(135deg, #14E0FB, #084B54);
  --grad-card-teal:    linear-gradient(135deg, #0FA3B1, #080C10);
  --grad-card-purple:  linear-gradient(135deg, #BB4BFF, #1a0530);
  --grad-card-dpurple: linear-gradient(135deg, #7B2FBE, #1a0530);
  --grad-card-green:   linear-gradient(135deg, #40C360, #0c3a1c);
  --grad-card-yellow:  linear-gradient(135deg, #F4EA00, #4a4500);
  --grad-card-blue:    linear-gradient(135deg, var(--dark-blue), var(--indigo));
  --grad-card-gray:    linear-gradient(135deg, darkgrey, grey);

  /* Typography */
  --ff-heading: 'Spectral', Georgia, serif;
  --ff-body:    'Quicksand', 'Trebuchet MS', sans-serif;
  --ff-quote:    'Quicksand', 'Trebuchet MS', sans-serif;
  --ff-ui:      'Noto Sans', system-ui, sans-serif;

  /* Spacing */
  --container-max:    1200px;
  --container-narrow: 760px;
  --section-pad:      clamp(4rem, 8vw, 7rem);
  --radius:           1rem;
  --radius-sm:        0.5rem;
  --radius-lg:        1.25rem;
  --radius-cta:       2rem;

  /* Breakpoints (reference — use in @media) */
  /* --screen-mobile-s:  360px  */
  /* --screen-mobile-m:  640px  */
  /* --screen-tablet-s:  768px  */
  /* --screen-tablet-m:  1024px */
  /* --screen-desktop-s: 1200px */
  /* --screen-desktop-m: 1440px */
}