/**
 * Base CSS - Design System
 * Dark theme with cyan accent - adapted from mockup designs
 * CSS custom properties for theming
 */

/* CSS Custom Properties (Design Tokens) */
:root {
    /* Colors - Dark theme (from mockup design system) */
    --color-bg-primary: #101f22;      /* background-dark - deep dark teal */
    --color-bg-secondary: #16282c;    /* card-dark / surface-dark */
    --color-bg-tertiary: #1c3236;     /* surface-dark variant */
    --color-bg-elevated: #162a2e;     /* panel-dark */
    --color-bg-deep: #0b1618;         /* surface-darker - for inputs */
    --color-bg-light: #f6f8f8;        /* background-light - for light mode */
    --color-border: rgba(43, 205, 238, 0.1);  /* primary with low opacity */
    --color-border-hover: rgba(43, 205, 238, 0.3);
    --color-border-solid: #1c353a;    /* solid border color */

    /* Text colors */
    --color-text-primary: #e7e7ea;
    --color-text-secondary: #9aa0b3;
    --color-text-muted: #5c6178;
    --color-text-on-light: #1a1a1a;   /* text on light backgrounds */

    /* Accent colors (from mockup) */
    --color-accent-primary: #2bcdee;  /* primary cyan */
    --color-accent-hover: #5ddbf2;    /* lighter cyan for hover */
    --color-accent-cyan: #2bcdee;     /* same as primary */
    --color-accent-magenta: #ee2bcd;  /* accent-magenta */

    /* Status colors */
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-warning: #ff9800;
    --color-info: #2bcdee;

    /* Role colors (from admin mockup) */
    --color-role-admin: #a855f7;      /* purple */
    --color-role-editor: #3b82f6;     /* blue */
    --color-role-viewer: #6b7280;     /* gray */

    /* Typography (from mockup) */
    --font-ui: 'Space Grotesk', 'Inter', 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Space Grotesk', sans-serif;
    --font-code: 'JetBrains Mono', 'Space Mono', 'Fira Code', 'Consolas', 'Monaco', 'Courier New', monospace;

    /* Font sizes */
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 32px;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Spacing (8px grid) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Borders */
    --border-radius-sm: 4px;
    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 15px rgba(43, 205, 238, 0.15);
    --shadow-glow-strong: 0 0 20px rgba(43, 205, 238, 0.4);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 250ms ease;
    --transition-slow: 350ms ease;

    /* Z-index layers */
    --z-base: 0;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-fixed: 30;
    --z-modal-backdrop: 40;
    --z-modal: 50;
    --z-popover: 60;
    --z-tooltip: 70;
}

/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Base styles */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    line-height: 1.5;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: var(--font-size-3xl);
    letter-spacing: -0.02em;
}

h2 {
    font-size: var(--font-size-2xl);
    letter-spacing: -0.01em;
}

h3 {
    font-size: var(--font-size-xl);
}

h4 {
    font-size: var(--font-size-lg);
}

/* Code and monospace */
code, pre, .mono, .file-content {
    font-family: var(--font-code);
    font-size: var(--font-size-sm);
}

/* Links */
a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-accent-hover);
}

/* Selection */
::selection {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

::-moz-selection {
    background: var(--color-accent-primary);
    color: var(--color-bg-primary);
}

/* Scrollbar (webkit) - matches mockup design */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
    background: rgba(43, 205, 238, 0.2);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-primary);
}

/* ============================================
   Utility Classes
   ============================================ */

/* Display */
.hidden { display: none !important; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-primary { color: var(--color-text-primary); }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-accent { color: var(--color-accent-primary); }
.text-magenta { color: var(--color-accent-magenta); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-mono { font-family: var(--font-code); }
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: 0.05em; }
.tracking-wider { letter-spacing: 0.1em; }

/* Spacing */
.m-0 { margin: 0; }
.m-xs { margin: var(--space-xs); }
.m-sm { margin: var(--space-sm); }
.m-md { margin: var(--space-md); }
.m-lg { margin: var(--space-lg); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.ml-xs { margin-left: var(--space-xs); }
.ml-sm { margin-left: var(--space-sm); }
.ml-md { margin-left: var(--space-md); }
.mr-xs { margin-right: var(--space-xs); }
.mr-sm { margin-right: var(--space-sm); }
.mr-md { margin-right: var(--space-md); }
.p-0 { padding: 0; }
.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }

/* Background */
.bg-primary { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-tertiary { background-color: var(--color-bg-tertiary); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-deep { background-color: var(--color-bg-deep); }
.bg-accent { background-color: var(--color-accent-primary); }
.bg-accent-10 { background-color: rgba(43, 205, 238, 0.1); }
.bg-accent-20 { background-color: rgba(43, 205, 238, 0.2); }
.bg-magenta { background-color: var(--color-accent-magenta); }
.bg-magenta-10 { background-color: rgba(238, 43, 205, 0.1); }

/* Border */
.border { border: 1px solid var(--color-border-solid); }
.border-accent { border-color: var(--color-accent-primary); }
.border-sm { border-radius: var(--border-radius-sm); }
.border-md { border-radius: var(--border-radius); }
.border-lg { border-radius: var(--border-radius-lg); }
.border-xl { border-radius: var(--border-radius-xl); }
.border-full { border-radius: var(--border-radius-full); }

/* Width/Height */
.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.overflow-y-auto { overflow-y: auto; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }

/* Cursor */
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }
.cursor-grabbing { cursor: grabbing; }

/* Transitions */
.transition { transition: all var(--transition); }
.transition-fast { transition: all var(--transition-fast); }
.transition-colors { transition: color var(--transition), background-color var(--transition), border-color var(--transition); }

/* Shadows */
.shadow { box-shadow: var(--shadow); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-glow { box-shadow: var(--shadow-glow); }
.shadow-glow-strong { box-shadow: var(--shadow-glow-strong); }

/* Opacity */
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-75 { opacity: 0.75; }
.opacity-100 { opacity: 1; }

/* Z-index */
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }

/* ============================================
   Material Icons Support
   ============================================ */
.material-icons,
.material-icons-outlined,
.material-icons-round {
    font-size: inherit;
    line-height: 1;
    vertical-align: middle;
}

/* Size variants - Material Icons are optimized for these sizes */
.material-icons.text-xs,
.material-icons-outlined.text-xs,
.material-icons-round.text-xs { font-size: 18px; }

.material-icons.text-sm,
.material-icons-outlined.text-sm,
.material-icons-round.text-sm { font-size: 18px; }

.material-icons.text-base,
.material-icons-outlined.text-base,
.material-icons-round.text-base { font-size: 20px; }

.material-icons.text-lg,
.material-icons-outlined.text-lg,
.material-icons-round.text-lg { font-size: 24px; }

.material-icons.text-xl,
.material-icons-outlined.text-xl,
.material-icons-round.text-xl { font-size: 24px; }

.material-icons.text-2xl,
.material-icons-outlined.text-2xl,
.material-icons-round.text-2xl { font-size: 36px; }

.material-icons.text-3xl,
.material-icons-outlined.text-3xl,
.material-icons-round.text-3xl { font-size: 48px; }

/* Legacy size classes */
.material-icons.icon-sm { font-size: 18px; }
.material-icons.icon-md { font-size: 20px; }
.material-icons.icon-lg { font-size: 24px; }
.material-icons.icon-xl { font-size: 36px; }

/* ============================================
   Glass Panel Effect (from mood board mockup)
   ============================================ */
.glass-panel {
    background: rgba(16, 31, 34, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(43, 205, 238, 0.1);
}

/* ============================================
   Grid Pattern Background (from mood board)
   ============================================ */
.grid-pattern {
    background-image: radial-gradient(circle, rgba(43, 205, 238, 0.1) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* ============================================
   Responsive Breakpoints
   ============================================ */

/* Tablet and below (768px and smaller) */
@media (max-width: 768px) {
    :root {
        /* Slightly smaller font sizes for mobile */
        --font-size-xs: 10px;
        --font-size-sm: 11px;
        --font-size-base: 13px;
        --font-size-lg: 15px;
        --font-size-xl: 18px;
        --font-size-2xl: 20px;
        --font-size-3xl: 26px;
        
        /* Tighter spacing for mobile */
        --space-xs: 2px;
        --space-sm: 4px;
        --space-md: 12px;
        --space-lg: 16px;
        --space-xl: 24px;
        --space-2xl: 32px;
    }
    
    /* Hide on mobile */
    .hidden-mobile { display: none !important; }
    
    /* Show only on mobile */
    .show-mobile { display: block !important; }
    .show-mobile-flex { display: flex !important; }
    
    /* Full width on mobile */
    .w-full-mobile { width: 100% !important; }
    
    /* Stack flex items */
    .flex-col-mobile { flex-direction: column !important; }
    
    /* Reduce padding on mobile */
    .p-mobile-sm { padding: var(--space-sm) !important; }
    .p-mobile-md { padding: var(--space-md) !important; }
    
    /* Reduce gaps on mobile */
    .gap-mobile-sm { gap: var(--space-sm) !important; }
    .gap-mobile-md { gap: var(--space-md) !important; }
}

/* Desktop only (above 768px) */
@media (min-width: 769px) {
    .hidden-desktop { display: none !important; }
}

/* Touch target sizing - minimum 44px for mobile */
@media (max-width: 768px) {
    .btn,
    .sidebar-nav-item,
    .toolbar-btn,
    .file-header,
    .folder-header,
    .dropdown-item,
    .tab {
        min-height: 44px;
    }
    
    .btn-icon {
        min-width: 44px;
        min-height: 44px;
    }
}