/* ============================================================
   Slidestudio — Color tokens
   Brand palette from the official brand guide sheet.
   ============================================================ */
:root {
  /* ---- Brand core palette (raw values) ---- */
  --ss-cyan:        #0091b9;   /* primary — "studio blue" */
  --ss-sky:         #bae4f0;   /* light tint */
  --ss-navy:        #004e9b;   /* deep blue */
  --ss-orange:      #ff6500;   /* accent orange */
  --ss-yellow:      #ffd500;   /* accent yellow */

  /* ---- Cyan ramp (primary) ---- */
  --cyan-50:  #e6f5fa;
  --cyan-100: #bae4f0;   /* = brand sky */
  --cyan-200: #8ad3e8;
  --cyan-300: #4fbdd9;
  --cyan-400: #1ea6c8;
  --cyan-500: #0091b9;   /* = brand cyan */
  --cyan-600: #007a9c;
  --cyan-700: #00627e;
  --cyan-800: #064d63;
  --cyan-900: #0a3d4e;

  /* ---- Navy ramp (deep blue) ---- */
  --navy-50:  #e7eef7;
  --navy-100: #c2d4ec;
  --navy-200: #8aaedd;
  --navy-300: #4f82c7;
  --navy-400: #1f64b3;
  --navy-500: #004e9b;   /* = brand navy */
  --navy-600: #003f80;
  --navy-700: #003066;
  --navy-800: #00264f;
  --navy-900: #001b38;

  /* ---- Orange ramp ---- */
  --orange-50:  #fff1e6;
  --orange-100: #ffd9bd;
  --orange-200: #ffb583;
  --orange-300: #ff8f49;
  --orange-400: #ff7a24;
  --orange-500: #ff6500;   /* = brand orange */
  --orange-600: #db5500;
  --orange-700: #b34500;
  --orange-800: #8a3500;
  --orange-900: #5c2300;

  /* ---- Yellow ramp ---- */
  --yellow-50:  #fffbe6;
  --yellow-100: #fff3b8;
  --yellow-200: #ffe97a;
  --yellow-300: #ffe24d;
  --yellow-400: #ffd91f;
  --yellow-500: #ffd500;   /* = brand yellow */
  --yellow-600: #e0bb00;
  --yellow-700: #b39400;
  --yellow-800: #8a7200;
  --yellow-900: #5c4c00;

  /* ---- Neutral / ink ramp ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fa;
  --neutral-100: #eef1f5;
  --neutral-200: #e2e7ee;
  --neutral-300: #cbd3de;
  --neutral-400: #9aa6b6;
  --neutral-500: #6b7889;
  --neutral-600: #4d5a6b;
  --neutral-700: #364150;
  --neutral-800: #222c38;
  --neutral-900: #131a23;

  /* ============================================================
     Semantic aliases
     ============================================================ */
  --color-primary:        var(--cyan-500);
  --color-primary-hover:  var(--cyan-600);
  --color-primary-active: var(--cyan-700);
  --color-primary-soft:   var(--cyan-100);

  --color-accent:         var(--orange-500);
  --color-accent-hover:   var(--orange-600);
  --color-highlight:      var(--yellow-500);
  --color-deep:           var(--navy-500);
  --color-deep-hover:     var(--navy-600);

  /* Text */
  --text-strong:   var(--neutral-900);
  --text-body:     var(--neutral-700);
  --text-muted:    var(--neutral-500);
  --text-subtle:   var(--neutral-400);
  --text-inverse:  var(--neutral-0);
  --text-link:     var(--cyan-600);
  --text-on-brand: #ffffff;

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-inverse: var(--navy-700);
  --surface-brand:   var(--cyan-500);

  /* Borders */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--cyan-500);

  /* Status */
  --color-success: #1f9d57;
  --color-warning: var(--yellow-600);
  --color-danger:  #e0392b;
  --color-info:    var(--cyan-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px rgba(0, 145, 185, 0.35);
}