/**
 * Design Tokens
 * Rauda brand colors, typography, and spacing variables
 */

:root {
   /* ========================================
     COLORS - Brand
     ======================================== */
   --rauda-accent: #3C5FFF;
   --rauda-accent-hover: #002EFF;
   --rauda-accent-variant: #6CC4FF;

   /* ========================================
     COLORS - Text
     ======================================== */
   --rauda-black: #0B0F19;
   --rauda-blue-text: #0E1F40;
   --rauda-grey-text: #5A6B88;

   /* ========================================
     COLORS - Backgrounds
     ======================================== */
   --rauda-background: #F8F6F1;
   --rauda-grey-light: #EAF0F8;
   --rauda-grey: #D3DDEA;
   --rauda-white: #FFFFFF;

   /* ========================================
     COLORS - Semantic
     ======================================== */
   --rauda-success: #2FB344;
   --rauda-warning: #F76707;
   --rauda-danger: #D63939;

   /* ========================================
     TYPOGRAPHY - Font Families
     ======================================== */
   --rauda-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
   --rauda-font-mono: 'IBM Plex Mono', monospace;

   /* ========================================
     TYPOGRAPHY - Font Sizes (Minor Third 1.2 scale, base 16px)
     ======================================== */
   --rauda-text-xs: 0.625rem;
   /* 10px */
   --rauda-text-sm: 0.75rem;
   /* 12px */
   --rauda-text-base: 0.875rem;
   /* 14px */
   --rauda-text-md: 1rem;
   /* 16px */
   --rauda-text-lg: 1.1875rem;
   /* 19px */
   --rauda-text-xl: 1.5rem;
   /* 24px */
   --rauda-text-2xl: 2rem;
   /* 32px */
   --rauda-text-3xl: 2.5rem;
   /* 40px */
   --rauda-text-4xl: 3rem;
   /* 48px */

   /* ========================================
     TYPOGRAPHY - Line Heights
     ======================================== */
   --rauda-leading-tight: 1.3;
   /* For 2xl, 3xl, 4xl */
   --rauda-leading-normal: 1.5;
   /* For xs through xl */

   /* ========================================
     SPACING
     ======================================== */
   --rauda-space-1: 0.25rem;
   /* 4px */
   --rauda-space-2: 0.5rem;
   /* 8px */
   --rauda-space-3: 0.75rem;
   /* 12px */
   --rauda-space-4: 1rem;
   /* 16px */
   --rauda-space-5: 1.25rem;
   /* 20px */
   --rauda-space-6: 1.5rem;
   /* 24px */
   --rauda-space-8: 2rem;
   /* 32px */

   /* ========================================
     BORDERS & RADIUS
     ======================================== */
   --rauda-radius-sm: 2px;
   --rauda-radius-md: 4px;
   --rauda-radius-lg: 6px;
   --rauda-radius-xl: 8px;

   /* ========================================
     SIDEBAR
     ======================================== */
   --rauda-sidebar-text-dim: rgba(255, 255, 255, 0.55);

   /* ========================================
     SHADOWS
     ======================================== */
   --rauda-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
   --rauda-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
   --rauda-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);

   /* ========================================
     TRANSITIONS
     ======================================== */
   --rauda-transition-fast: 0.15s ease;
   --rauda-transition-base: 0.2s ease;
   --rauda-transition-slow: 0.3s ease;
}

/* ========================================
   BRAND THEME TOKENS
   ======================================== */
:root {
   --brand-accent: #0094d9;
   --brand-accent-hover: #0077B6;
   --brand-accent-variant: #56C5F2;

   --brand-black: #242626;
   --brand-blue-text: #242626;
   --brand-grey-text: #5E7182;

   --brand-background: #f4f5f5;
   --brand-grey-light: #e8eced;
   --brand-grey: #C6DCE8;
   --brand-white: #FFFFFF;

   --brand-success: #2FB344;
   --brand-warning: #F76707;
   --brand-danger: #D63939;

   --brand-font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
   --brand-font-mono: 'IBM Plex Mono', monospace;

   --brand-text-xs: 0.625rem;
   --brand-text-sm: 0.75rem;
   --brand-text-base: 0.875rem;
   --brand-text-md: 1rem;
   --brand-text-lg: 1.1875rem;
   --brand-text-xl: 1.5rem;
   --brand-text-2xl: 2rem;
   --brand-text-3xl: 2.5rem;
   --brand-text-4xl: 3rem;

   --brand-leading-tight: 1.3;
   --brand-leading-normal: 1.5;

   --brand-space-1: 0.25rem;
   --brand-space-2: 0.5rem;
   --brand-space-3: 0.75rem;
   --brand-space-4: 1rem;
   --brand-space-5: 1.25rem;
   --brand-space-6: 1.5rem;
   --brand-space-8: 2rem;

   --brand-radius-sm: 2px;
   --brand-radius-md: 4px;
   --brand-radius-lg: 6px;
   --brand-radius-xl: 8px;

   --brand-shadow-sm: 0 1px 2px rgba(0, 79, 123, 0.08);
   --brand-shadow-md: 0 10px 24px rgba(0, 79, 123, 0.08);
   --brand-shadow-lg: 0 18px 48px rgba(0, 79, 123, 0.14);
   --brand-shadow-btn: 0 0.5rem 1rem rgba(0, 148, 217, 0.18);
   --brand-shadow-sidebar: 0.75rem 0 2rem rgba(0, 79, 123, 0.12);
   --brand-shadow-logo: 0 0.5rem 1rem rgba(0, 79, 123, 0.16);

   /* ========================================
     ACCENT ALPHA VARIANTS
     ======================================== */
   --brand-accent-border-soft: rgba(0, 148, 217, 0.35);
   --brand-accent-ring: rgba(0, 148, 217, 0.16);

   /* ========================================
     SIDEBAR SURFACE COLORS
     ======================================== */
   --brand-sidebar-text: rgba(255, 255, 255, 0.82);
   --brand-sidebar-text-muted: rgba(255, 255, 255, 0.72);
   --brand-sidebar-text-dim: rgba(255, 255, 255, 0.65);
   --brand-sidebar-hover-bg: rgba(255, 255, 255, 0.12);
   --brand-sidebar-active-bg: rgba(255, 255, 255, 0.20);
   --brand-sidebar-border: rgba(255, 255, 255, 0.22);

   --brand-transition-fast: 0.15s ease;
   --brand-transition-base: 0.2s ease;
   --brand-transition-slow: 0.3s ease;
}