/* ============================================
   Appeals Doctor Design System - TOKENS ONLY
   This file contains CSS custom properties (design tokens).
   Hex color values are ONLY allowed in this file.
   ============================================ */

:root {
    /* ========================================
       COLOR TOKENS
       ======================================== */
    
    /* Primary Colors */
    --color-primary: #102542;           /* Navy - buttons, headings, primary actions */
    --color-primary-hover: #1a3a5f;     /* Hover state for primary */
    --color-accent: #432B7E;            /* Purple - links, focus states */
    --color-accent-hover: #5a3aa3;      /* Hover state for accent */
    --color-accent-bg: #F8E6FF;         /* Light purple background */
    --color-accent-bg-hover: #E6CCFF;   /* Light purple hover background */
    
    /* Background Colors */
    --color-bg-page: #F6F6F6;           /* Page background */
    --color-bg-card: #F9FAFB;           /* Cards, inputs, sections */
    --color-bg-input: #F9FAFB;          /* Form input background */
    --color-bg-table-header: #ECECEC;   /* Table header background */
    --color-bg-secondary: #FAFBFC;       /* Secondary background (table rows, hover states) */
    --color-bg-hover: #EEF4FB;          /* Hover state background */
    --color-bg-warning-light: #FFF8EF;  /* Light warning background */
    
    /* Border Colors */
    --color-border: #E7F0FA;            /* Light borders - inputs, cards */
    --color-border-medium: #79747E;     /* Medium borders - dividers */
    
    /* Text Colors */
    --color-text-primary: #102542;      /* Primary text */
    --color-text-secondary: #8F8F8F;    /* Secondary/placeholder text */
    --color-text-tertiary: #B8B8B8;     /* Tertiary/very muted text */
    --color-text-inverse: #FFFFFF;      /* Text on dark backgrounds */
    
    /* Typography-specific tokens (canonical names) */
    --color-text-title: #102542;       /* Widget/title text color (canonical) */
    --text-t1: var(--color-text-title); /* DEPRECATED: Use --color-text-title instead */
    
    /* Status Colors */
    --color-success: #00990F;           /* Success/completed */
    --color-success-bg: #D6FFE4;        /* Success background */
    --color-warning: #C47600;           /* Warning/action required */
    --color-warning-bg: #FFECD6;        /* Warning background */
    --color-info: #2E5E99;              /* Info/under review */
    --color-info-bg: #D6E9FF;           /* Info background */
    --color-error: #D63939;             /* Error state */
    --color-error-bg: #FEE;             /* Error background */
    --color-error-border: #FFCCCC;     /* Error border */
    --color-error-hover: #C0392B;      /* Error hover state */
    --color-success-hover: #3C8E3C;    /* Success hover state */
    --color-success-border: #99FF99;  /* Success border */
    --color-info-border: #BBEEFF;     /* Info border */
    --color-warning-border: #FFD699;  /* Warning border */
    
    /* Interactive state overlays (for hover/active states) */
    --color-primary-overlay-light: rgba(16, 37, 66, 0.04);  /* Light overlay for hover */
    --color-primary-overlay-medium: rgba(16, 37, 66, 0.08);  /* Medium overlay for active */
    --color-primary-overlay-focus: rgba(16, 37, 66, 0.12);  /* Focus ring overlay */
    
    /* ========================================
       TYPOGRAPHY TOKENS
       ======================================== */
    
    /* Font Families */
    --font-display: 'Roboto', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-font-inter: var(--font-body); /* DEPRECATED: Use --font-body instead */
    
    /* Font Sizes */
    --font-size-display-lg: 45px;       /* Large display headings */
    --font-size-display-sm: 36px;       /* Small display headings */
    --font-size-h3: 24px;
    --font-size-title: 24px;              /* Widget title size (canonical) */
    --font-family-size-headings-h3: var(--font-size-title); /* DEPRECATED: Use --font-size-title instead */
    --font-size-h4: 20px;
    --font-size-h5: 18px;
    --font-size-h6: 16px;
    --font-size-body: 14px;             /* Standard body text */
    --font-size-small: 12px;            /* Small text, captions */
    --font-size-xs: 11px;               /* Extra small text, micro copy */
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    
    /* Line Heights */
    --line-height-display-lg: 52px;
    --line-height-display-sm: 44px;
    --line-height-body: 1.5;            /* 21px at 14px font */
    --line-height-small: 18px;
    
    /* ========================================
       SPACING TOKENS
       ======================================== */
    
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;
    --space-5xl: 60px;
    --space-6xl: 100px;
    
    /* ========================================
       BORDER RADIUS TOKENS
       ======================================== */
    
    --radius-sm: 8px;                   /* Buttons, inputs */
    --radius-md: 12px;                  /* Cards, tables */
    --radius-lg: 20px;                  /* Large panels */
    --radius-full: 9999px;              /* Pills, badges, avatars */
    
    /* ========================================
       SHADOW TOKENS
       ======================================== */
    
    --shadow-sm: 0 2px 6px rgba(16, 37, 66, 0.1);
    --shadow-md: 0 4px 12px rgba(16, 37, 66, 0.15);
    --shadow-lg: 0 8px 24px rgba(16, 37, 66, 0.2);
    
    /* ========================================
       TRANSITION TOKENS
       ======================================== */
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
}