/**
 * IMT Tracker Design System - CSS Variables
 * Design tokens extracted from HTML mockups
 */

:root {
    /* =============================================
       COLORS - Core Palette
       ============================================= */
    --ink: #0a0a0a;
    --paper: #f7f6f3;
    --paper-warm: #ebe8e1;

    /* =============================================
       COLORS - Brand/Action
       ============================================= */
    --accent: #c45a3b;
    --accent-hover: #a84830;

    /* =============================================
       COLORS - Semantic
       ============================================= */
    --muted: #6b6560;
    --border: #d4d0c8;
    --border-focus: #0a0a0a;

    /* Success (Station hours, approved) */
    --success: #2d7a4f;
    --success-light: #e8f5ed;

    /* Warning (Pending, draft) */
    --warning: #d4a72c;
    --warning-light: #fef9e7;
    --warning-text: #8a6d1b;

    /* Error (Rejected) */
    --error: #c43b3b;
    --error-light: #fde8e8;

    /* =============================================
       TYPOGRAPHY - Font Families
       ============================================= */
    --mono: 'DM Mono', monospace;
    --serif: 'Instrument Serif', serif;
    --sans: 'Outfit', sans-serif;

    /* =============================================
       TYPOGRAPHY - Font Sizes
       ============================================= */
    --text-xs: 9px;
    --text-sm: 11px;
    --text-base: 13px;
    --text-md: 14px;
    --text-lg: 15px;
    --text-xl: 16px;
    --text-2xl: 18px;
    --text-3xl: 20px;
    --text-4xl: 24px;
    --text-5xl: 36px;

    /* Mobile Touch-Friendly Sizes (16px+ prevents iOS zoom on focus) */
    --text-mobile-sm: 14px;
    --text-mobile-base: 16px;
    --text-mobile-lg: 18px;
    --text-mobile-input: 18px;

    /* =============================================
       TYPOGRAPHY - Font Weights
       ============================================= */
    --font-light: 300;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;

    /* =============================================
       SPACING
       ============================================= */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-2xl: 24px;
    --space-3xl: 32px;
    --space-4xl: 40px;

    /* =============================================
       LAYOUT
       ============================================= */
    --sidebar-width: 260px;
    --sidebar-collapsed: 70px;
    --mobile-max-width: 480px;
    --header-height: 60px;
    --bottom-bar-height: 80px;

    /* =============================================
       BORDER RADIUS
       ============================================= */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-full: 50%;

    /* =============================================
       SHADOWS
       ============================================= */
    --shadow-sm: 0 0 0 1px var(--accent);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 0 40px rgba(0, 0, 0, 0.1);

    /* =============================================
       TRANSITIONS
       ============================================= */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* =============================================
       Z-INDEX LAYERS
       ============================================= */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 100;
    --z-modal: 1000;
}