/*
 * variables.css
 * ecoSPLAT design system tokens
 *
 * Central source of truth for colors, typography, spacing, and transitions.
 * All other CSS files reference these variables.
 *
 * Location: /Library/WebServer/Documents/Canemah/projects/ecoSPLAT/viewer/css/
 * Author: M. Hamilton / Claude collaboration
 * Date: February 2026
 */

:root {
    /* ── Background ── */
    --bg-deep: #06070d;
    --bg-panel: #0c0e18;
    --bg-surface: #12142200;
    --bg-surface-solid: #161830;

    /* ── Borders ── */
    --border: #1e2235;
    --border-hover: #2e3255;
    --border-focus: #e67e22;

    /* ── Text ── */
    --text-primary: #d4d6e0;
    --text-bright: #ffffff;
    --text-secondary: #6b6f85;
    --text-dim: #3a3d52;

    /* ── Accent ── */
    --accent: #e67e22;
    --accent-glow: #e67e2240;
    --accent-hover: #f09030;

    /* ── Ecological palette ── */
    --eco-green: #3ddc84;
    --eco-green-dim: #3ddc8440;
    --eco-blue: #4fc3f7;
    --eco-warm: #ffb74d;
    --eco-red: #ef5350;

    /* ── iNaturalist taxon colors ── */
    --taxon-plantae: #3ddc84;
    --taxon-aves: #ab47bc;
    --taxon-mammalia: #ffb74d;
    --taxon-insecta: #4fc3f7;
    --taxon-fungi: #ef5350;
    --taxon-reptilia: #f48fb1;
    --taxon-amphibia: #fff176;
    --taxon-default: #6b6f85;

    /* ── Typography ── */
    --font-display: 'Instrument Serif', serif;
    --font-mono: 'DM Mono', monospace;
    --font-size-xs: 9px;
    --font-size-sm: 10px;
    --font-size-base: 11px;
    --font-size-md: 12px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-xxl: 22px;
    --font-size-hero: 28px;

    /* ── Spacing ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 20px;
    --space-xxl: 24px;

    /* ── Radii ── */
    --radius-sm: 3px;
    --radius-md: 5px;
    --radius-lg: 8px;
    --radius-round: 50%;

    /* ── Transitions ── */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.4s ease;

    /* ── Marker sizes ── */
    --marker-size: 28px;
    --marker-size-hover: 36px;

    /* ── Breakpoints (reference only, used in media queries) ── */
    /* --bp-tablet: 1024px  tablet portrait + landscape boundary */
    /* --bp-phone: 480px    phone boundary */

    /* ── Strip icon colors (match category semantics) ── */
    --icon-globe: var(--eco-blue);
    --icon-habitat: var(--eco-green);
    --icon-terrarium: var(--accent);
    --icon-species: #ab47bc;
}