/* ===================================================
   LIVINGSTONE – COLOR SYSTEM
   Offline-First Outdoor Navigation PWA
   =================================================== */

:root {

    /* =====================================
       1. BRAND PALETTE (DO NOT USE DIRECTLY)
       ===================================== */

    /* Primary Brand */
    --brand-primary: #1f3f2b;
    --brand-primary-dark: #142b1c;
    --brand-primary-light: #2f5e3f;

    /* Accent (trail / marker color) */
    --brand-accent: #9a7749;
    --brand-accent-hover: #7e5f38;

    /* Paper background */
    --brand-paper: #f3f1e7;

    /* Neutral greens used in UI */
    --brand-green-soft: #4e6a57;
    --brand-green-muted: #6f8a77;

    /* Neutrals */
    --brand-charcoal: var(--brand-primary-dark);
    --brand-charcoal-soft: var(--brand-primary);
    --brand-black: #000000;

    --brand-white: #F2F0E6;
    --brand-white-pure: #FFFFFF;
    --brand-gray-50: #F4F6F8;
    --brand-gray-200: #E5E7EB;
    --brand-gray-400: #9CA3AF;
    --brand-gray-600: #6B7280;
    --brand-gray-800: #1F2933;

    /* Status */
    --brand-success: #2E7D5B;
    --brand-warning: #D97706;
    --brand-danger: #B91C1C;


    /* =====================================
       2. SEMANTIC UI COLORS (USE THESE)
       ===================================== */

    /* Text */
    --color-text-primary: var(--brand-gray-800);
    --color-text-secondary: var(--brand-gray-600);
    --color-text-muted: var(--brand-gray-400);
    --color-text-inverse: var(--brand-white);
    --color-text-on-dark: var(--brand-white-pure);

    /* Backgrounds */
    --color-bg-app: var(--brand-white);
    --color-bg-surface: var(--brand-white-pure);
    --color-bg-elevated: var(--brand-white-pure);
    --color-bg-overlay: rgba(0, 0, 0, 0.4);
    --color-bg-dark-surface: var(--brand-charcoal-soft);
    --color-bg-section-dark: var(--brand-charcoal-soft);

    /* Navigation / Header */
    --color-nav-bg: var(--brand-primary-dark);
    --color-nav-text: var(--brand-white);
    --color-nav-active: var(--brand-accent);
    --color-header-text: var(--color-text-inverse);
    --color-accent-primary: var(--brand-white);

    /* Buttons */
    --color-btn-primary-bg: var(--brand-accent);
    --color-btn-primary-text: var(--brand-white-pure);
    --color-btn-primary-hover: #745025;

    --color-btn-accent-bg: var(--brand-accent);
    --color-btn-accent-text: var(--brand-white-pure);
    --color-btn-accent-hover: var(--brand-accent-hover);

    --color-btn-disabled-bg: var(--brand-gray-200);
    --color-btn-disabled-text: var(--brand-gray-400);

    /* Borders & Dividers */
    --color-border-subtle: rgba(0, 0, 0, 0.08);
    --color-border-strong: rgba(0, 0, 0, 0.15);

    /* Forms */
    --color-input-bg: var(--brand-gray-50);
    --color-input-text: var(--color-text-primary);
    --color-input-border: var(--color-border-strong);
    --color-input-focus: var(--brand-primary);

    /* Status / Feedback */
    --color-success: var(--brand-success);
    --color-warning: var(--brand-warning);
    --color-danger: var(--brand-danger);
    --color-danger-soft: #FF9B9B;
    --color-danger-bright: #FF5A5A;
    --color-danger-bright-hover: #FF2A2A;
    --color-warning-soft: #D4A63A;
    --color-success-bright: #4CAF50;
    --color-info: #5AA7FF;
    --color-info-strong: #2D7DF6;
    --color-status-good: #2ECC71;

    /* Maps / Markers (important for Livingstone) */
    --color-map-marker-primary: var(--brand-accent);
    --color-map-route-primary: var(--brand-charcoal);
    --color-map-user-location: #3b82f6;
    /* intentionally distinct */

    /* Interactive states */
    --color-focus-ring: rgba(47, 74, 90, 0.35);
    --color-hover-overlay: rgba(0, 0, 0, 0.04);
    --color-surface-hover: rgba(0, 0, 0, 0.10);

    /* Dividers */
    --color-divider: var(--color-border-subtle);

    /* Disabled */
    --color-disabled-bg: var(--color-btn-disabled-bg);
    --color-disabled-text: var(--color-btn-disabled-text);

    /* Cards / panels */
    --color-card-bg: var(--brand-white-pure);
    --color-card-border: rgba(0, 0, 0, 0.08);
    --color-card-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    --color-panel-handle: rgba(0, 0, 0, 0.3);
    --color-panel-shadow-top: rgba(0, 0, 0, 0.18);
    --color-menu-overlay: rgba(0, 0, 0, 0.35);
    --color-menu-shadow: rgba(0, 0, 0, 0.2);

    /* Shared semantic aliases */
    --color-border: var(--color-border-subtle);
    --color-accent: var(--color-btn-primary-bg);
    --color-accent-hover: var(--color-btn-primary-hover);
    --color-accent-soft: rgba(139, 106, 67, 0.14);
    --color-primary: var(--brand-primary);
    --color-surface: var(--color-bg-surface);
    --color-surface-alt: var(--color-bg-elevated);
    --color-surface-elevated: var(--color-bg-elevated);

    /* Legacy aliases */
    --site-primary: var(--brand-primary);
    --site-primary-light: var(--brand-primary-light);
    --site-primary-darkest: var(--brand-primary-dark);
    --site-secondary: var(--brand-accent);
    --site-dark: var(--brand-primary-dark);
    --site-dark-lightest: var(--color-border-subtle);
    --site-white: var(--brand-white-pure);
    --site-white-lightest: var(--brand-white);
    --site-cta: var(--color-link);
    --text-color: var(--color-text-primary);
    --text-inverse: var(--color-text-inverse);
    --text-muted: var(--color-text-muted);
    --bkg-color: var(--color-bg-surface);
    --neutral: var(--color-text-secondary);
    --accent: var(--color-btn-primary-bg);
    --on-accent: var(--color-btn-primary-text);
    --surface-subtle: var(--color-bg-elevated);

    /* Install prompt */
    --color-install-button-bg: var(--color-info-strong);
    --color-install-button-text: var(--color-text-on-dark);
    --color-install-card-border: rgba(0, 0, 0, 0.08);
    --color-install-card-shadow-strong: rgba(0, 0, 0, 0.15);
    --color-install-card-shadow-soft: rgba(0, 0, 0, 0.1);
    --color-install-phone-dash: rgba(255, 255, 255, 0.18);
    --color-install-grid-start: #2F5D3A;
    --color-install-grid-mid: #3D7A4F;
    --color-install-grid-end: #4C915E;
    --color-install-grid-highlight: rgba(255, 255, 255, 0.08);
    --color-install-grid-stripe: rgba(255, 255, 255, 0.08);
    --color-install-check-bg: var(--color-success-bright);
    --color-map-panel-shadow: rgba(0, 0, 0, 0.35);
    --color-map-marker-border: var(--brand-black);

    /* Route and journal */
    --color-route-map-active-bg: #2C6F4E;
    --color-route-action-hover-bg: rgba(255, 255, 255, 0.08);
    --color-route-action-hover-text: var(--color-text-on-dark);
    --color-route-rendered-bg: rgba(46, 125, 50, 0.16);
    --color-route-rendered-border: rgba(114, 181, 120, 0.35);
    --color-route-rendered-outline: rgba(114, 181, 120, 0.12);
    --color-journal-card-bg: rgba(255, 255, 255, 0.04);
    --color-journal-card-border: rgba(255, 255, 255, 0.06);
    --color-journal-card-hover: rgba(255, 255, 255, 0.08);
    --color-pinned-highlight: rgba(255, 215, 0, 0.08);
    --color-photo-action-border-capture: var(--color-success-bright);
    --color-photo-action-border-upload: var(--color-info);

    /* Homepage */
    --color-hero-overlay-top: rgba(0, 0, 0, 0.55);
    --color-hero-overlay-mid: rgba(0, 0, 0, 0.65);
    --color-hero-overlay-bottom: rgba(0, 0, 0, 0.8);
    --color-hero-subtitle: rgba(255, 255, 255, 0.92);
    --color-feature-panel-bg: rgba(255, 255, 255, 0.05);
    --color-feature-panel-border: rgba(255, 255, 255, 0.08);
    --color-privacy-border: rgba(255, 255, 255, 0.12);
    --color-privacy-surface-start: rgba(21, 31, 38, 0.97);
    --color-privacy-surface-end: rgba(13, 20, 25, 0.99);
    --color-privacy-shadow: rgba(0, 0, 0, 0.24);
    --color-privacy-eyebrow: rgba(255, 255, 255, 0.72);
    --color-privacy-copy: rgba(255, 255, 255, 0.86);
    --color-privacy-link: #F4D58D;

    /* Guide */
    --color-guide-feature-border: #BB8B2D;
    --color-guide-popup-text: #1F2937;
    --color-guide-popup-heading: #111827;
    --color-guide-popup-badge-bg: #CAA34C;
    --color-guide-popup-badge-text: var(--color-text-on-dark);
    --color-guide-popup-label: #4B5563;
    --color-guide-popup-label-strong: var(--brand-gray-600);
    --color-guide-popup-divider: var(--brand-gray-200);
    --color-guide-fab-shadow-strong: rgba(0, 0, 0, 0.25);
    --color-guide-fab-shadow-soft: rgba(0, 0, 0, 0.18);

    /* Marker UI */
    --color-marker-card-bg: rgba(255, 255, 255, 0.04);
    --color-marker-card-border: rgba(255, 255, 255, 0.08);
    --color-marker-limit-text: rgba(242, 240, 230, 0.84);
    --color-marker-limit-title: var(--brand-paper);
    --color-marker-limit-link: #D7B07A;
    --color-marker-group-toggle-border: rgba(58, 79, 42, 0.75);
    --color-marker-group-toggle-bg: rgba(19, 32, 17, 0.08);
    --color-marker-group-toggle-hover: rgba(255, 255, 255, 0.14);
    --color-marker-picker-text: var(--brand-paper);
    --color-marker-circle-bg: var(--brand-white-pure);
    --color-marker-circle-border: var(--color-nav-bg);
    --color-marker-circle-icon: #1F2B3A;
    --color-marker-circle-shadow: rgba(0, 0, 0, 0.28);
    --color-marker-circle-active-ring: rgba(139, 106, 67, 0.45);
    --color-marker-circle-active-shadow: rgba(0, 0, 0, 0.35);
    --color-marker-action-press: rgba(0, 0, 0, 0.04);

    /* Misc */
    --color-login-ghost-border: #333333;
    --color-status-offline-strike: var(--color-danger);
    --color-toggle-shadow: rgba(0, 0, 0, 0.05);

    /* =====================================
       LAYOUT & TYPOGRAPHY TOKENS
       ===================================== */

    /* Typography */
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Ubuntu, sans-serif;

    --font-size-base: 16px;
    --line-height-base: 1.6;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-heading: 700;
    --line-height-heading: 1.25;

    /* Spacing (8pt-ish scale) */
    --spacing-xxs: 4px;
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 48px;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Shadows */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* Z-index layers */
    --z-header: 100;
    --z-overlay: 500;
    --z-modal: 1000;

    /* Links */
    --color-link: var(--brand-primary);

    /* App chrome sizes */
    --app-header-height: 56px;
    --app-nav-height: 64px;

    /* Overlay panel */
    --panel-min-height: 64px;
    --panel-max-height: 70vh;

    /* Z-index stack */
    --z-header: 100;
    --z-panel: 1000;
    --z-nav: 1800;
    --z-menu-overlay: 900;
    --z-menu: 1000;
    --z-map: 0;

    --color-status-online: var(--brand-success);
    --color-status-offline: var(--brand-danger);
    --color-status-degraded: var(--brand-warning);

    --color-map-route-primary: var(--brand-charcoal);
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg-app: #0F1E16;
        --color-bg-surface: #16271D;
        --color-bg-elevated: #1E3327;

        --color-text-primary: var(--brand-paper);
        --color-text-secondary: var(--brand-gray-200);

        --color-border-subtle: rgba(255, 255, 255, 0.08);

        /* Text */
        --color-text-muted: var(--brand-paper);

        /* Backgrounds */
        --color-bg-overlay: rgba(0, 0, 0, 0.6);

        /* Navigation */
        --color-nav-bg: var(--brand-primary-dark);
        --color-nav-text: var(--color-text-primary);
        --color-nav-active: var(--brand-primary-light);

        /* Borders */
        --color-border-subtle: rgba(255, 255, 255, 0.08);
        --color-border-strong: rgba(255, 255, 255, 0.16);

        --color-surface-hover: rgba(255, 255, 255, 0.02);
        --color-panel-handle: rgba(255, 255, 255, 0.6);
        --color-route-action-hover-bg: rgba(255, 255, 255, 0.08);
        --color-marker-group-toggle-border: rgba(255, 255, 255, 0.25);
        --color-marker-group-toggle-bg: rgba(255, 255, 255, 0.08);

        /* Inputs */
        --color-input-bg: var(--color-bg-elevated);
        --color-input-text: var(--color-text-primary);
        --color-input-border: var(--color-border-subtle);

        --color-link: var(--brand-accent);
    }
}