/**
 * Design Tokens - Figma Design System
 * 
 * This file contains all design tokens extracted from Figma.
 * Use these CSS custom properties throughout the application
 * to maintain design consistency.
 * 
 * Usage: var(--rm-primary-base)
 */

:root {
    /* ============================================
       COLOR PALETTE - Primary
       ============================================ */
    --rm-primary-base: #00385d;
    --rm-primary-dark: #002744;
    --rm-primary-light: #004d80;
    
    /* ============================================
       COLOR PALETTE - Secondary (Blue)
       ============================================ */
    --rm-secondary-base: #2387cb;
    --rm-secondary-dark: #1a6da0;
    --rm-secondary-darker: #145580;
    --rm-secondary-light: #4da3db;
    
    /* ============================================
       COLOR PALETTE - Neutral / Gray Scale
       ============================================ */
    --rm-gray-50: #f9fafb;
    --rm-gray-100: #f3f4f6;
    --rm-gray-200: #e5e7eb;
    --rm-gray-300: #d1d5dc;
    --rm-gray-400: #9ca3af;
    --rm-gray-500: #6a7282;
    --rm-gray-600: #4b5563;
    --rm-gray-700: #364153;
    --rm-gray-800: #1e2939;
    --rm-gray-900: #111827;
    --rm-gray-950: #0a0a0a;
    
    /* ============================================
       COLOR PALETTE - Semantic
       ============================================ */
    --rm-success: #10b981;
    --rm-success-light: #d1fae5;
    --rm-warning: #f59e0b;
    --rm-warning-light: #fef3c7;
    --rm-error: #ef4444;
    --rm-error-light: #fee2e2;
    --rm-info: #3b82f6;
    --rm-info-light: #dbeafe;
    
    /* ============================================
       TYPOGRAPHY - Font Families
       ============================================ */
    --rm-font-primary: 'Rubik', 'Segoe UI', 'Arial', sans-serif;
    --rm-font-mono: 'Consolas', 'Monaco', monospace;
    
    /* ============================================
       TYPOGRAPHY - Font Sizes
       ============================================ */
    --rm-text-xs: 11px;
    --rm-text-sm: 12px;
    --rm-text-base: 13px;
    --rm-text-md: 14px;
    --rm-text-lg: 16px;
    --rm-text-xl: 18px;
    --rm-text-2xl: 20px;
    --rm-text-3xl: 24px;
    
    /* ============================================
       TYPOGRAPHY - Font Weights
       ============================================ */
    --rm-font-normal: 400;
    --rm-font-medium: 500;
    --rm-font-semibold: 600;
    --rm-font-bold: 700;
    
    /* ============================================
       TYPOGRAPHY - Line Heights
       ============================================ */
    --rm-leading-tight: 1.25;
    --rm-leading-normal: 1.5;
    --rm-leading-relaxed: 1.75;
    
    /* ============================================
       SPACING
       ============================================ */
    --rm-space-1: 4px;
    --rm-space-2: 8px;
    --rm-space-3: 12px;
    --rm-space-4: 16px;
    --rm-space-5: 20px;
    --rm-space-6: 24px;
    --rm-space-8: 32px;
    --rm-space-10: 40px;
    --rm-space-12: 48px;
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --rm-radius-sm: 4px;
    --rm-radius-md: 8px;
    --rm-radius-lg: 10px;
    --rm-radius-xl: 16px;
    --rm-radius-full: 9999px;
    
    /* ============================================
       SHADOWS
       ============================================ */
    --rm-shadow-sm: 0px 1px 2px rgba(0, 0, 0, 0.05);
    --rm-shadow-md: 0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px -1px rgba(0, 0, 0, 0.1);
    --rm-shadow-lg: 0px 4px 6px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
    --rm-shadow-xl: 0px 10px 15px rgba(0, 0, 0, 0.1), 0px 4px 6px -4px rgba(0, 0, 0, 0.1);
    
    /* ============================================
       TRANSITIONS
       ============================================ */
    --rm-transition-fast: 150ms ease;
    --rm-transition-normal: 200ms ease;
    --rm-transition-slow: 300ms ease;
    
    /* ============================================
       Z-INDEX LAYERS
       ============================================ */
    --rm-z-dropdown: 100;
    --rm-z-sticky: 200;
    --rm-z-modal: 300;
    --rm-z-tooltip: 400;
    --rm-z-toast: 500;
    
    /* ============================================
       COMPONENT SPECIFIC - Form Controls
       ============================================ */
    --rm-input-height: 40px;
    --rm-input-padding-x: 12px;
    --rm-input-padding-y: 10px;
    --rm-input-border-width: 0.741px;
    --rm-input-bg: var(--rm-gray-50);
    --rm-input-bg-focus: #fff;
    --rm-input-border: var(--rm-gray-300);
    --rm-input-border-focus: var(--rm-secondary-base);
    --rm-input-text: var(--rm-gray-950);
    --rm-input-placeholder: var(--rm-gray-500);
    
    /* ============================================
       COMPONENT SPECIFIC - Buttons
       ============================================ */
    --rm-btn-height: 40px;
    --rm-btn-padding-x: 24px;
    --rm-btn-padding-y: 10px;
    --rm-btn-font-size: var(--rm-text-md);
    --rm-btn-font-weight: var(--rm-font-medium);
    
    /* ============================================
       COMPONENT SPECIFIC - Cards
       ============================================ */
    --rm-card-bg: #fff;
    --rm-card-border: var(--rm-gray-200);
    --rm-card-radius: var(--rm-radius-lg);
    --rm-card-padding: var(--rm-space-6);
    --rm-card-shadow: var(--rm-shadow-md);
}