/* ============================================================
   ITM Skills University — Color Tokens
   Source: Brand Book 2026, Ch.02 Visual Identity (Colour System).
   Two tiers:
     Tier 1 — Brand Palette (all canvases)
     Tier 2 — Institute Accents (sub-brand use only; NEVER group-level)
   ============================================================ */

:root {
  /* ============================================================
     TIER 1 — BRAND PALETTE
     ============================================================ */
  --crimson:        #AA004F;  /* Primary · accent · use sparingly */
  --crimson-light:  #D4567F;  /* Italic accent on dark · data labels */
  --dark:           #0E0D18;  /* Digital dark bg · alternating sections */
  --cream:          #F8F3EC;  /* Light bg · print · editorial */
  --gold:           #E8B84B;  /* Innermost arc · blob accent ONLY */

  /* Crimson tint/shade ramp (derived from #AA004F for UI states/surfaces) */
  --crimson-50:   #fbe6ef;
  --crimson-100:  #f5ccdd;
  --crimson-200:  #eb9bbd;
  --crimson-300:  #dd6e9c;
  --crimson-400:  #c83777;
  --crimson-500:  #aa004f; /* brand */
  --crimson-600:  #8d0042;
  --crimson-700:  #6f0034;
  --crimson-800:  #520026;
  --crimson-900:  #350019;

  /* Neutral ramp — anchored between Cream (#F8F3EC) and Dark (#0E0D18) */
  --neutral-0:   #ffffff;
  --neutral-50:  #f8f3ec;
  --neutral-100: #efe9e0;
  --neutral-200: #e1d9cf;
  --neutral-300: #c9bfb4;
  --neutral-400: #9b9089;
  --neutral-500: #6f655f;
  --neutral-600: #4b434a;
  --neutral-700: #2d2933;
  --neutral-800: #1a1722;
  --neutral-900: #0e0d18;

  /* ============================================================
     TIER 2 — INSTITUTE ACCENTS  (sub-brand only)
     Never use in ITM Group-level communications.
     ============================================================ */
  --accent-group:        #AA004F;            /* ITM Group / University */
  --accent-bschool:      #D36328;            /* ITM Business School */
  --accent-design:       #D7DA5E;            /* Institute of Design & Media */
  --accent-futuretech:   #F2D750;            /* School of Future Tech */
  --accent-hospitality:  #C6A15B;            /* Institute of Hotel Management */
  --accent-health:       #3DB069;            /* Institute of Health Sciences */
  --accent-skills:       #1E3A5F;            /* ITM Skills Academy */

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Brand */
  --brand:          var(--crimson);
  --brand-hover:    var(--crimson-600);
  --brand-active:   var(--crimson-700);
  --brand-subtle:   var(--crimson-50);
  --brand-subtle-2: var(--crimson-100);
  --brand-border:   var(--crimson-200);
  --on-brand:       var(--neutral-0);

  /* Italic accent (Brand Book rule) */
  --italic-on-dark:  var(--crimson-light);   /* #D4567F */
  --italic-on-light: var(--crimson);         /* #AA004F */

  /* Text */
  --text-strong:    var(--dark);
  --text-body:      var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-faint:     var(--neutral-400);
  --text-brand:     var(--crimson);
  --text-on-dark:     var(--cream);
  --text-on-dark-mut: color-mix(in srgb, var(--cream) 70%, transparent);

  /* Surfaces (section alternation: Dark / Light / Crimson panel) */
  --surface-page:    var(--cream);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-cream:   var(--cream);
  --surface-dark:    var(--dark);
  --surface-brand:   var(--crimson);
  --surface-ink:     var(--dark);

  /* Borders / dividers */
  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);
  --border-brand:  var(--crimson);
  --divider:       color-mix(in srgb, var(--dark) 10%, transparent);

  /* Focus ring */
  --focus-ring:    color-mix(in srgb, var(--crimson) 45%, transparent);

  /* Golden-ratio line (graphic element): 61.8% crimson / 38.2% tint */
  --rule-crimson:  var(--crimson);
  --rule-tint:     var(--crimson-100);

  /* ------------------------------------------------------------
     Functional UI states — NOT part of the brand palette.
     Defined only so form validation / system messages render.
     Do not feature these in brand collateral.
     ------------------------------------------------------------ */
  --danger:    #c0392b;
  --danger-bg: #fae0dc;
  --success:    var(--accent-health);
  --success-bg: #e0f0e7;
}