/* ==========================================================================
   Design tokens
   Values taken from the source design (lup-76533661.figma.site).
   Loaded before every block stylesheet in css/blocks/.
   ========================================================================== */

:root {
    /* Layout ------------------------------------------------------------- */
    --container-max: 1200px;
    --gutter: 1.5rem;

    /* Spacing scale ------------------------------------------------------ */
    --space-1: .25rem;   /* 4px  */
    --space-2: .5rem;    /* 8px  */
    --space-3: .75rem;   /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.5rem;   /* 24px */
    --space-6: 2rem;     /* 32px */
    --space-7: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-9: 6rem;     /* 96px */
    --space-10: 8rem;    /* 128px */

    /* Radii -------------------------------------------------------------- */
    --radius-sm: .5rem;      /* 8px  */
    --radius-md: .875rem;    /* 14px */
    --radius-lg: 1.25rem;    /* 20px */
    --radius-xl: 1.75rem;    /* 28px */
    --radius-pill: 999px;

    /* Shadows ------------------------------------------------------------ */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-sm: 0 2px 8px rgba(15, 23, 42, .06);
    --shadow-md: 0 8px 24px rgba(15, 23, 42, .08);
    --shadow-lg: 0 24px 60px rgba(30, 58, 138, .14);

    /* Hairline ring paired with --shadow-lg on raised panels */
    --ring-brand: 0 0 0 1px rgba(219, 230, 255, .7);

    /* Ink (text) --------------------------------------------------------- */
    --ink-950: #0b1220;
    --ink-900: #0f172a;
    --ink-700: #334155;
    --ink-600: #475569;
    --ink-500: #64748b;
    --ink-400: #94a3b8;
    --ink-300: #cbd5e1;
    --ink-200: #e2e8f0;

    /* Brand -------------------------------------------------------------- */
    --brand-50:  #eef4ff;
    --brand-100: #dbe6ff;
    --brand-200: #bcd0ff;
    --brand-300: #8eb0ff;
    --brand-500: #2f63f6;
    --brand-600: #2563eb;
    --brand-700: #1d4ed8;
    --brand-900: #1e3a8a;
    --brand-950: #172554;

    /* Accent ------------------------------------------------------------- */
    --accent-300: #fcd34d;
    --accent-400: #fbbf24;
    --accent-500: #f5b301;
    --accent-600: #f59e0b;
    --sun-500: #f97316;   /* headline underline + city markers */

    /* The hand-drawn underline stroke, as a background image.
       Blocks position it themselves via a ::after. */
    --underline-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C40 3 120 2 198 6' stroke='%23f97316' stroke-width='3.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");

    /* Surfaces ----------------------------------------------------------- */
    --cloud: #ffffff;
    --mist: #f6f9ff;
    --border: #e2e8f0;

    /* Type --------------------------------------------------------------- */
    --font-display: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --text-caption: .75rem;    /* 12px */
    --text-small: .875rem;     /* 14px */
    --text-base: 1rem;         /* 16px */
    --text-lead: 1.125rem;     /* 18px */
    --text-h5: 1.25rem;        /* 20px */
    --text-h4: 1.5rem;         /* 24px */
    --text-h3: 2rem;           /* 32px */
    --text-h2: 2.5rem;         /* 40px */
    --text-h1: 3.5rem;         /* 56px */
}

/*
 * The only token that changes with the viewport. Spacing and type stay fixed,
 * so the 8-point grid holds everywhere; blocks step their own headings down on
 * small screens rather than the token doing it for them.
 */
@media (min-width: 1024px) {
    :root {
        --gutter: 4rem;
    }
}