/* ============================================================
   SERVY — COLOR TOKENS
   Refined violet · enterprise-clean · light mode primary
   ============================================================ */

:root {
  /* ---- Brand violet scale (primary identity) ---- */
  --violet-50:  #F4F2FF;
  --violet-100: #EAE6FF;
  --violet-200: #D7CEFE;
  --violet-300: #BBAAFB;
  --violet-400: #9C82F6;
  --violet-500: #7E5BEF;
  --violet-600: #6C3CE0;   /* primary */
  --violet-700: #5A2BC2;
  --violet-800: #491F9C;
  --violet-900: #3A1A7A;
  --violet-950: #241050;

  /* ---- Fuchsia accent (the check-in / fingerprint moment) ---- */
  --fuchsia-50:  #FDF1FB;
  --fuchsia-100: #FBE0F6;
  --fuchsia-300: #F09AE2;
  --fuchsia-500: #D63FC4;
  --fuchsia-600: #C026A8;   /* hero accent */
  --fuchsia-700: #9E1B89;
  --fuchsia-soft: var(--fuchsia-100);   /* soft pink chip tint */

  /* ---- Cool neutrals (slightly violet-tinted) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F7F7FB;   /* app canvas */
  --neutral-100: #F0F0F6;
  --neutral-150: #E9E9F2;
  --neutral-200: #E1E1EC;
  --neutral-300: #CDCDDC;
  --neutral-400: #A6A6BC;
  --neutral-500: #7A7A94;
  --neutral-600: #59596F;
  --neutral-700: #414153;
  --neutral-800: #2A2A38;
  --neutral-900: #181824;

  /* ---- Semantic status (mirrors attendance states) ---- */
  --success-600: #10985F;   /* Exceeds / Active / check-in ok */
  --success-500: #16B26E;
  --success-soft: #DBF4E7;
  --success-ink:  #0B6B43;

  --warning-600: #D98307;   /* Absence / late */
  --warning-500: #F2A33C;
  --warning-soft: #FCEFD6;
  --warning-ink:  #8A5300;

  --danger-600:  #E11D52;   /* Shortage */
  --danger-500:  #F2476F;
  --danger-soft: #FCE2E8;
  --danger-ink:  #9C0E36;

  --info-600:    #2563EB;   /* neutral working / off-day */
  --info-500:    #4F86F2;
  --info-soft:   #DEE9FE;
  --info-ink:    #163E9C;

  /* ============================================================
     SEMANTIC ALIASES  — use these in components, not raw scales
     ============================================================ */

  /* surfaces */
  --bg-canvas:      var(--neutral-50);
  --bg-surface:     var(--neutral-0);
  --bg-surface-2:   var(--neutral-100);
  --bg-inset:       var(--neutral-100);
  --bg-overlay:     rgba(24, 24, 36, 0.48);
  --bg-frost:       rgba(255, 255, 255, 0.72);

  /* text */
  --text-strong:    var(--neutral-900);
  --text-body:      var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-on-primary: #FFFFFF;
  --text-link:      var(--violet-600);

  /* borders */
  --border-subtle:  var(--neutral-150);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-focus:   var(--violet-500);

  /* primary */
  --primary:        var(--violet-600);
  --primary-hover:  var(--violet-700);
  --primary-active: var(--violet-800);
  --primary-soft:   var(--violet-50);
  --primary-soft-2: var(--violet-100);
  --on-primary:     #FFFFFF;

  /* accent */
  --accent:         var(--fuchsia-600);
  --accent-soft:    var(--fuchsia-50);

  /* the brand gradient — used ONLY for the hero check-in moment */
  --gradient-pulse: linear-gradient(150deg, var(--violet-600) 0%, var(--violet-700) 42%, var(--fuchsia-600) 100%);
  --gradient-hero:  linear-gradient(135deg, var(--violet-700) 0%, var(--violet-600) 55%, var(--fuchsia-600) 130%);

  /* focus ring */
  --ring: 0 0 0 3px var(--violet-200);

  /* selection */
  --selection-bg: var(--violet-100);
}

::selection { background: var(--selection-bg); }