/* Spiral Group design tokens (light theme), from the Spiral Group Design System. Used by the Spiral Academy pages. */
:root {
  /* ---- Brand primitives (canonical) ---- */
  --navy:        #1F2858;  /* primary brand */
  --crimson:     #C0414C;  /* primary accent / CTA / the spiral mark */
  --slate:       #4A5C8D;  /* secondary accent */
  --rose:        #D99097;  /* soft crimson tint */
  --sky:         #D5EAF2;  /* soft blue tint */
  --interaction: #226EB5;  /* extended interaction blue (links/focus) */

  /* ---- Navy ramp ---- */
  --navy-50:  #EEF0F7;
  --navy-100: #D9DDEC;
  --navy-200: #B3BAD6;
  --navy-300: #8C96BF;
  --navy-400: #5E6A9C;
  --navy-500: #3B4577;
  --navy-600: #2A3461;
  --navy-700: #1F2858;  /* base */
  --navy-800: #181F45;
  --navy-900: #121732;

  /* ---- Crimson ramp ---- */
  --crimson-50:  #FBEEEF;
  --crimson-100: #F4D2D5;
  --crimson-200: #E8A5AB;
  --crimson-300: #D97B83;
  --crimson-400: #CD5A63;
  --crimson-500: #C0414C;  /* base */
  --crimson-600: #A8363F;
  --crimson-700: #8B2B33;
  --crimson-800: #6E2228;
  --crimson-900: #4E181D;

  /* ---- Slate ramp ---- */
  --slate-50:  #EEF1F7;
  --slate-100: #D7DEEC;
  --slate-200: #B0BCD7;
  --slate-300: #889AC1;
  --slate-400: #6678A7;
  --slate-500: #4A5C8D;  /* base */
  --slate-600: #3C4B73;
  --slate-700: #2F3B5A;
  --slate-800: #232C44;
  --slate-900: #181F30;

  /* ---- Rose & Sky (tints — fills/accents only, never text on white) ---- */
  --rose-100:  #FBEDEF;
  --rose-200:  #F3D3D7;
  --rose-300:  #E9B6BC;
  --rose-400:  #D99097;  /* base */
  --rose-500:  #C97078;
  --sky-100:   #F0F8FB;
  --sky-200:   #D5EAF2;  /* base */
  --sky-300:   #B7DAE8;
  --sky-400:   #93C5DA;

  /* ---- Cool-grey neutral ramp (nudged toward navy) ---- */
  --grey-25:  #FBFBFD;
  --grey-50:  #F6F7FA;
  --grey-100: #EDEFF4;
  --grey-200: #E0E3EC;
  --grey-300: #CBD0DC;
  --grey-400: #9BA3B7;
  --grey-500: #6E7689;
  --grey-600: #515869;
  --grey-700: #3B4150;
  --grey-800: #262B38;
  --grey-900: #161A24;
  --white:    #FFFFFF;
  --black:    #0B0E18;

  /* ---- Semantic: success (green) ---- */
  --success-subtle: #EAF3E5;
  --success:        #3D8A2B;
  --success-strong: #2F6B20;
  --success-on:     #FFFFFF;
  /* ---- Semantic: warning (amber) ---- */
  --warning-subtle: #FCF3E2;
  --warning:        #B7791F;
  --warning-strong: #8A5A0B;
  --warning-on:     #FFFFFF;
  /* ---- Semantic: error / destructive (distinct from brand crimson) ---- */
  --error-subtle:   #FDE7E5;
  --error:          #D92D20;
  --error-strong:   #B42318;
  --error-on:       #FFFFFF;
  /* ---- Semantic: info (leans on pale sky / interaction blue) ---- */
  --info-subtle:    #D5EAF2;
  --info:           #226EB5;
  --info-strong:    #1A5A96;
  --info-on:        #FFFFFF;

  /* ---- Reserved: Zoho partner badge only — NOT a Spiral UI colour ---- */
  --zoho-red: #E42527;

  /* ---- Data-viz categorical (seeded from brand) ---- */
  --viz-1: #1F2858;  /* navy */
  --viz-2: #C0414C;  /* crimson */
  --viz-3: #226EB5;  /* interaction blue */
  --viz-4: #4A5C8D;  /* slate */
  --viz-5: #D99097;  /* rose */
  --viz-6: #469431;  /* green */
  --viz-7: #C98A1A;  /* amber */
  --viz-8: #2A8C8C;  /* teal */

  /* ============ SEMANTIC ALIASES — LIGHT ============ */
  /* Surfaces / backgrounds */
  --bg-app:          var(--grey-50);
  --bg-canvas:       var(--white);
  --surface-card:    var(--white);
  --surface-raised:  var(--white);
  --surface-sunken:  var(--grey-50);
  --surface-hover:   var(--grey-100);
  --surface-inverse: var(--navy-700);
  --overlay-scrim:   rgba(18, 23, 50, 0.50);

  /* Text */
  --text-primary:    var(--navy-800);
  --text-secondary:  var(--slate-500);
  --text-muted:      var(--grey-500);
  --text-disabled:   var(--grey-400);
  --text-inverse:    var(--white);
  --text-link:       var(--interaction);
  --text-on-brand:   var(--white);

  /* Borders / dividers */
  --border-subtle:   var(--grey-200);
  --border-default:  var(--grey-300);
  --border-strong:   var(--grey-400);
  --divider:         var(--grey-200);

  /* Actions */
  --action-primary:        var(--navy-700);
  --action-primary-hover:  var(--navy-800);
  --action-primary-press:  var(--navy-900);
  --action-accent:         var(--crimson-500);
  --action-accent-hover:   var(--crimson-600);
  --action-accent-press:   var(--crimson-700);
  --action-secondary:      var(--grey-100);
  --action-secondary-hover:var(--grey-200);

  /* Focus ring */
  --focus-ring:      var(--interaction);
  --focus-ring-alpha: rgba(34, 110, 181, 0.35);
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(31, 40, 88, 0.06);
  --shadow-2: 0 2px 8px rgba(31, 40, 88, 0.08);
  --shadow-3: 0 4px 16px rgba(31, 40, 88, 0.08);
  --shadow-4: 0 12px 28px rgba(31, 40, 88, 0.10);
  --shadow-5: 0 24px 48px rgba(31, 40, 88, 0.14);
}