@import url('https://fonts.googleapis.com/css2?family=Valley+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root {
    /* Expo-inspired design tokens */
    --expo-black: #000000;
    --expo-near-black: #1c2024;
    --expo-cloud-gray: #f0f0f3;
    --expo-white: #ffffff;
    --expo-slate-gray: #60646c;
    --expo-mid-slate: #555860;
    --expo-silver: #b0b4ba;
    --expo-border-lavender: #e0e1e6;
    --expo-input-border: #d9d9e0;
    --expo-link-cobalt: #0d74ce;
    --expo-legal-blue: #476cff;
    --expo-widget-sky: #47c2ff;
    --expo-preview-purple: #8145b5;
    --expo-warning-amber: #ab6400;
    --expo-destructive-rose: #eb8e90;
    --expo-dark-focus-ring: #2547d0;

    /* Bootstrap 5 variable bridge */
    --bs-body-bg: var(--expo-cloud-gray);
    --bs-body-color: var(--expo-near-black);
    --bs-emphasis-color: var(--expo-black);
    --bs-secondary-color: var(--expo-slate-gray);
    --bs-tertiary-color: var(--expo-silver);
    --bs-border-color: var(--expo-border-lavender);
    --bs-link-color: var(--expo-link-cobalt);
    --bs-link-hover-color: #0a63b0;
    --bs-primary: var(--expo-black);
    --bs-primary-rgb: 0, 0, 0;
    --bs-info: var(--expo-widget-sky);
    --bs-info-rgb: 71, 194, 255;
    --bs-warning: var(--expo-warning-amber);
    --bs-warning-rgb: 171, 100, 0;
    --bs-danger: var(--expo-destructive-rose);
    --bs-danger-rgb: 235, 142, 144;
    --bs-success: #198754;
    --bs-success-rgb: 25, 135, 84;

    --bs-font-sans-serif: "Valley Sans", serif, "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    --bs-border-radius: 0.5rem;      /* 8px */
    --bs-border-radius-sm: 0.375rem; /* 6px */
    --bs-border-radius-lg: 1rem;     /* 16px */
    --bs-border-radius-xl: 1.5rem;   /* 24px */
    --bs-border-radius-pill: 9999px;

    /* Font size variables */
    --fs-xs: 0.75rem;   /* 12px */
    --fs-s: 0.875rem;   /* 14px */
    --fs-base: 1rem;    /* 16px */
    --fs-md: 1.125rem;  /* 18px */
    --fs-x: 1.25rem;    /* 20px */
    --fs-xl: 1.5rem;    /* 24px */
    --fs-2x: 2rem;      /* 32px */

    /* Responsive breakpoint variables */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    --top-header-height: 72px;
    --top-position-offset: 0px;
}

html,
body {
    background: var(--expo-cloud-gray);
    color: var(--expo-near-black);
    font-family: var(--bs-font-sans-serif);
}

a {
    color: var(--expo-link-cobalt);
}

a:hover {
    color: #0a63b0;
}

.app-body {
    min-height: 100vh;
    background: var(--expo-cloud-gray);
}

.expo-surface {
    background: var(--expo-white);
    border: 1px solid var(--expo-border-lavender);
    border-radius: var(--bs-border-radius-lg);
    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 6px, rgba(0, 0, 0, 0.07) 0 2px 4px;
}

.expo-display {
    color: var(--expo-black);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0;
}

.expo-muted {
    color: var(--expo-slate-gray);
}

.btn {
    border-radius: var(--bs-border-radius-sm);
    font-weight: 600;
}

.btn-primary,
.btn-dark {
    border-radius: var(--bs-border-radius-pill);
}

.card {
    border-color: var(--expo-border-lavender);
    border-radius: var(--bs-border-radius-lg);
}

/* Font size utility classes */
.fs-xs {
    font-size: var(--fs-xs);
}

.fs-s {
    font-size: var(--fs-s);
}

.fs-base {
    font-size: var(--fs-base);
}

.fs-md {
    font-size: var(--fs-md);
}

.fs-x {
    font-size: var(--fs-x);
}

.fs-xl {
    font-size: var(--fs-xl);
}

.fs-2x {
    font-size: var(--fs-2x);
}

/* Default font sizes for HTML elements */
h1 {
    font-size: var(--fs-2x);
}

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-x);
}

h4 {
    font-size: var(--fs-md);
}

h5 {
    font-size: var(--fs-base);
}

h6 {
    font-size: var(--fs-s);
}

p {
    font-size: var(--fs-base);
}

div {
    font-size: var(--fs-base);
}

/* Typography enhancements */
.lh-tight {
    line-height: 1.25;
}

.lh-normal {
    line-height: 1.5;
}

.lh-loose {
    line-height: 2;
}

.fw-light {
    font-weight: 300;
}

.fw-normal {
    font-weight: 400;
}

.fw-bold {
    font-weight: 600;
}

/* Color utilities */
.text-primary {
    color: var(--expo-black);
}

.text-secondary {
    color: var(--expo-slate-gray);
}

.text-link {
    color: var(--expo-link-cobalt);
}

.text-info {
    color: var(--expo-widget-sky);
}

.text-warning {
    color: var(--expo-warning-amber);
}

.text-danger {
    color: var(--expo-destructive-rose);
}

.bg-surface {
    background: var(--expo-white);
}

.bg-muted {
    background: var(--expo-cloud-gray);
}

.bg-primary {
    background: var(--expo-black);
    color: var(--expo-white);
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

/* Shadows and borders */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Accessibility & focus */
.focus-ring:focus {
    outline: 2px solid var(--expo-dark-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.form-control,
.form-select {
    border-color: var(--expo-input-border);
    border-radius: var(--bs-border-radius-sm);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--expo-dark-focus-ring);
    box-shadow: 0 0 0 0.2rem rgba(37, 71, 208, 0.15);
}

.auth-page {
    display: flex;
    align-items: center;
}

.auth-shell {
    border-radius: var(--bs-border-radius-xl);
}

.auth-hero {
    background: var(--expo-near-black);
    color: var(--expo-white);
}

.auth-title {
    color: var(--expo-white);
    font-size: clamp(2rem, 4vw, 2.75rem);
    letter-spacing: 0;
}

.auth-kicker {
    color: var(--expo-mid-slate);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.auth-status-badge {
    width: fit-content;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--bs-border-radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.auth-feature-list {
    display: grid;
    gap: 0.85rem;
}

.auth-feature-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.95rem;
}

.auth-feature-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--expo-widget-sky);
}

.auth-label {
    color: var(--expo-mid-slate);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.auth-input {
    background: var(--expo-white);
}