/**
 * =============================================================================
 * CSS DESIGN TOKENS / VARIABLES
 * =============================================================================
 *
 * This file contains all CSS custom properties (variables) for the Digital Pass
 * Management System. Use these variables throughout all stylesheets to ensure
 * consistent styling across the entire application.
 *
 * USAGE: var(--variable-name)
 * Example: background-color: var(--color-primary);
 *
 * BENEFITS:
 * - Single source of truth for all design values
 * - Easy theme changes (just update this file)
 * - Consistent look and feel across all pages
 * - Reduced CSS duplication
 *
 * Created: 2026-01-30
 * =============================================================================
 */

:root {
    /* =========================================================================
     * COLOR PALETTE
     * ========================================================================= */

    /* Primary Brand Colors */
    --color-primary: #1b3e56;           /* Navy blue - main brand color */
    --color-primary-hover: #749bb3;     /* Light blue - hover states */
    --color-primary-light: #e6f7ff;     /* Very light blue - highlights, selected rows */

    /* Secondary/Accent Colors */
    --color-accent: #3498db;            /* Bright blue - accents, spinners */
    --color-accent-dark: #2980b9;       /* Darker blue - links, interactive elements */

    /* Status Colors - Success */
    --color-success: #4CAF50;           /* Green - success states, progress bars */
    --color-success-dark: #28a745;      /* Darker green - success buttons */
    --color-success-light: #d1f7c4;     /* Light green - success backgrounds */
    --color-success-bg: #d1e7dd;        /* Success alert background */

    /* Status Colors - Error/Danger */
    --color-error: #dc3545;             /* Red - error states, delete buttons */
    --color-error-dark: #B71C1C;        /* Dark red - rejected items */
    --color-error-light: #f8d7da;       /* Light red - error backgrounds */
    --color-error-text: #721c24;        /* Error text color */

    /* Status Colors - Warning */
    --color-warning: #ffc107;           /* Yellow - warning states */
    --color-warning-light: #fff3cd;     /* Light yellow - warning backgrounds */
    --color-warning-text: #856404;      /* Warning text color */

    /* Status Colors - Info */
    --color-info: #17a2b8;              /* Cyan - info states */
    --color-info-light: #e8f5ff;        /* Light blue - info backgrounds */

    /* Neutral Colors - Backgrounds */
    --color-white: #ffffff;
    --color-bg-page: #ffffff;           /* Page background */
    --color-bg-light: #f9f9f9;          /* Light background - cards, alternating rows */
    --color-bg-lighter: #f3f3f3;        /* Lighter background - inputs, progress bars */
    --color-bg-medium: #f0f0f0;         /* Medium background - disabled states */
    --color-bg-dark: #e9ecef;           /* Dark background - hover states */
    --color-bg-overlay: rgba(0, 0, 0, 0.5);  /* Modal overlay */

    /* Neutral Colors - Text */
    --color-text-primary: #333333;      /* Primary text - headings, body */
    --color-text-secondary: #555555;    /* Secondary text - descriptions */
    --color-text-muted: #888888;        /* Muted text - placeholders, hints */
    --color-text-light: #666666;        /* Light text */
    --color-text-inverse: #ffffff;      /* Text on dark backgrounds */
    --color-text-black: #000000;        /* Pure black text */

    /* Neutral Colors - Borders */
    --color-border-light: #dddddd;      /* Light borders */
    --color-border-medium: #cccccc;     /* Medium borders */
    --color-border-dark: #999999;       /* Dark borders */
    --color-border-silver: silver;      /* Legacy silver borders */

    /* Special Purpose Colors */
    --color-link: #1b3e56;              /* Link color (matches primary) */
    --color-link-hover: #749bb3;        /* Link hover */
    --color-disabled: #6c757d;          /* Disabled elements */
    --color-highlight-row: #e6f7ff;     /* Highlighted table row */
    --color-alternate-row: #f9f9f9;     /* Alternating table row */

    /* =========================================================================
     * TYPOGRAPHY
     * ========================================================================= */

    /* Font Families */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
                        Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
                        'Helvetica Neue', sans-serif;
    --font-family-mono: 'Courier New', Courier, monospace;

    /* Font Sizes */
    --font-size-2xs: 9px;               /* Micro - sort arrows, tiny indicators */
    --font-size-xs: 10px;               /* Extra small - badges, labels */
    --font-size-11: 11px;               /* Compact UI - calendar events, tight tables */
    --font-size-sm: 12px;               /* Small - captions, helper text */
    --font-size-13: 13px;               /* Secondary text - badges, notes, dense UI */
    --font-size-base: 14px;             /* Base - body text */
    --font-size-15: 15px;               /* Relaxed body - instructions, form hints */
    --font-size-md: 16px;               /* Medium - emphasized text */
    --font-size-lg: 18px;               /* Large - subheadings */
    --font-size-xl: 20px;               /* Extra large - section titles */
    --font-size-2xl: 24px;              /* 2X large - page titles */
    --font-size-3xl: 32px;              /* 3X large - hero text */

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

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-snug: 1.4;            /* Slightly relaxed - compose inputs, bubbles */
    --line-height-normal: 1.5;
    --line-height-loose: 1.6;           /* Looser paragraphs - instructions, body copy */
    --line-height-relaxed: 1.75;

    /* =========================================================================
     * SPACING
     * ========================================================================= */

    /* Spacing Scale (consistent increments) */
    --spacing-0: 0;
    --spacing-1: 4px;                   /* Tight spacing */
    --spacing-2: 8px;                   /* Small spacing */
    --spacing-3: 12px;                  /* Medium-small spacing */
    --spacing-4: 16px;                  /* Medium spacing */
    --spacing-5: 20px;                  /* Medium-large spacing */
    --spacing-6: 24px;                  /* Large spacing */
    --spacing-7: 32px;                  /* Extra large spacing */
    --spacing-8: 40px;                  /* 2X large spacing */
    --spacing-9: 48px;                  /* 3X large spacing */
    --spacing-10: 64px;                 /* Huge spacing */

    /* Semantic Spacing */
    --spacing-xs: var(--spacing-1);     /* 4px */
    --spacing-sm: var(--spacing-2);     /* 8px */
    --spacing-md: var(--spacing-4);     /* 16px */
    --spacing-lg: var(--spacing-6);     /* 24px */
    --spacing-xl: var(--spacing-8);     /* 40px */

    /* =========================================================================
     * BORDERS & SHADOWS
     * ========================================================================= */

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 3px;                   /* Small radius - inputs, small buttons */
    --radius-md: 5px;                   /* Medium radius - buttons, cards */
    --radius-lg: 8px;                   /* Large radius - modals, dialogs */
    --radius-xl: 15px;                  /* Extra large radius - large cards */
    --radius-full: 50%;                 /* Full circle - avatars, badges */

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* Box Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.2);
    --shadow-lg: 5px 5px 10px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 10px 25px rgba(0, 0, 0, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-none: none;

    /* =========================================================================
     * LAYOUT & SIZING
     * ========================================================================= */

    /* Container Widths */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-full: 100%;

    /* Component Heights */
    --height-input: 40px;               /* Standard input height */
    --height-input-lg: 50px;            /* Large input height */
    --height-button: 40px;              /* Standard button height */
    --height-button-lg: 50px;           /* Large button height */

    /* Z-Index Scale */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* =========================================================================
     * TRANSITIONS & ANIMATIONS
     * ========================================================================= */

    /* Transition Durations */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;

    /* Transition Easings */
    --ease-in: ease-in;
    --ease-out: ease-out;
    --ease-in-out: ease-in-out;

    /* Common Transitions */
    --transition-color: color var(--transition-normal) var(--ease-in-out);
    --transition-bg: background-color var(--transition-normal) var(--ease-in-out);
    --transition-all: all var(--transition-normal) var(--ease-in-out);

    /* =========================================================================
     * COMPONENT-SPECIFIC TOKENS
     * ========================================================================= */

    /* Buttons */
    --btn-padding-x: var(--spacing-4);
    --btn-padding-y: var(--spacing-2);
    --btn-font-size: var(--font-size-base);
    --btn-border-radius: var(--radius-md);
    --btn-min-width: 120px;

    /* Forms */
    --input-padding-x: var(--spacing-3);
    --input-padding-y: var(--spacing-2);
    --input-border-color: var(--color-border-medium);
    --input-border-radius: var(--radius-sm);
    --input-focus-border-color: var(--color-primary);
    --input-placeholder-color: var(--color-text-muted);

    /* Tables */
    --table-border-color: var(--color-border-silver);
    --table-header-bg: var(--color-bg-light);
    --table-stripe-bg: var(--color-alternate-row);
    --table-hover-bg: var(--color-highlight-row);

    /* Cards */
    --card-bg: var(--color-white);
    --card-border-color: var(--color-border-silver);
    --card-border-radius: var(--radius-xl);
    --card-shadow: var(--shadow-lg);
    --card-padding: var(--spacing-5);

    /* Navigation */
    --nav-bg: var(--color-primary);
    --nav-text: var(--color-text-inverse);
    --nav-height: 60px;
    --nav-padding: var(--spacing-4);

    /* Modals/Dialogs */
    --modal-bg: var(--color-white);
    --modal-border-radius: var(--radius-lg);
    --modal-shadow: var(--shadow-xl);
    --modal-padding: var(--spacing-5);
}

/* =============================================================================
 * DARK MODE SUPPORT (Future Enhancement)
 * =============================================================================
 * Uncomment and customize when ready to implement dark mode
 *
 * @media (prefers-color-scheme: dark) {
 *     :root {
 *         --color-bg-page: #1a1a2e;
 *         --color-bg-light: #16213e;
 *         --color-text-primary: #eaeaea;
 *         --color-text-secondary: #b8b8b8;
 *     }
 * }
 */