/* ============================================================
   Stripy Turtle — Design Tokens
   Single source of truth for colour, type, spacing, elevation,
   z-index, motion, and mobile ergonomics.
   Loaded BEFORE all other stylesheets so every layer can consume
   these variables (including overrides of theme defaults).
   ============================================================ */

:root {
    /* ── Brand palette ─────────────────────────────────────── */
    --st-brand: #0cd5a3;
    --st-brand-rgb: 12, 213, 163;
    --st-brand-dark: #09a87f;
    --st-brand-darker: #077c5e;
    --st-brand-subtle: #e2fbf4;
    --st-brand-contrast: #0f172a; /* ink on brand backgrounds */

    --st-ink: #0f172a;
    --st-ink-secondary: #475569;
    --st-ink-muted: #94a3b8;

    --st-surface: #ffffff;
    --st-surface-alt: #f6f9fc;
    --st-surface-sunken: #eef2f6;
    --st-border: #e2e8f0;
    --st-border-strong: #cbd5e1;

    /* Semantic states (aligned with theme, referenced by name) */
    --st-success: #13deb9;
    --st-warning: #ffae1f;
    --st-danger: #fa896b;
    --st-info: #539bff;

    /* ── Fluid type scale ──────────────────────────────────── */
    /* Scales smoothly between 360px and 1200px viewports */
    --st-text-xs: clamp(0.72rem, 0.69rem + 0.15vw, 0.78rem);
    --st-text-sm: clamp(0.8rem, 0.76rem + 0.2vw, 0.875rem);
    --st-text-base: clamp(0.9rem, 0.85rem + 0.25vw, 1rem);
    --st-text-lg: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    --st-text-xl: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    --st-text-2xl: clamp(1.4rem, 1.25rem + 0.75vw, 1.75rem);
    --st-text-3xl: clamp(1.65rem, 1.45rem + 1vw, 2.15rem);

    /* ── Spacing rhythm (4px base) ─────────────────────────── */
    --st-space-1: 0.25rem;
    --st-space-2: 0.5rem;
    --st-space-3: 0.75rem;
    --st-space-4: 1rem;
    --st-space-5: 1.5rem;
    --st-space-6: 2rem;
    --st-space-7: 3rem;

    /* Page gutter that breathes with the viewport */
    --st-gutter: clamp(0.75rem, 0.5rem + 1.5vw, 1.5rem);

    /* ── Radius scale ──────────────────────────────────────── */
    --st-radius-sm: 0.375rem;
    --st-radius: 0.625rem;
    --st-radius-lg: 1rem;
    --st-radius-xl: 1.25rem;
    --st-radius-full: 999px;

    /* ── Elevation ─────────────────────────────────────────── */
    --st-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --st-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    --st-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.12);
    --st-shadow-sheet: 0 -8px 32px rgba(15, 23, 42, 0.18);

    /* ── Z-index scale ─────────────────────────────────────── */
    --st-z-topbar: 1030;
    --st-z-bottom-nav: 1050;
    --st-z-sheet-backdrop: 1055;
    --st-z-sheet: 1060;
    --st-z-search-overlay: 1070;

    /* ── Mobile ergonomics ─────────────────────────────────── */
    --st-touch-target: 44px;
    --st-bottom-nav-height: 60px;
    --st-topbar-height-mobile: 56px;

    /* Safe areas (iOS notch / home indicator) */
    --st-safe-top: env(safe-area-inset-top, 0px);
    --st-safe-bottom: env(safe-area-inset-bottom, 0px);
    --st-safe-left: env(safe-area-inset-left, 0px);
    --st-safe-right: env(safe-area-inset-right, 0px);

    /* ── Motion ────────────────────────────────────────────── */
    --st-ease: cubic-bezier(0.32, 0.72, 0, 1);
    --st-duration-fast: 150ms;
    --st-duration: 250ms;
    --st-duration-slow: 350ms;
}

/* ── Global mobile ergonomics ─────────────────────────────── */

html {
    /* Prevent iOS Safari inflating text on rotation */
    -webkit-text-size-adjust: 100%;
}

body {
    /* Stop pull-to-refresh fighting in-app scrolling on Android */
    overscroll-behavior-y: contain;
}

@media (max-width: 767.98px) {
    /* Remove 300ms-tap-delay/double-tap-zoom on interactive elements */
    a, button, [role="button"], input, select, textarea, label {
        touch-action: manipulation;
    }

    /* Enforce comfortable touch targets on primary controls */
    .btn:not(.btn-sm):not(.btn-close),
    .form-control,
    .form-select {
        min-height: var(--st-touch-target);
    }

    /* iOS zooms the page when focused inputs are < 16px */
    .form-control,
    .form-select,
    input[type="search"] {
        font-size: 16px;
    }
}

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