/* ==========================================================================
   Design Tokens — CSS custom properties for the entire application.
   Never hardcode a colour, spacing, or font value outside this file.
   Themes and dark-mode overrides live in /themes/.
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     Brand colours — overridden per theme file
     ------------------------------------------------------------------------- */
  --color-primary:        #1F3864;
  --color-primary-light:  #2E5FA3;
  --color-primary-dark:   #152848;
  --color-accent:         #C9A84C;
  --color-accent-light:   #FEF9EE;

  /* -------------------------------------------------------------------------
     Semantic colours
     ------------------------------------------------------------------------- */
  --color-success:        #1E8449;
  --color-success-light:  #D5F5E3;
  --color-success-dark:   #145A32;
  --color-warning:        #B7770D;
  --color-warning-light:  #FEF3CD;
  --color-warning-dark:   #7D5306;
  --color-danger:         #C0392B;
  --color-danger-light:   #FADBD8;
  --color-danger-dark:    #922B21;
  --color-info:           #1A6FA8;
  --color-info-light:     #D6EAF8;
  --color-info-dark:      #0F4C75;

  /* -------------------------------------------------------------------------
     Neutral scale (Tailwind-inspired)
     ------------------------------------------------------------------------- */
  --color-white:          #FFFFFF;
  --color-gray-50:        #F8FAFC;
  --color-gray-100:       #F1F5F9;
  --color-gray-200:       #E2E8F0;
  --color-gray-300:       #CBD5E1;
  --color-gray-400:       #94A3B8;
  --color-gray-500:       #64748B;
  --color-gray-600:       #475569;
  --color-gray-700:       #334155;
  --color-gray-800:       #1E293B;
  --color-gray-900:       #0F172A;

  /* -------------------------------------------------------------------------
     Surface colours
     ------------------------------------------------------------------------- */
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-raised: #FFFFFF;
  --color-border:         #E2E8F0;
  --color-border-strong:  #CBD5E1;

  /* -------------------------------------------------------------------------
     Typography colours
     ------------------------------------------------------------------------- */
  --color-text-primary:   #1E293B;
  --color-text-secondary: #64748B;
  --color-text-muted:     #94A3B8;
  --color-text-inverse:   #FFFFFF;

  /* -------------------------------------------------------------------------
     Spacing scale (4px base)
     ------------------------------------------------------------------------- */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */

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

  /* -------------------------------------------------------------------------
     Shadows
     ------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.10), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.10), 0 10px 10px rgba(0, 0, 0, 0.04);

  /* -------------------------------------------------------------------------
     Sidebar
     ------------------------------------------------------------------------- */
  --sidebar-width:          260px;
  --sidebar-collapsed-width: 68px;
  --sidebar-bg:             var(--color-primary);
  --sidebar-text:           rgba(255, 255, 255, 0.75);
  --sidebar-text-active:    #FFFFFF;
  --sidebar-item-active-bg: rgba(255, 255, 255, 0.15);
  --sidebar-item-hover-bg:  rgba(255, 255, 255, 0.08);
  --sidebar-section-label:  rgba(255, 255, 255, 0.40);
  --sidebar-divider:        rgba(255, 255, 255, 0.12);

  /* -------------------------------------------------------------------------
     Topbar
     ------------------------------------------------------------------------- */
  --topbar-height:  64px;
  --topbar-bg:      var(--color-surface);
  --topbar-border:  var(--color-border);

  /* -------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------- */
  --font-sans:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-xs:   0.75rem;   /* 12px */
  --font-size-sm:   0.875rem;  /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg:   1.125rem;  /* 18px */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.875rem;  /* 30px */
  --font-size-4xl:  2.25rem;   /* 36px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight:   1.25;
  --line-height-normal:  1.5;
  --line-height-relaxed: 1.75;

  /* -------------------------------------------------------------------------
     Transitions
     ------------------------------------------------------------------------- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;

  /* -------------------------------------------------------------------------
     Z-index scale
     ------------------------------------------------------------------------- */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal-bg:  1040;
  --z-modal:     1050;
  --z-toast:     1060;
  --z-tooltip:   1070;

  /* -------------------------------------------------------------------------
     Misc
     ------------------------------------------------------------------------- */
  --content-max-width: 1400px;
  --content-padding-x: 24px;
  --content-padding-y: 24px;
}