/* Stopped Clocks - Design System Variables */
/* Version: 2.0 - Contemporary Redesign Foundation */

/* Import Professional Typography */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    /* ===== CONTEMPORARY COLOUR PALETTE ===== */
    
    /* New Contemporary Foundation */
    --color-navy: #1e3a8a;           /* Deep navy for authority and trust */
    --color-charcoal-new: #1f2937;   /* Modern charcoal for primary text */
    --color-teal: #0f766e;           /* Teal accent for modern feel */
    --color-orange: #ea580c;         /* Muted orange for warmth and action */
    --color-slate-new: #374151;      /* Modern slate for secondary text */
    --color-gray-new: #6b7280;       /* Contemporary gray for muted text */
    --color-light-gray: #f3f4f6;     /* Light gray for backgrounds */
    --color-off-white: #fafafa;      /* Warm off-white for page backgrounds */
    
    /* Core Grays - Enhanced Foundation */
    --color-charcoal: var(--color-charcoal-new);        /* Primary text, deep accents */
    --color-slate: var(--color-slate-new);               /* Secondary text, headings */
    --color-steel: var(--color-gray-new);                /* Tertiary text, borders */
    --color-silver: #9ca3af;                             /* Muted text, icons */
    --color-pewter: #d1d5db;                             /* Light borders, dividers */
    --color-ash: var(--color-light-gray);                /* Backgrounds, cards */
    --color-porcelain: var(--color-off-white);           /* Page backgrounds */
    --color-white: #ffffff;                              /* Pure white */
    
    /* Heritage Accents - Refined for Modern Use */
    --color-brass: #d97706;           /* Primary actions, highlights (refined) */
    --color-copper: #b45309;          /* Secondary actions, links (refined) */
    --color-bronze: #92400e;          /* Tertiary elements, warnings (refined) */
    
    /* Status Colours - Enhanced for Better Accessibility */
    --color-success: #059669;         /* Success states (brighter green) */
    --color-warning: var(--color-orange); /* Warning states (using new orange) */
    --color-error: #dc2626;           /* Error states (brighter red) */
    
    /* ===== ENHANCED DESIGN TOKENS ===== */
    
    /* New Radius System for Modern UI */
    --radius-pill: 9999px;           /* Pill-shaped buttons and inputs */
    --radius-2xl: 1rem;              /* Large containers and hero sections */
    --radius-xl: 0.75rem;            /* Large cards and sections */
    --radius-lg: 0.5rem;             /* Cards and containers */
    --radius-md: 0.375rem;           /* Buttons and small elements */
    --radius-sm: 0.25rem;            /* Small elements and inputs */
    
    /* Enhanced Shadow System */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
    
    /* Enhanced Transitions for Smooth Interactions */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ===== TYPOGRAPHY SCALE ===== */
    
    /* Professional Font Stack */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    
    /* Type Scale (Modular Scale) */
    --text-xs: 0.75rem;      /* 12px - Captions, labels */
    --text-sm: 0.875rem;     /* 14px - Small text, metadata */
    --text-base: 1rem;       /* 16px - Body text */
    --text-lg: 1.125rem;     /* 18px - Large body, small headings */
    --text-xl: 1.25rem;      /* 20px - Subheadings */
    --text-2xl: 1.5rem;      /* 24px - Section headings */
    --text-3xl: 1.875rem;    /* 30px - Page titles */
    --text-4xl: 2.25rem;     /* 36px - Hero titles */
    
    /* ===== SPACING SYSTEM ===== */
    
    /* 8px Base Grid */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    
    /* ===== LAYOUT VARIABLES ===== */
    
    /* Sidebar Width - Responsive Design */
    --sidebar-width: clamp(300px, 33vw, 800px);
    
    /* ===== BREAKPOINTS ===== */
    
    /* Mobile-First Approach */
    --breakpoint-sm: 640px;   /* Small tablets */
    --breakpoint-md: 768px;   /* Tablets */
    --breakpoint-lg: 1024px;  /* Small desktops */
    --breakpoint-xl: 1280px;  /* Large desktops */
    --breakpoint-2xl: 1536px; /* Extra large screens */
    
    /* ===== Z-INDEX SCALE ===== */
    
    /* Consistent Layering */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ===== RESPONSIVE SIDEBAR WIDTHS ===== */
/* These override the base --sidebar-width for different breakpoints */

@media (max-width: 1200px) {
    :root {
        --sidebar-width: clamp(280px, 35vw, 500px);
    }
}

@media (max-width: 1024px) {
    :root {
        --sidebar-width: clamp(260px, 40vw, 450px);
    }
}

@media (max-width: 900px) {
    :root {
        --sidebar-width: clamp(280px, 50vw, 350px);
    }
}

@media (max-width: 768px) {
    :root {
        --sidebar-width: clamp(260px, 55vw, 320px);
    }
}

@media (max-width: 640px) {
    :root {
        --sidebar-width: clamp(240px, 60vw, 300px);
    }
}

@media (min-width: 1400px) {
    :root {
        --sidebar-width: clamp(400px, 30vw, 900px);
    }
}

@media (min-width: 1600px) {
    :root {
        --sidebar-width: clamp(500px, 28vw, 1000px);
    }
}

/* ===== LEGACY COLOUR MAPPING ===== */
/* Temporary mapping for gradual migration */

:root {
    /* Map old colours to new system for backward compatibility */
    --color-primary: var(--color-navy);
    --color-secondary: var(--color-teal);
    --color-success-old: var(--color-success);
    --color-warning-old: var(--color-warning);
    --color-danger: var(--color-error);
    --color-info: var(--color-steel);
    
    /* Map old text colours */
    --text-primary: var(--color-charcoal);
    --text-secondary: var(--color-slate);
    --text-muted: var(--color-steel);
    --text-light: var(--color-silver);
    
    /* Map old background colours */
    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-porcelain);
    --bg-muted: var(--color-ash);
    --bg-dark: var(--color-charcoal);
}

/* ===== UTILITY CLASSES ===== */
/* Quick access to common design tokens */

/* New Contemporary Colors */
.text-navy { color: var(--color-navy); }
.text-teal { color: var(--color-teal); }
.text-orange { color: var(--color-orange); }
.text-charcoal-new { color: var(--color-charcoal-new); }

.bg-navy { background-color: var(--color-navy); }
.bg-teal { background-color: var(--color-teal); }
.bg-orange { background-color: var(--color-orange); }
.bg-off-white { background-color: var(--color-off-white); }

.border-navy { border-color: var(--color-navy); }
.border-teal { border-color: var(--color-teal); }
.border-orange { border-color: var(--color-orange); }

/* Legacy Color Support */
.text-charcoal { color: var(--color-charcoal); }
.text-slate { color: var(--color-slate); }
.text-steel { color: var(--color-steel); }
.text-silver { color: var(--color-silver); }
.text-brass { color: var(--color-brass); }
.text-copper { color: var(--color-copper); }

.bg-porcelain { background-color: var(--color-porcelain); }
.bg-ash { background-color: var(--color-ash); }
.bg-white { background-color: var(--color-white); }
.bg-brass { background-color: var(--color-brass); }

.border-ash { border-color: var(--color-ash); }
.border-pewter { border-color: var(--color-pewter); }
.border-brass { border-color: var(--color-brass); }

/* ===== ICON SYSTEM ===== */
/* Professional SVG icon styling */

.icon {
    display: inline-block;
    vertical-align: middle;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all var(--transition-normal);
}

.icon-search {
    width: 20px;
    height: 20px;
}

.icon-menu {
    width: 24px;
    height: 24px;
}

.icon-grid {
    width: 20px;
    height: 20px;
}

.icon-edit {
    width: 20px;
    height: 20px;
}

.icon-close {
    width: 20px;
    height: 20px;
}

/* Icon hover effects */
.icon:hover {
    transform: scale(1.1);
    stroke-width: 2.5;
}

/* Icon button styling */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
}

.icon-btn:hover {
    background: var(--color-ash);
    transform: translateY(-1px);
}