/**
 * Bchecklist - Design Tokens
 * Color Theme: White background, Dark Cyan panels/buttons, Black text
 */

:root {
    /* 1. Core Colors */
    --color-bg: #ffffff;
    --color-surface: #f9fbfb;
    --color-surface-hover: #f0f7f7;
    --color-border: #d4e8e8;
    --color-border-subtle: #e6f2f2;
    
    /* 2. Brand Primary - Dark Cyan */
    --color-primary: #008B8B;
    --color-primary-dark: #006666;
    --color-primary-hover: #007a7a;
    --color-primary-light: #e6f7f7;
    --color-primary-focus: rgba(0, 139, 139, 0.25);

    /* 3. Typography & Text */
    --color-text: #111111;
    --color-text-secondary: #333333;
    --color-text-muted: #555555;
    --color-text-inverted: #ffffff;
    
    /* 4. Semantic / Status */
    --color-success: #1b7a3a;
    --color-success-light: #eaf6ed;
    --color-warning: #b45309;
    --color-warning-light: #fef3c7;
    --color-danger: #b91c1c;
    --color-danger-light: #fee2e2;
    --color-info: #0284c7;
    --color-info-light: #e0f2fe;

    /* 5. Left Panel Theme */
    --panel-left-width: 260px;
    --panel-left-collapsed-width: 72px;
    --panel-left-bg: #004d4d;
    --panel-left-bg-hover: #005c5c;
    --panel-left-text: #e0f2f1;
    --panel-left-text-active: #ffffff;
    --panel-left-active-bg: #008B8B;
    --panel-left-border: #003a3a;

    /* 6. Typography Scale */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px - minimum body */
    --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 */

    /* 7. Spacing Grid (8px base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* 8. Radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-card: 12px;
    --radius-pill: 9999px;

    /* 9. Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 8px rgba(0, 77, 77, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 25px rgba(0, 77, 77, 0.12), 0 4px 10px rgba(0, 0, 0, 0.05);

    /* 10. Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.25s ease-in-out;
}