/* Shared non-map shell styles for trip planner / favorites / checkins pages. */

:root {
    --primary: #10b981;

    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-900: #0f172a;

    --blue-100: #dbeafe;
    --blue-500: #3b82f6;
    --blue-800: #1e40af;

    --red-100: #fee2e2;
    --red-200: #fecaca;
    --red-500: #ef4444;
    --red-700: #b91c1c;
    --red-800: #991b1b;

    --yellow-100: #fef3c7;
    --yellow-500: #f59e0b;
    --yellow-800: #92400e;

    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-bg-secondary: #f8fafc;
    --color-border-light: #e2e8f0;
    --color-danger-500: #ef4444;

    --color-neutral-50: #f8fafc;
    --color-neutral-100: #f1f5f9;
    --color-neutral-200: #e2e8f0;
    --color-neutral-300: #cbd5e0;
    --color-neutral-600: #475569;
    --color-neutral-700: #334155;
    --color-neutral-800: #1f2937;
    --color-neutral-900: #111827;

    --color-primary-50: rgba(0, 61, 165, 0.05);
    --color-primary-100: rgba(0, 61, 165, 0.1);
    --color-primary-200: rgba(0, 61, 165, 0.2);
    --color-primary-500: #003da5;
    --color-primary-600: #002f85;
    --color-primary-700: #002265;

    --scottish-blue: #003da5;
    --scottish-blue-50: #f1f5fe;
    --scottish-blue-100: #dbeafe;
    --scottish-blue-200: #bfdbfe;
    --scottish-blue-800: #1e40af;
    --scottish-heritage-light: rgba(0, 61, 165, 0.1);
    --heather-purple: #8b5cf6;

    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-800: #166534;

    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-800: #6b21a8;

    --z-sticky: 1020;
    --z-toast: 1080;
    --z-modal-backdrop: 10000;
    --z-modal: 10001;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text-primary);
    background: #ffffff;
    line-height: 1.5;
    overflow-x: hidden;
}

.touch-target {
    min-width: 44px;
    min-height: 44px;
}

.touch-target-enhanced {
    min-width: 48px;
    min-height: 48px;
}