/* CSS variables and shared sizing tokens */
:root {
    --green:#184b2f;
    --green2:#0f3a24;
    --cream: #f6f1e6;
    --cream2:#f7f2e7;
    --ink:#102015;
    --glass: rgba(246,241,230,0.9);
    --glass-strong: rgba(246,241,230,0.92);
    --shadow: 0 14px 40px rgba(0,0,0,0.25);
    --radius: 18px;

    /* Theme colors */
    --bg: #0b120d;
    --bg-hero-strong: rgba(10,18,13,0.78);
    --bg-hero-soft: rgba(10,18,13,0.40);
    --footer-bg: rgba(10,18,13,0.75);
    --white: #fff;
    --border-light: rgba(0,0,0,0.12);
    --border-soft: rgba(0,0,0,0.14);
    --border-mid: rgba(0,0,0,0.15);
    --overlay-dim: rgba(0,0,0,0.35);
    --panel-border: rgba(0,0,0,0.10);
    --accent-outline: rgba(24,75,47,0.45);
    --accent-outline-strong: rgba(24,75,47,0.55);
    --accent-glow: rgba(24,75,47,0.12);
    --error: #b00;
    --error-strong: rgb(179, 25, 30);
    --error-border: rgba(179, 25, 30, 0.85);
    --error-glow: rgba(179, 25, 30, 0.12);
    --danger: rgba(220, 35, 35, 0.9);
    --danger-hover: rgba(220, 35, 35, 0.98);
    --danger-strong: rgba(220, 35, 35, 0.85);
    --danger-strong-hover: rgba(220, 35, 35, 0.95);
    --overlay-fade: rgba(246,241,230,0);
    --form-border: rgba(10,18,13,0.18);
    --ink-weak: rgba(16,32,21,0.08);
    --ink-soft: rgba(16,32,21,0.18);
    --ink-border: rgba(16,32,21,0.22);
    --select-chevron: rgba(16,32,21,0.65);
    --preview-bg: rgba(0,0,0,0.04);
    --preview-remove-bg: rgba(0,0,0,0.6);
    
    /* Layout spacing scale */
    --space: 16px;               /* outer gutters, inter-card gaps, header/footer offsets */
    --space-half: calc(var(--space) / 2);
    --space-2: calc(var(--space) * 2);
    --space-3: calc(var(--space) * 3);
    
    /* Card sizing */
    --card-width: 860px;         /* default width for non-full-width cards */
    --signin-card-max-width: 300px;
    
    /* Card internal padding */
    --card-pad: 16px;            /* interior padding for all cards */
    --card-pad-x: var(--card-pad);
    --card-pad-y: var(--card-pad);
    
    /* Common pill/button geometry */
    --pill-radius: 9999px;
    --radius-inner: calc(var(--radius) - 6px);
    
    /* Form/action buttons (Save/Cancel/etc.) */
    --btn-pad-y: 10px;
    --btn-pad-x: 14px;
    --btn-font-weight: 700;
    
    /* Carousel fade tolerance (px) */
    --carousel-fade-eps: 2;
    --carousel-height: 25vh;
    --carousel-max-width: 80vw;
    --carousel-single-height: 15vh;
    --carousel-max-height: 220px;
    --modal-max-width: 92vw;
    --modal-shadow: 0 20px 70px rgba(0,0,0,0.35);
    
    /* Header layout */
    --logo-size: 90px;
    --site-title-size: 32px;
    --header-pad: 9px;
    --header-gap: 18px;
    --header-title-gap: 4px;
    
    /* Navigation pills */
    --nav-pill-pad-y: 7px;
    --nav-pill-pad-x: 11px;
    --nav-pill-font: 11px;
    --nav-pill-gap: 10px;
    
    /* Nav row clipping guards */
    --nav-row-pad-y: 3px;
    --nav-row-pad-right: 3px;
    
    /* Submenu spacing */
    --submenu-top-gap: 10px;

    /* Common sizes and breakpoints */
    --size-1: 1px;
    --size-2: 2px;
    --size-3: 3px;
    --size-4: 4px;
    --size-6: 6px;
    --size-8: 8px;
    --size-10: 10px;
    --size-12: 12px;
    --size-14: 14px;
    --size-16: 16px;
    --size-18: 18px;
    --size-20: 20px;
    --size-22: 22px;
    --size-70: 70px;
    --size-40: 40px;
    --size-44: 44px;
    --size-120: 120px;
    --size-180: 180px;
    --size-200: 200px;
    --size-220: 220px;
    --size-240: 240px;
    --size-260: 260px;
    --size-300: 300px;
    --size-1280: 1280px;
    --bp-sm: 640px;
    --bp-md: 900px;
    --bp-footer-md: 800px;
    --bp-footer-sm: 400px;
    --legal-height: 70vh;
    --legal-min-height: 200px;
    --preview-thumb: 120px;
    
    /* Aliases */
    --spacing: var(--space);
    --width: var(--card-width);
    --margin: var(--card-pad);
    --logo: var(--logo-size);
    --titleSize: var(--site-title-size);
}