/* stc brand tokens — values taken from stc brand-booklet_digital_EN.pdf.
 * Everything in the UI pulls from these variables so edits here re-theme the app.
 */
:root {
  /* Core (pages 10-11 of the brand book) */
  --stc-purple:      #1A6CB0;   /* baby-blue theme — primary (white-text safe) */
  --stc-coral:       #FF375E;   /* Pantone 178C — primary accent */
  --stc-air:         #FFFFFF;
  --stc-onyx:        #1D1D2D;   /* Pantone 433C — deep neutral */

  /* Secondary palette (stc "lights") */
  --stc-sun:         #FFDD40;   /* Pantone 114C */
  --stc-sunset:      #FF6A39;   /* Pantone 1645C */
  --stc-oasis:       #00C48C;   /* Pantone 2416C (green) */
  --stc-sea:         #1BCED8;   /* Pantone 311C  (cyan) */
  --stc-moon:        #A54EE2;   /* Pantone 2587C (lilac) */
  --stc-silver:      #8E9AA0;   /* Pantone 430C */

  /* Baby-blue tints / shades (kept the --stc-purple-* names so the rest of
   * the app re-themes without edits; values are now a sky/baby-blue ramp) */
  --stc-purple-900:  #0A3258;
  --stc-purple-800:  #0F4577;
  --stc-purple-700:  #145894;
  --stc-purple-600:  #1A6CB0;
  --stc-purple-500:  #2F94DA;
  --stc-purple-400:  #5BB0E8;
  --stc-purple-300:  #93CDF3;
  --stc-purple-200:  #C3E3FA;
  --stc-purple-100:  #E2F1FD;
  --stc-purple-50:   #F2F9FF;

  /* Neutrals (onyx-family) */
  --stc-ink-900:     #1D1D2D;
  --stc-ink-700:     #2F2F44;
  --stc-ink-500:     #5B5B70;
  --stc-ink-300:     #A7A7B8;
  --stc-ink-100:     #E4E4EB;
  --stc-ink-50:      #F5F5F8;
  --stc-white:       #FFFFFF;

  /* Semantic */
  --color-bg:           var(--stc-ink-50);
  --color-surface:      var(--stc-white);
  --color-surface-alt:  var(--stc-purple-50);
  --color-text:         var(--stc-onyx);
  --color-text-muted:   var(--stc-ink-500);
  --color-border:       var(--stc-ink-100);
  --color-primary:      var(--stc-purple);
  --color-primary-hover:var(--stc-purple-800);
  --color-accent:       var(--stc-coral);
  --color-success:      var(--stc-oasis);
  --color-danger:       var(--stc-coral);
  --color-warning:      var(--stc-sunset);

  /* Platform brand colors (for chart series + icons) */
  --platform-x:         var(--stc-onyx);
  --platform-instagram: #E1306C;
  --platform-youtube:   #FF0000;
  --platform-tiktok:    var(--stc-sea);
  --platform-snapchat:  var(--stc-sun);
  --platform-linkedin:  #0A66C2;
  --platform-facebook:  #1877F2;

  /* Typography — "stc Forward" is the brand font. If the files are present in
   * /assets/fonts (see frontend/css/fonts.css) they're used; otherwise the
   * browser falls back to Inter / IBM Plex Sans Arabic silently. */
  --font-sans-en: "stc Forward", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-sans-ar: "stc Forward Arabic", "stc Forward", "IBM Plex Sans Arabic", "Tajawal", system-ui, sans-serif;
  --font-display: "stc Forward", "Inter", system-ui, sans-serif;

  /* Radius + shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card: 0 1px 2px rgba(15,11,20,0.04), 0 8px 24px rgba(26,108,176,0.06);
  --shadow-hover: 0 2px 4px rgba(15,11,20,0.06), 0 12px 32px rgba(26,108,176,0.10);
}