/**
 * 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;

  /* ========================================
     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;
}

/* ========================================
   STIGA THEME TOKENS
   ======================================== */
:root {
  --stiga-accent: #080E9A;
  --stiga-accent-hover: #060B7A;
  --stiga-accent-variant: #6CC4FF;

  --stiga-black: #00045B;
  --stiga-blue-text: #00045B;
  --stiga-grey-text: #5a5c88;

  --stiga-background: #FFF3E4;
  --stiga-grey-light: #EAECF8;
  --stiga-grey: #D3DDEA;
  --stiga-white: #FFFFFF;

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

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

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

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

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

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

  --stiga-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --stiga-shadow-md: 0 1px 3px rgba(0, 0, 0, 0.1);
  --stiga-shadow-lg: 0 4px 6px rgba(0, 0, 0, 0.1);

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