/* =============================================================
 * File: assets/css/main.css
 * Purpose: Base styles and design tokens for the ESIMS application.
 *
 * This file defines:
 *   1. CSS custom properties (design tokens) for consistent theming.
 *   2. Base reset and typography styles.
 *   3. Core element styles (body, links, headings, etc.).
 *
 * The design follows a clean, professional aesthetic with a
 * warm-neutral color palette suitable for industrial/workshop use.
 * ============================================================= */

/* ---------------------------------------------------------
 * DESIGN TOKENS (CSS Custom Properties)
 * --------------------------------------------------------- */
:root {
    /* ---- Color Palette ---- */
    --color-primary:       #2B6CB0;   /* Main brand blue */
    --color-primary-dark:  #1A4F8B;   /* Darker shade for hover states */
    --color-primary-light: #EBF4FF;   /* Light tint for backgrounds */

    --color-success:       #2F855A;   /* Green — for positive actions */
    --color-success-light: #F0FFF4;
    --color-warning:       #D69E2E;   /* Amber — for warnings */
    --color-warning-light: #FFFBEB;
    --color-danger:        #C53030;   /* Red — for errors/destructive actions */
    --color-danger-light:  #FFF5F5;
    --color-info:          #3182CE;   /* Blue — for informational states */
    --color-info-light:    #EBF8FF;

    /* ---- Neutral Palette ---- */
    --color-bg:            #F5F4F0;   /* Main page background */
    --color-bg-alt:        #EDEDE8;   /* Alternate/section background */
    --color-surface:       #FFFFFF;   /* Card/surface background */
    --color-border:        #D4D4D0;   /* Border color */
    --color-border-light:  #E8E8E4;   /* Lighter border */

    /* ---- Text Colors ---- */
    --color-text:          #1A1A18;   /* Primary text */
    --color-text-secondary: #5F5E5A;  /* Secondary/subtle text */
    --color-text-muted:    #8F8E8A;   /* Muted/disabled text */

    /* ---- Typography ---- */
    --font-family:         'Inter', -apple-system, BlinkMacSystemFont,
                           'Segoe UI', Roboto, system-ui, sans-serif;
    --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas',
                           'Courier New', monospace;

    --font-size-xs:        0.75rem;    /* 12px */
    --font-size-sm:        0.8125rem;  /* 13px */
    --font-size-base:      0.875rem;   /* 14px */
    --font-size-lg:        1rem;       /* 16px */
    --font-size-xl:        1.25rem;    /* 20px */
    --font-size-2xl:       1.5rem;     /* 24px */
    --font-size-3xl:       2rem;       /* 32px */

    --line-height:         1.6;
    --line-height-tight:   1.25;

    /* ---- Spacing ---- */
    --space-xs:            0.25rem;   /* 4px */
    --space-sm:            0.5rem;    /* 8px */
    --space-md:            1rem;      /* 16px */
    --space-lg:            1.5rem;    /* 24px */
    --space-xl:            2rem;      /* 32px */
    --space-2xl:           3rem;      /* 48px */

    /* ---- Layout ---- */
    --sidebar-width:       240px;
    --topbar-height:       56px;
    --border-radius:       8px;
    --border-radius-sm:    4px;
    --border-radius-lg:    12px;

    /* ---- Shadows ---- */
    --shadow-sm:           0 1px 2px rgba(0,0,0,0.06);
    --shadow-md:           0 2px 8px rgba(0,0,0,0.08);
    --shadow-lg:           0 4px 16px rgba(0,0,0,0.1);

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

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

/* ---------------------------------------------------------
 * BASE STYLES
 * --------------------------------------------------------- */
html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height);
    color: var(--color-text);
    background-color: var(--color-bg);
    min-height: 100vh;
}

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

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

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
    line-height: var(--line-height-tight);
    font-weight: 600;
    color: var(--color-text);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }

/* ---- Code / Mono ---- */
code {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background: var(--color-bg-alt);
    padding: 0.125rem 0.375rem;
    border-radius: var(--border-radius-sm);
}

/* ---- Images ---- */
img {
    max-width: 100%;
    height: auto;
}

/* ---- Horizontal Rule ---- */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-lg) 0;
}

/* ---- Utility Classes ---- */
.text-muted { color: var(--color-text-secondary); }
.text-nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.required {
    color: var(--color-danger);
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: var(--space-2xl) var(--space-md);
    color: var(--color-text-secondary);
}

.empty-state p {
    margin-bottom: var(--space-md);
}