/* ============================================================
   SORP — Color tokens
   Premium UAE consulting & business-infrastructure brand.
   Base palette: black / white / light neutrals / SORP red.
   Accents (used sparingly, as premium highlights only):
   coral, pink, purple, blue — and the signature brand gradient.
   ============================================================ */

:root {
  /* ---- Brand red (the SORP mark + primary action color) ---- */
  --sorp-red: #d64356;
  --sorp-red-600: #c5354a;
  --sorp-red-700: #ab2a3d;
  --sorp-red-300: #ee9aa6;
  --sorp-red-100: #fbe9ec;
  --sorp-red-050: #fdf4f5;

  /* ---- Neutrals (ink -> paper) ---- */
  --black:    #0a0a0b;
  --ink-900:  #141416;
  --ink-800:  #26262b;
  --ink-700:  #3a3a42;
  --ink-600:  #56565f;
  --ink-500:  #74747e;
  --ink-400:  #9a9aa3;
  --ink-300:  #c4c4cb;
  --ink-200:  #e2e2e6;
  --ink-150:  #ebebef;
  --ink-100:  #f2f2f4;
  --ink-050:  #f8f8fa;
  --white:    #ffffff;

  /* ---- Premium accent hues (decorative, restrained) ---- */
  --accent-coral:  #f58a6e;
  --accent-pink:   #ed4e8b;
  --accent-purple: #7c5cff;
  --accent-blue:   #4f5bf2;

  --accent-purple-100: #efeaff;
  --accent-blue-100:   #e9ebfe;
  --accent-pink-100:   #fde7f0;

  /* ---- Signature brand gradient (coral -> pink -> purple -> blue) ---- */
  --gradient-brand: linear-gradient(116deg, #f58a6e 0%, #ed4e8b 34%, #7c5cff 70%, #4f5bf2 100%); /* @kind color */
  --gradient-brand-soft: linear-gradient(116deg, #f9a98f 0%, #f07bab 40%, #9d86ff 100%); /* @kind color */
  --gradient-red-glow: radial-gradient(120% 120% at 0% 0%, rgba(214,67,86,0.16) 0%, rgba(214,67,86,0) 60%); /* @kind color */

  /* ---- Semantic status ---- */
  --success: #1f9d6b;
  --success-100: #e4f5ee;
  --warning: #d9920b;
  --warning-100: #fbf0d8;
  --danger:  #d64356;
  --danger-100: #fbe9ec;
  --info:    #4f5bf2;
  --info-100: #e9ebfe;

  /* ============================================================
     Semantic aliases — reference these in components
     ============================================================ */

  --text-primary:   var(--black);
  --text-secondary: var(--ink-600);
  --text-muted:     var(--ink-500);
  --text-placeholder: var(--ink-400);
  --text-disabled:  var(--ink-300);
  --text-inverse:   var(--white);
  --text-brand:     var(--sorp-red);
  --text-on-brand:  var(--white);

  --surface-page:   var(--white);
  --surface-app:    var(--ink-050);
  --surface-card:   var(--white);
  --surface-raised: var(--white);
  --surface-sunken: var(--ink-050);
  --surface-hover:  var(--ink-100);
  --surface-inverse: var(--black);
  --surface-brand:  var(--sorp-red);
  --surface-brand-wash: var(--sorp-red-050);

  --border-subtle:  var(--ink-150);
  --border-default: var(--ink-200);
  --border-strong:  var(--ink-300);
  --border-inverse: rgba(255,255,255,0.14);
  --border-brand:   var(--sorp-red);

  --action-bg:        var(--sorp-red);
  --action-bg-hover:  var(--sorp-red-600);
  --action-bg-active: var(--sorp-red-700);
  --action-fg:        var(--white);

  --focus-ring: rgba(214,67,86,0.40);
}