/* ============================================================
   RoboSpati — Design Tokens
   ============================================================ */

:root {
    /* ---- Brand palette ---- */
    --navy: #031B3A;
    --navy-2: #072D63;
    --blue: #0B8FEA;
    --cta: #0094FF;
    --accent: #0A84FF;
    --white: #FFFFFF;
    --gray: #F4F6F8;
    --border: #E5EAF0;
    --border-card: #E6EDF5;

    /* ---- Text ---- */
    --heading-color: #0F172A;
    --text-color: #111827;
    --body-color: #475569;
    --muted: #64748B;

    /* ---- Dark surfaces ---- */
    --dark: #02142A;
    --dark-2: #082C5A;
    --dark-blue: #005CB8;

    /* ---- Gradients ---- */
    --gradient: linear-gradient(135deg, #031B3A 0%, #005CB8 100%);
    --gradient-dark: linear-gradient(135deg, #082C5A 0%, #005CB8 100%);
    --gradient-blue: linear-gradient(135deg, #0B8FEA 0%, #0094FF 100%);
    --gradient-text: linear-gradient(90deg, #031B3A 0%, #0B8FEA 100%);
    --accent-gradient: linear-gradient(135deg, #0B8FEA 0%, #0094FF 100%);

    /* ---- Typography ---- */
    --font-heading: "Satoshi", "Manrope", "Inter", system-ui, sans-serif;
    --font-body: "Manrope", "Inter", system-ui, sans-serif;

    --fs-hero: clamp(2.75rem, 6vw, 4.5rem);
    --fs-section: clamp(2rem, 4vw, 3rem);
    --fs-card: 1.5rem;
    --fs-body: 1.125rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;

    --fw-black: 900;
    --fw-bold: 700;
    --fw-medium: 500;
    --fw-regular: 400;

    --lh-tight: 1.1;
    --lh-heading: 1.25;
    --lh-body: 1.65;

    /* ---- Radius ---- */
    --radius-card: 24px;
    --radius-img: 24px;
    --radius-input: 16px;
    --radius-pill: 999px;
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;

    /* ---- Shadows ---- */
    --shadow-xs: 0 1px 3px rgba(3, 27, 58, .06);
    --shadow-sm: 0 2px 10px rgba(3, 27, 58, .06);
    --shadow-md: 0 10px 30px rgba(3, 27, 58, .09);
    --shadow-lg: 0 24px 60px rgba(3, 27, 58, .12);
    --shadow-card: 0 6px 24px rgba(3, 27, 58, .07);

    /* ---- Spacing ---- */
    --section-y: clamp(4.5rem, 9vw, 7.5rem);
    --container: 1240px;
    --gutter: 1.5rem;

    /* ---- Misc ---- */
    --transition: .3s cubic-bezier(.25, .46, .45, .94);
    --ease: cubic-bezier(.25, .46, .45, .94);
}