/* ============================================
   NexusHQ — Design Tokens
   Twilight Palette
   ============================================ */

:root {
  /* ---- Base Colors ---- */
  --color-base:       #0F0C1A;
  --color-surface:    #1E1830;
  --color-surface-2:  #261F3D;
  --color-surface-3:  #2E2748;

  --color-border:       rgba(191, 160, 85, 0.12);
  --color-border-hover: rgba(191, 160, 85, 0.30);

  /* ---- Accent: Celestial Gold ---- */
  --color-gold:       #BFA055;
  --color-gold-light: #D4B575;
  --color-gold-dim:   rgba(191, 160, 85, 0.15);

  /* ---- Accent: Lavender Mist ---- */
  --color-lavender:       #9B8EC4;
  --color-lavender-light: #B3A8D6;
  --color-lavender-dim:   rgba(155, 142, 196, 0.15);

  /* ---- Text ---- */
  --color-starlight:  #F0ECFF;
  --color-ash:        #7A7391;
  --color-ash-light:  #9B95B0;

  /* ---- Alert: Supernova ---- */
  --color-supernova:      #E8634A;
  --color-supernova-dim:  rgba(232, 99, 74, 0.15);

  /* ---- Status: Success ---- */
  --color-success:     #4A9E7D;
  --color-success-dim: rgba(74, 158, 125, 0.15);

  /* ---- Typography ---- */
  --font-display: 'Cinzel', Georgia, serif;
  --font-body:    'Raleway', system-ui, sans-serif;

  --text-xs:   0.6875rem;   /* 11px */
  --text-sm:   0.75rem;     /* 12px */
  --text-base: 0.875rem;    /* 14px */
  --text-md:   1rem;        /* 16px */
  --text-lg:   1.125rem;    /* 18px */
  --text-xl:   1.25rem;     /* 20px */
  --text-2xl:  1.5rem;      /* 24px */
  --text-3xl:  2rem;        /* 32px */

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Spacing ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Border Radius ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ---- Shadows ---- */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-gold: 0 0 24px rgba(191, 160, 85, 0.12);

  /* ---- Layout ---- */
  --sidebar-width: 224px;
  --panel-width:   480px;

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 380ms ease;

  /* ---- Priority Semantic Colors ---- */
  --priority-critical:     #E8634A;
  --priority-critical-dim: rgba(232, 99, 74, 0.12);
  --priority-active:       #BFA055;
  --priority-active-dim:   rgba(191, 160, 85, 0.12);
  --priority-backlog:      #9B8EC4;
  --priority-backlog-dim:  rgba(155, 142, 196, 0.12);
  --priority-someday:      #7A7391;
  --priority-someday-dim:  rgba(122, 115, 145, 0.12);

  /* ---- Status Semantic Colors ---- */
  --status-active:     #4A9E7D;
  --status-in-progress:#BFA055;
  --status-done:       #7A7391;
  --status-deferred:   #C4884A;
  --status-waiting:    #9B8EC4;
  --status-archived:   #4A4660;
}