/* ============================================
   CoralLedger Manager - Design Tokens
   Sprint 5: Design System Documentation

   This file defines CSS custom properties (design tokens)
   for consistent styling across the application.
   ============================================ */

:root {
    /* ===========================================
       COLOR PALETTE
       CoralLedger brand colors optimized for
       Caribbean luxury aesthetic
       =========================================== */

    /* Primary Colors - Ocean/Teal */
    --cl-primary-50: #e0f7fa;
    --cl-primary-100: #b2ebf2;
    --cl-primary-200: #80deea;
    --cl-primary-300: #4dd0e1;
    --cl-primary-400: #26c6da;
    --cl-primary-500: #00B4D8;  /* Main primary */
    --cl-primary-600: #00a0c2;
    --cl-primary-700: #008ba8;
    --cl-primary-800: #006d84;
    --cl-primary-900: #004d5f;

    /* Secondary Colors - Deep Navy */
    --cl-secondary-50: #e3e8ed;
    --cl-secondary-100: #b8c5d3;
    --cl-secondary-200: #8a9fb6;
    --cl-secondary-300: #5c7999;
    --cl-secondary-400: #3a5d84;
    --cl-secondary-500: #003566;  /* Main secondary */
    --cl-secondary-600: #002f5c;
    --cl-secondary-700: #002750;
    --cl-secondary-800: #001f44;
    --cl-secondary-900: #001d3d;  /* Darkest */

    /* Accent Colors - Coral/Gold */
    --cl-accent-coral: #FF6B6B;
    --cl-accent-gold: #FFD700;
    --cl-accent-teal: #48cae4;
    --cl-accent-mint: #4ECDC4;

    /* Semantic Colors */
    --cl-success-50: #e8f5e9;
    --cl-success-100: #c8e6c9;
    --cl-success-200: #a5d6a7;
    --cl-success-500: #4CAF50;
    --cl-success-700: #388E3C;
    --cl-success-900: #1B5E20;

    --cl-warning-50: #fff8e1;
    --cl-warning-100: #ffecb3;
    --cl-warning-200: #ffe082;
    --cl-warning-500: #FF9800;
    --cl-warning-700: #F57C00;
    --cl-warning-900: #E65100;

    --cl-error-50: #ffebee;
    --cl-error-100: #ffcdd2;
    --cl-error-200: #ef9a9a;
    --cl-error-500: #F44336;
    --cl-error-700: #D32F2F;
    --cl-error-900: #B71C1C;

    --cl-info-50: #e3f2fd;
    --cl-info-100: #bbdefb;
    --cl-info-200: #90caf9;
    --cl-info-500: #2196F3;
    --cl-info-700: #1976D2;
    --cl-info-900: #0D47A1;

    /* Neutral Colors */
    --cl-neutral-50: #fafafa;
    --cl-neutral-100: #f5f5f5;
    --cl-neutral-200: #eeeeee;
    --cl-neutral-300: #e0e0e0;
    --cl-neutral-400: #bdbdbd;
    --cl-neutral-500: #9e9e9e;
    --cl-neutral-600: #757575;
    --cl-neutral-700: #616161;
    --cl-neutral-800: #424242;
    --cl-neutral-900: #212121;

    /* ===========================================
       TYPOGRAPHY
       =========================================== */

    /* Font Families */
    --cl-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --cl-font-secondary: 'Roboto', sans-serif;
    --cl-font-mono: 'Roboto Mono', 'SF Mono', 'Fira Code', monospace;
    --cl-font-display: 'Inter', sans-serif;

    /* Font Sizes (using modular scale 1.25) */
    --cl-text-xs: 0.64rem;     /* 10.24px */
    --cl-text-sm: 0.8rem;      /* 12.8px */
    --cl-text-base: 1rem;      /* 16px */
    --cl-text-md: 1.125rem;    /* 18px */
    --cl-text-lg: 1.25rem;     /* 20px */
    --cl-text-xl: 1.563rem;    /* 25px */
    --cl-text-2xl: 1.953rem;   /* 31.25px */
    --cl-text-3xl: 2.441rem;   /* 39px */
    --cl-text-4xl: 3.052rem;   /* 48.83px */

    /* Font Weights */
    --cl-weight-light: 300;
    --cl-weight-regular: 400;
    --cl-weight-medium: 500;
    --cl-weight-semibold: 600;
    --cl-weight-bold: 700;

    /* Line Heights */
    --cl-leading-none: 1;
    --cl-leading-tight: 1.25;
    --cl-leading-snug: 1.375;
    --cl-leading-normal: 1.5;
    --cl-leading-relaxed: 1.625;
    --cl-leading-loose: 2;

    /* Letter Spacing */
    --cl-tracking-tighter: -0.05em;
    --cl-tracking-tight: -0.025em;
    --cl-tracking-normal: 0;
    --cl-tracking-wide: 0.025em;
    --cl-tracking-wider: 0.05em;
    --cl-tracking-widest: 0.1em;

    /* ===========================================
       SPACING
       (4px base unit, following 8-point grid)
       =========================================== */

    --cl-space-0: 0;
    --cl-space-1: 0.25rem;   /* 4px */
    --cl-space-2: 0.5rem;    /* 8px */
    --cl-space-3: 0.75rem;   /* 12px */
    --cl-space-4: 1rem;      /* 16px */
    --cl-space-5: 1.25rem;   /* 20px */
    --cl-space-6: 1.5rem;    /* 24px */
    --cl-space-8: 2rem;      /* 32px */
    --cl-space-10: 2.5rem;   /* 40px */
    --cl-space-12: 3rem;     /* 48px */
    --cl-space-16: 4rem;     /* 64px */
    --cl-space-20: 5rem;     /* 80px */
    --cl-space-24: 6rem;     /* 96px */

    /* ===========================================
       LAYOUT
       =========================================== */

    /* Container Widths */
    --cl-container-sm: 640px;
    --cl-container-md: 768px;
    --cl-container-lg: 1024px;
    --cl-container-xl: 1280px;
    --cl-container-2xl: 1536px;

    /* Sidebar */
    --cl-sidebar-width: 280px;
    --cl-sidebar-collapsed: 64px;

    /* Header */
    --cl-header-height: 64px;
    --cl-header-height-mobile: 56px;

    /* Bottom Navigation */
    --cl-bottom-nav-height: 56px;

    /* ===========================================
       BORDERS & RADIUS
       =========================================== */

    /* Border Widths */
    --cl-border-0: 0;
    --cl-border-1: 1px;
    --cl-border-2: 2px;
    --cl-border-4: 4px;
    --cl-border-8: 8px;

    /* Border Radius */
    --cl-radius-none: 0;
    --cl-radius-sm: 0.125rem;  /* 2px */
    --cl-radius-md: 0.25rem;   /* 4px */
    --cl-radius-lg: 0.5rem;    /* 8px */
    --cl-radius-xl: 0.75rem;   /* 12px */
    --cl-radius-2xl: 1rem;     /* 16px */
    --cl-radius-3xl: 1.5rem;   /* 24px */
    --cl-radius-full: 9999px;

    /* ===========================================
       SHADOWS
       =========================================== */

    --cl-shadow-none: none;
    --cl-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --cl-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --cl-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --cl-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --cl-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --cl-shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

    /* Elevation (Material Design-like) */
    --cl-elevation-0: none;
    --cl-elevation-1: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
    --cl-elevation-2: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
    --cl-elevation-3: 0 3px 3px -2px rgba(0,0,0,.2), 0 3px 4px 0 rgba(0,0,0,.14), 0 1px 8px 0 rgba(0,0,0,.12);
    --cl-elevation-4: 0 2px 4px -1px rgba(0,0,0,.2), 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12);
    --cl-elevation-6: 0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
    --cl-elevation-8: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12);

    /* ===========================================
       TRANSITIONS & ANIMATIONS
       =========================================== */

    /* Duration */
    --cl-duration-75: 75ms;
    --cl-duration-100: 100ms;
    --cl-duration-150: 150ms;
    --cl-duration-200: 200ms;
    --cl-duration-300: 300ms;
    --cl-duration-500: 500ms;
    --cl-duration-700: 700ms;
    --cl-duration-1000: 1000ms;

    /* Timing Functions */
    --cl-ease-linear: linear;
    --cl-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --cl-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --cl-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --cl-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Common Transitions */
    --cl-transition-colors: color var(--cl-duration-150) var(--cl-ease-in-out),
                            background-color var(--cl-duration-150) var(--cl-ease-in-out),
                            border-color var(--cl-duration-150) var(--cl-ease-in-out);
    --cl-transition-opacity: opacity var(--cl-duration-150) var(--cl-ease-in-out);
    --cl-transition-shadow: box-shadow var(--cl-duration-150) var(--cl-ease-in-out);
    --cl-transition-transform: transform var(--cl-duration-150) var(--cl-ease-in-out);
    --cl-transition-all: all var(--cl-duration-150) var(--cl-ease-in-out);

    /* ===========================================
       Z-INDEX SCALE
       =========================================== */

    --cl-z-dropdown: 1000;
    --cl-z-sticky: 1020;
    --cl-z-fixed: 1030;
    --cl-z-modal-backdrop: 1040;
    --cl-z-modal: 1050;
    --cl-z-popover: 1060;
    --cl-z-tooltip: 1070;
    --cl-z-toast: 1080;

    /* ===========================================
       COMPONENT-SPECIFIC TOKENS
       =========================================== */

    /* Cards */
    --cl-card-bg: var(--cl-neutral-50);
    --cl-card-border: var(--cl-neutral-200);
    --cl-card-shadow: var(--cl-elevation-2);
    --cl-card-radius: var(--cl-radius-xl);

    /* Buttons */
    --cl-btn-radius: var(--cl-radius-lg);
    --cl-btn-padding-x: var(--cl-space-4);
    --cl-btn-padding-y: var(--cl-space-2);
    --cl-btn-font-weight: var(--cl-weight-medium);

    /* Inputs */
    --cl-input-radius: var(--cl-radius-lg);
    --cl-input-border: var(--cl-neutral-300);
    --cl-input-focus-ring: var(--cl-primary-500);
    --cl-input-placeholder: var(--cl-neutral-500);

    /* Tables */
    --cl-table-header-bg: var(--cl-neutral-100);
    --cl-table-row-hover: var(--cl-primary-50);
    --cl-table-border: var(--cl-neutral-200);

    /* Navigation */
    --cl-nav-item-hover: var(--cl-primary-50);
    --cl-nav-item-active: var(--cl-primary-100);
    --cl-nav-item-active-border: var(--cl-primary-500);
}

/* ===========================================
   DARK MODE TOKENS
   =========================================== */

[data-theme="dark"],
.mud-theme-dark {
    --cl-primary-500: #4dd0e1;
    --cl-secondary-500: #90caf9;

    --cl-neutral-50: #121212;
    --cl-neutral-100: #1e1e1e;
    --cl-neutral-200: #2d2d2d;
    --cl-neutral-300: #424242;
    --cl-neutral-400: #616161;
    --cl-neutral-500: #9e9e9e;
    --cl-neutral-600: #bdbdbd;
    --cl-neutral-700: #e0e0e0;
    --cl-neutral-800: #f5f5f5;
    --cl-neutral-900: #fafafa;

    /* Component overrides for dark mode */
    --cl-card-bg: var(--cl-neutral-100);
    --cl-card-border: var(--cl-neutral-300);

    --cl-input-border: var(--cl-neutral-400);
    --cl-input-placeholder: var(--cl-neutral-500);

    --cl-table-header-bg: var(--cl-neutral-200);
    --cl-table-row-hover: rgba(77, 208, 225, 0.1);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Text colors */
.text-primary { color: var(--cl-primary-500); }
.text-secondary { color: var(--cl-secondary-500); }
.text-success { color: var(--cl-success-500); }
.text-warning { color: var(--cl-warning-500); }
.text-error { color: var(--cl-error-500); }
.text-info { color: var(--cl-info-500); }

/* Background colors */
.bg-primary { background-color: var(--cl-primary-500); }
.bg-secondary { background-color: var(--cl-secondary-500); }
.bg-success { background-color: var(--cl-success-500); }
.bg-warning { background-color: var(--cl-warning-500); }
.bg-error { background-color: var(--cl-error-500); }
.bg-info { background-color: var(--cl-info-500); }

/* Gradients */
.gradient-primary {
    background: linear-gradient(135deg, var(--cl-primary-500), var(--cl-accent-teal));
}

.gradient-secondary {
    background: linear-gradient(135deg, var(--cl-secondary-500), var(--cl-secondary-900));
}

.gradient-coral {
    background: linear-gradient(135deg, var(--cl-accent-coral), var(--cl-accent-gold));
}