/* ============================================================
   ZENITHPOS - Design System (app.css)
   ============================================================ */

/* ----- CSS Custom Properties (Design Tokens) ----- */
:root {
    /* Brand Colors */
    --color-primary:        #4F46E5;   /* Indigo 600 */
    --color-primary-dark:   #4338CA;   /* Indigo 700 */
    --color-primary-light:  #818CF8;   /* Indigo 400 */
    --color-secondary:      #0EA5E9;   /* Sky 500 */
    --color-accent:         #F59E0B;   /* Amber 500 */

    /* Neutral */
    --color-gray-50:        #F9FAFB;
    --color-gray-100:       #F3F4F6;
    --color-gray-200:       #E5E7EB;
    --color-gray-300:       #D1D5DB;
    --color-gray-400:       #9CA3AF;
    --color-gray-500:       #6B7280;
    --color-gray-600:       #4B5563;
    --color-gray-700:       #374151;
    --color-gray-800:       #1F2937;
    --color-gray-900:       #111827;

    /* Semantic Colors */
    --color-success:        #10B981;
    --color-warning:        #F59E0B;
    --color-danger:         #EF4444;
    --color-info:           #3B82F6;

    /* Text */
    --text-primary:         var(--color-gray-900);
    --text-secondary:       var(--color-gray-600);
    --text-muted:           var(--color-gray-400);
    --text-inverse:         #FFFFFF;

    /* Background */
    --bg-body:              var(--color-gray-50);
    --bg-surface:           #FFFFFF;
    --bg-overlay:           rgba(0,0,0,0.5);

    /* Border */
    --border-color:         var(--color-gray-200);
    --border-color-focus:   var(--color-primary);
    --border-radius-sm:     0.375rem;   /* 6px */
    --border-radius:        0.5rem;     /* 8px */
    --border-radius-lg:     0.75rem;    /* 12px */
    --border-radius-xl:     1rem;       /* 16px */
    --border-radius-full:   9999px;

    /* Spacing */
    --spacing-1:  0.25rem;
    --spacing-2:  0.5rem;
    --spacing-3:  0.75rem;
    --spacing-4:  1rem;
    --spacing-5:  1.25rem;
    --spacing-6:  1.5rem;
    --spacing-8:  2rem;
    --spacing-10: 2.5rem;
    --spacing-12: 3rem;
    --spacing-16: 4rem;

    /* Typography */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-size-xs:         0.75rem;
    --font-size-sm:         0.875rem;
    --font-size-base:       1rem;
    --font-size-lg:         1.125rem;
    --font-size-xl:         1.25rem;
    --font-size-2xl:        1.5rem;
    --font-size-3xl:        1.875rem;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --line-height-tight:    1.25;
    --line-height-normal:   1.5;
    --line-height-relaxed:  1.75;

    /* Shadows */
    --shadow-sm:   0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow:      0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
    --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    --shadow-2xl:  0 25px 50px -12px rgba(0,0,0,0.25);

    /* Transitions */
    --transition-fast:    150ms ease;
    --transition-base:    200ms ease;
    --transition-slow:    300ms ease;

    /* Z-index */
    --z-dropdown:  1000;
    --z-sticky:    1020;
    --z-fixed:     1030;
    --z-modal:     1050;
    --z-tooltip:   1070;
}

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, svg {
    display: block;
    max-width: 100%;
}

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}

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

a:hover {
    color: var(--color-primary-dark);
}

/* ----- Utility Classes ----- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border-width: 0;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }

.text-sm  { font-size: var(--font-size-sm); }
.text-xs  { font-size: var(--font-size-xs); }
.text-lg  { font-size: var(--font-size-lg); }

.text-muted   { color: var(--text-secondary); }
.text-danger  { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-primary { color: var(--color-primary); }

.d-flex         { display: flex; }
.d-block        { display: block; }
.d-none         { display: none; }
.align-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between{ justify-content: space-between; }
.flex-col       { flex-direction: column; }
.gap-1  { gap: var(--spacing-1); }
.gap-2  { gap: var(--spacing-2); }
.gap-3  { gap: var(--spacing-3); }
.gap-4  { gap: var(--spacing-4); }

.w-full { width: 100%; }
.h-full { height: 100%; }

.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }

.p-4  { padding: var(--spacing-4); }
.p-6  { padding: var(--spacing-6); }
.p-8  { padding: var(--spacing-8); }

.rounded    { border-radius: var(--border-radius); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-xl { border-radius: var(--border-radius-xl); }
.rounded-full { border-radius: var(--border-radius-full); }

.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }