/* ==========================================================================
   HumanoSys design tokens
   One place to adjust colour, type, spacing, radius and motion.
   Loaded after the legacy stylesheets; hs-components.css and hs-pages.css
   read everything from here.
   ========================================================================== */
:root {
    /* Colour: a clean white/near-black canvas with one brand accent */
    --hs2-ink: #111318;          /* headings, primary buttons */
    --hs2-ink-2: #2b2f36;        /* primary button hover */
    --hs2-text: #3d424a;         /* body copy on light */
    --hs2-muted: #6b7079;        /* secondary copy on light */
    --hs2-line: #e3e4e8;         /* hairlines on light */
    --hs2-line-strong: #c9ccd2;
    --hs2-bg: #ffffff;
    --hs2-surface: #f7f7f7;      /* section / tile surface (Samsung US uses #f7f7f7) */
    --hs2-surface-2: #eeeeee;    /* hover surface */
    --hs2-dark: #0c0d10;         /* dark sections */
    --hs2-dark-2: #17191e;       /* cards on dark */
    --hs2-on-dark: #f5f5f7;
    --hs2-on-dark-muted: #a9adb5;
    --hs2-accent: #f1c52b;       /* HumanoSys yellow: highlights, focus, markers */
    --hs2-accent-ink: #6b5300;   /* accent-coloured text on white (AA) */
    --hs2-accent-soft: #fdf3cf;
    --hs2-focus: #1a5fd0;        /* focus ring (high contrast on white and yellow) */
    --hs2-success: #1f7a4d;
    --hs2-danger: #b3261e;

    /* Typography */
    --hs2-font-display: "Manrope", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hs2-font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --hs2-fs-hero: clamp(2.75rem, 1.4rem + 4.6vw, 6rem);      /* up to 96px: hero reads at a glance */
    --hs2-fs-kv: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);    /* up to 68px feature banners */
    --hs2-fs-kv-desc: clamp(1.25rem, 1rem + .9vw, 1.875rem); /* up to 30px banner copy */
    --hs2-fs-tile: clamp(1.125rem, 1rem + .5vw, 1.5rem);     /* 24px tile titles */
    --hs2-fs-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
    --hs2-fs-h2: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);     /* 40px section titles */
    --hs2-fs-h3: clamp(1.2rem, 1.05rem + .5vw, 1.5rem);
    --hs2-fs-lead: clamp(1.05rem, .98rem + .35vw, 1.25rem);
    --hs2-fs-body: 1rem;
    --hs2-fs-small: .875rem;
    --hs2-fs-eyebrow: .8125rem;
    --hs2-tracking-display: -.035em;
    --hs2-lh-display: 1.06;

    /* Space & layout */
    --hs2-container: 1440px;
    --hs2-gutter: clamp(16px, 4vw, 48px);
    --hs2-section: clamp(64px, 5vw + 32px, 128px);
    --hs2-section-tight: clamp(48px, 3vw + 24px, 88px);
    --hs2-gap: clamp(16px, 1.5vw, 24px);
    --hs2-header-h: 52px;       /* main bar; slimmer to suit the 12px apple.com nav type */
    --hs2-utility-h: 36px;      /* small top bar that scrolls away */
    --hs2-subnav-h: 56px;

    /* Shape & depth */
    /* Samsung US: product tiles and imagery are square-cornered; only buttons are pills. */
    --hs2-radius-sm: 8px;        /* inputs, small controls */
    --hs2-radius: 0px;           /* tiles, cards */
    --hs2-radius-lg: 0px;        /* media, banners */
    --hs2-btn-h: 40px;           /* CTA height */
    --hs2-radius-pill: 999px;
    --hs2-shadow-sm: 0 1px 2px rgba(17, 19, 24, .06);
    --hs2-shadow: 0 10px 30px rgba(17, 19, 24, .08);
    --hs2-shadow-lg: 0 24px 60px rgba(17, 19, 24, .14);

    /* Motion */
    --hs2-ease: cubic-bezier(.2, .7, .2, 1);
    --hs2-fast: .18s;
    --hs2-med: .35s;
    --hs2-slow: .7s;
    --hs2-kv-interval: 7s;       /* hero slide duration */
}

@media (max-width: 980px) {
    :root { --hs2-header-h: 60px; --hs2-subnav-h: 52px; }
}

@media (prefers-reduced-motion: reduce) {
    :root { --hs2-fast: 0s; --hs2-med: 0s; --hs2-slow: 0s; }
}