/* ARPM design tokens - Figma team library (HomePage_v2, color + type variables) */

:root {
    /* Layout */
    --layout-max: 108rem;
    --space-page-x: clamp(1.25rem, 5vw, 5.375rem);
    --space-page-x-alt: clamp(1.5rem, 6.5vw, 7rem);
    --header-logo-inset: 0.625rem;
    /* Figma @ 1728: between major sections 350px; within section 90px */
    --space-section-gap: clamp(5rem, 20vw, 21.875rem);
    --space-block-gap: clamp(3rem, 5.2vw, 5.625rem);
    --space-sectors-label-gap: clamp(4.5rem, 7.7vw, 8.3125rem);
    --site-header-height: clamp(3.25rem, 5.5vw, 4.75rem);
    /* Inline nav + search; below this width use hamburger (6 links + search need ~1400px) */
    --site-nav-inline-min: 87.5rem;
    /* P Danda center in 574×278 logo artboard (OFFSET 30,50 + bar 257,0 size 34×228) */
    --arpm-logo-anchor-x-ratio: 0.529616;
    --arpm-logo-anchor-y-ratio: 0.589928;
    --arpm-pdanda-left-ratio: 0.500871;
    --arpm-pdanda-width-ratio: 0.059233;
    --space-nav-gap: clamp(1.5rem, 6vw, 5.625rem);
    --space-label-title: 2rem;
    --width-serif-column: 48.75rem;
    --accent-dot-width: clamp(1.25rem, 2vw, 1.625rem);
    --accent-dot-height: clamp(0.625rem, 1vw, 0.8125rem);
    --radius-sm: 4px;

    /* Typography families */
    --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Type scale (Figma @ 1728px) */
    --text-nav: clamp(0.875rem, 1.05vw, 1.125rem);
    --text-hero-tagline: clamp(0.75rem, 1.1vw, 1rem);
    --text-hero-verticals: clamp(0.6875rem, 1vw, 0.875rem);
    --text-section-label: clamp(1.75rem, 2.5vw, 2.5rem);
    --text-serif-display: clamp(2rem, 4.5vw, 4rem);
    --text-service-title: clamp(1.75rem, 3vw, 3rem);
    --text-body-lg: clamp(1.125rem, 2vw, 2rem);
    --text-body: clamp(1rem, 1.4vw, 1.5rem);
    --text-button: clamp(1rem, 1.4vw, 1.5rem);
    --text-project-title: clamp(1.5rem, 2.5vw, 2.5rem);

    --line-height-tight: 1.1;
    --line-height-ui: 1.2;
    --line-height-body: 1.7;

    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-semibold: 600;

    /* Neutrals */
    --color-bg: #ffffff;
    --color-text-heading: #4b4135;
    --color-text-body: #73695d;
    --color-text-muted: #6c6c6c;
    --color-text-nav: #4b4135;
    --color-text-nav-active: #f6633e;
    --color-text-tagline: #b9b9b9;
    --color-text-service: #4b4135;
    --color-border-strong: #000000;
    --color-button-grey: #e3e0dc;
    --color-section-label: #2f2b26;

    /* Accents */
    --accent-green: #d5e74c;
    --accent-green-text: #84902b;
    --accent-orange: #f6633e;
    --accent-orange-text: #863520;
    --accent-blue: #3053e3;
    --accent-blue-text: #e1e7fe;

    /* Footer */
    --color-footer-bg: #2f2b26;
    --color-footer-text: #f7f5f2;
    --color-footer-muted: #a39a8f;
    --color-footer-link: #d8d2ca;
    --color-footer-border: rgba(255, 255, 255, 0.12);

    /* Motion */
    --transition-fast: 0.15s ease;
    --transition-ui: 0.2s ease;

    /* Logo (shared with boot loader + home hero) - design artboard 574px; displayed at 60% for hero stack room */
    --arpm-logo-scale: 0.6;
    --arpm-logo-display-width: min(calc(92vw * var(--arpm-logo-scale)), calc(35.875rem * var(--arpm-logo-scale)));
    --arpm-logo-display-max: calc(35.875rem * var(--arpm-logo-scale));
    --arpm-logo-aspect: 574 / 278;

    /*
     * Homepage intro hero (Figma @ 1728px reference).
     * Loader still uses --arpm-logo-display-width above.
     */
    --text-home-hero-headline: clamp(2rem, calc(96 / 1728 * 100vw), 6rem);
    --text-home-hero-overview: clamp(1rem, calc(24 / 1728 * 100vw), 1.5rem);
    --text-home-hero-cta: clamp(1rem, calc(24 / 1728 * 100vw), 1.5rem);
    --home-hero-intro-offset-top: 30dvh;
    --home-hero-intro-gap: clamp(1.25rem, calc(52 / 1728 * 100vw), 3.25rem);
    --home-hero-intro-logo-title-gap: clamp(0.5rem, calc(24 / 1728 * 100vw), 1.25rem);
    --home-hero-intro-overview-pad-top: clamp(1.25rem, calc(40 / 1728 * 100vw), 2.5rem);
    --home-hero-intro-overview-pad-bottom: clamp(0.5rem, calc(16 / 1728 * 100vw), 1rem);
}

/* Scale logo + hero rhythm proportionally above Figma reference (1728×1080) */
@media (min-width: 1920px) and (min-height: 1081px) {
    :root {
        /* Cap by viewport height so the logo does not overlap the bottom tagline stack */
        --arpm-logo-display-width: min(
            calc(574 / 1728 * 100vw * var(--arpm-logo-scale)),
            calc((100dvh - 18rem) * (574 / 278) * var(--arpm-logo-scale)),
            calc(58rem * var(--arpm-logo-scale))
        );
        --arpm-logo-display-max: calc(58rem * var(--arpm-logo-scale));
        --text-button: clamp(1rem, 1.05vw, 1.625rem);
        --text-home-hero-headline: clamp(2.5rem, calc(96 / 1728 * 100vw), 6rem);
        --text-home-hero-overview: clamp(1rem, calc(24 / 1728 * 100vw), 1.5rem);
        --text-home-hero-cta: clamp(1rem, calc(24 / 1728 * 100vw), 1.5rem);
    }
}

@media (min-width: 2560px) and (min-height: 1081px) {
    :root {
        --arpm-logo-display-width: min(
            calc(574 / 1728 * 100vw * var(--arpm-logo-scale)),
            calc(64rem * var(--arpm-logo-scale))
        );
        --arpm-logo-display-max: calc(64rem * var(--arpm-logo-scale));
    }
}