/**
 * CSS Variables - Rebelhorn-inspired Design System
 * Color scheme: Black, white, and accent colors
 */
/* Import Play font from local files (no external request) */
@import url('/themes/pilot/fonts/Play/play.css');

:root {
    /* Color Palette */
    --color-primary: #000000;
    --color-primary-dark: #0a0a0a;
    --color-secondary: #1a1a1a;
    --color-accent: #ff0000;
    --color-red: #ff0000;
    --color-text: #212529;
    --color-text-light: #495057;
    --color-text-muted: #6c757d;
    --color-text-dark: #000000;
    --color-border: #dee2e6;
    --color-white: #ffffff;
    --color-light-gray: #f8f9fa;
    --color-medium-gray: #e9ecef;
    --color-dark-gray: #343a40;
    --color-dark-nardo: #6c757d;
    --color-success: #28a745;
    --color-success-light: #d4edda;
    --color-warning: #ffc107;
    --color-warning-light: #fff3cd;
    --color-danger: #dc3545;
    --color-danger-light: #f8d7da;
    --color-info: #17a2b8;
    --color-info-light: #d1ecf1;
    --color-black: #000000;
    --color-primary-rgb: 0, 0, 0; /* RGB values of --color-primary */
    /* Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --bg-light: #f8f9fa;
    --bg-white: #ffffff;
    --bg-dark: #212529;
    --bg-accent: #ff0000;
    --bg-red: #ff0000;
    /* Typography */
    --font-family-base: 'Play', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-heading: 'Play', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 1rem; /* 16px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-21px: 1.3125rem;
    --font-size-28px: 1.75rem;
    --font-size-2xl: 24px;
    --font-size-3xl: 30px;
    --font-size-4xl: 36px;
    --font-size-5xl: 48px;
    --font-size-6xl: 60px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-base: 1.5;
    --line-height-heading: 1.2;
    --line-height-relaxed: 1.6;
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-xxl: 3rem;
    --spacing-xxxl: 4rem;
    /* Page spacing */
    --page-x-padding-xs: 0.5rem;
    --page-y-padding-xs: 0.5rem;
    --page-x-padding-sm: 1rem;
    --page-y-padding-sm: 1rem;
    --page-x-padding-md: 2.5rem;
    --page-y-padding-md: 2.5rem;
    /* Layout */
    --container-max-width: 1400px;
    --container-padding: 20px;
    --header-height: 80px;
    --mobile-header-height: 60px;
    /* Transitions */
    --transition-base: 0.3s ease;
    --transition-fast: 0.15s ease;
    --transition-slow: 0.5s ease;
    /* Borders */
    --border-radius-sm: 2px;
    --border-radius-md: 4px;
    --border-radius-lg: 8px;
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.18);
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    /* Currency selector z-index (above header, below modals) */
    --z-currency-selector: 1050;
    --z-currency-dropdown: 1051;
    /* Form Variables */
    --form-select-padding-y: 0.5rem;
    --form-select-padding-x: 0.75rem;
    --form-select-indicator-padding: 0.375rem;
    --form-select-font-size: 1rem;
    --input-line-height: 1.5;
    --input-color: var(--color-text);
    --form-select-bg: var(--color-white);
    --form-select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --form-select-bg-position: right 0.75rem center;
    --form-select-bg-size: 1.5rem;
    --input-border-width: 1px;
    --input-border-color: var(--color-border);
    --input-focus-border-color: var(--color-primary);
    --input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
    --input-disabled-bg: #e9ecef;
    --input-disabled-border-color: var(--color-border);
    --input-padding-y: 0.5rem;
    --input-padding-x: 0.75rem;
    --input-padding-y-sm: 0.25rem;
    --input-padding-x-sm: 0.5rem;
    --input-padding-y-lg: 0.75rem;
    --input-padding-x-lg: 1rem;
    --input-font-size-sm: 0.875rem;
    --input-font-size-lg: 1.125rem;
    --input-border-radius-sm: 2px;
    --input-border-radius-lg: 8px;
    --form-select-disabled-bg: #e9ecef;
    --form-select-disabled-border-color: var(--color-border);
    --font-size-lead: 1.25rem;

    /* Form Check (Checkbox/Radio) Variables */
    --form-check-min-height: 1.5rem;
    --form-check-padding-start: 1.75rem;
    --form-check-margin-bottom: 0.5rem;
    --form-check-input-width: 1.25rem;
    --form-check-input-bg: var(--color-white);
    --form-check-input-border: 1px solid var(--color-border);
    --form-check-input-border-radius: 0.25rem;
    --form-check-radio-border-radius: 50%;
    --form-check-input-focus-border: var(--color-primary);
    --form-check-input-focus-box-shadow: 0 0 0 0.25rem rgba(var(--color-primary-rgb), 0.25);
    --form-check-input-checked-bg-color: var(--color-primary);
    --form-check-input-checked-border-color: var(--color-primary);
    --form-check-input-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --form-check-radio-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
    --form-check-input-indeterminate-bg-color: var(--color-primary);
    --form-check-input-indeterminate-border-color: var(--color-primary);
    --form-check-input-indeterminate-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
    --form-check-label-color: var(--color-text);
    --form-check-label-cursor: pointer;

    /* Form Switch (Toggle) Variables */
    --form-switch-width: 2.5rem;
    --form-switch-padding-start: 3rem;
    --form-switch-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(0,0,0,0.25)'/%3e%3c/svg%3e");
    --form-switch-border-radius: 2rem;
    --form-switch-checked-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");

    /* Form Validation Variables */
    --form-feedback-margin-top: 0.25rem;
    --form-feedback-font-size: 0.875rem;
    --form-feedback-valid-color: var(--color-success);
    --form-feedback-invalid-color: var(--color-danger);
    --form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
    --form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
}