/* ============================================================
   SYNCADEMIA — Brand Design Tokens
   Drop into any project as the single source of truth.
   ============================================================ */
:root {
  /* —— Brand palette —— */
  --syn-blue:        #2E7DE0;   /* Royal Blue   rgb(46,125,224)  */
  --syn-blue-deep:   #2563C9;   /* hover / pressed blue          */
  --syn-teal:        #1AA3C4;   /* Sync Teal    rgb(26,163,196)  */
  --syn-green:       #2FC68C;   /* Academy Mint rgb(47,198,140)  */
  --syn-green-bright:#35D08E;
  --syn-navy:        #16284A;   /* Ink Navy     rgb(22,40,74)    */
  --syn-navy-2:      #1E3354;

  /* —— Neutrals —— */
  --syn-slate:       #6F7B8A;   /* body / tagline text           */
  --syn-slate-soft:  #9AA6B2;
  --syn-mist:        #EDF1ED;   /* surfaces / cards on paper     */
  --syn-paper:       #F6F8F5;   /* page background               */
  --syn-line:        #E2E7E2;   /* hairline borders              */
  --syn-white:       #FFFFFF;

  /* —— Signature gradients —— */
  --syn-gradient:    linear-gradient(100deg, #2E7DE0 0%, #1AA3C4 50%, #2FC68C 100%);
  --syn-gradient-text: linear-gradient(95deg, #0E8DAE 0%, #1FB179 70%); /* for "ademia" / accent text */

  /* —— Typography —— */
  --syn-font-display: 'Fredoka', system-ui, sans-serif;   /* wordmark + headings (400–700) */
  --syn-font-body:    'Manrope', system-ui, sans-serif;   /* UI, body, tagline (400–800)   */
  --syn-tracking-tag: 0.20em;   /* tagline / eyebrow tracking */

  /* —— Radius —— */
  --syn-radius-sm: 8px;
  --syn-radius-md: 16px;
  --syn-radius-lg: 22px;
  --syn-radius-pill: 999px;

  /* —— Elevation —— */
  --syn-shadow:    0 10px 40px rgba(22,40,74,.10);
  --syn-shadow-lg: 0 24px 70px rgba(22,40,74,.16);

  /* —— Spacing scale (4px base) —— */
  --syn-space-1: 4px;  --syn-space-2: 8px;  --syn-space-3: 12px;
  --syn-space-4: 16px; --syn-space-6: 24px; --syn-space-8: 32px;
  --syn-space-12: 48px; --syn-space-16: 64px; --syn-space-24: 96px;
}

/* Semantic aliases — reference these in product UI */
:root {
  --color-primary:        var(--syn-blue);
  --color-primary-hover:  var(--syn-blue-deep);
  --color-accent:         var(--syn-green);
  --color-text:           var(--syn-navy);
  --color-text-muted:     var(--syn-slate);
  --color-bg:             var(--syn-paper);
  --color-surface:        var(--syn-white);
  --color-border:         var(--syn-line);
  --color-on-primary:     var(--syn-white);
}