* {
    font-family:
        "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif !important;
}

/* The universal override above also lands on Font Awesome <i> elements; their
   ::before glyph then inherits the text font and renders as an empty box.
   Re-assert the icon font (Font Awesome 5 Free) for the FA marker classes so the
   glyphs come back. Only font-family is re-set — FA's own stylesheet still owns
   font-weight (900 solid / 400 regular / 400 brands) and the glyph content. */
.fa,
.fas,
.far,
.fal,
.fad,
.fab,
.fa-solid,
.fa-regular,
.fa-brands {
    font-family:
        "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome", sans-serif !important;
}

html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   Anaplast design tokens
   --------------------------------------------------------------------------
   Single source of truth for every instances/anaplast cms/individual
   component. layout-1 always loads this file, so these variables are
   page-global regardless of which components a page uses.

   Anaplast produces exterior and interior shading systems (roller shutters,
   blinds, screens, awnings) and sells them through a B2B ordering portal for
   registered installer / dealer partners. The visual language is built for
   that audience: trade professionals, mostly men aged ~40-60. That means
   high text contrast, large hit targets (>=44px), an always-visible keyboard
   focus ring, flat / functional elevation, tight radii, and no decorative
   motion. Sober working tool, not a consumer lifestyle site.

   Brand colours are sampled from instances/anaplast/static/assets/instance-logo.png
   (amber #f5a02e sun/arch, sky #6fb7ea panes, leaf sill, earth #4a2e1e mound,
   charcoal wordmark). Leaf and both inks are then darkened from the raw sample so
   button and body text clear WCAG AA for the target readers.
   See DESIGN_MANUAL.md at the instance root for the full manual.
   ========================================================================== */
:root {
    /* --- Brand palette (from the logo) --- */
    --apl-amber: #f5a02e;
    --apl-amber-hover: #d07f13;
    --apl-amber-tint: #fef3e2;
    --apl-sky: #6fb7ea;
    --apl-sky-hover: #4c9fdd;
    --apl-sky-tint: #eaf4fc;
    --apl-leaf: #6b8a2e;
    --apl-leaf-hover: #5a7526;
    --apl-leaf-tint: #eef2e1;
    --apl-earth: #4a2e1e;

    /* --- Semantic aliases (legacy names kept so older components keep working) --- */
    --apl-accent: var(--apl-amber);
    --apl-accent-hover: var(--apl-amber-hover);
    --apl-accent-tint: var(--apl-amber-tint);
    --apl-success: var(--apl-leaf);
    --apl-success-hover: var(--apl-leaf-hover);

    /* --- Ink & surfaces --- */
    --heading-color: #23282a;
    --text-color: #3c4346;
    --apl-text-muted: #5b6367;
    /* amber is an industrial signal colour — pair it with dark ink, not white
       (white on #f5a02e is ~1.9:1 and unreadable for the target audience) */
    --apl-on-accent: #23282a;
    --apl-on-commerce: #ffffff;
    --apl-surface: #ffffff;
    --apl-surface-alt: #f4f5f6;
    --apl-surface-muted: #e6e8ea;
    --apl-surface-invert: #23282a;
    --apl-on-invert: #e8eaea;
    --apl-border: #d3d7d9;
    --apl-border-strong: #b7bcbf;

    /* --- Overlays / scrims (used over imagery, keep every component in sync) --- */
    --apl-overlay: rgba(24, 26, 27, 0.55);
    --apl-overlay-strong: rgba(24, 26, 27, 0.82);
    --apl-scrim: rgba(24, 26, 27, 0.42);

    /* --- Focus ring (always visible, never colour-only) --- */
    --apl-focus: 3px solid var(--apl-amber-hover);
    --apl-focus-offset: 2px;

    /* --- Typography --- */
    --font-size: 1.25rem;
    --margin-block-end: 3rem;
    --apl-text-xs: 0.875rem;
    --apl-text-sm: 1rem;
    --apl-text-base: 1.125rem;
    --apl-text-lg: 1.375rem;
    --apl-text-xl: 1.75rem;
    --apl-text-2xl: 2.25rem;
    --apl-text-3xl: 3rem;
    --apl-leading-tight: 1.2;
    --apl-leading-normal: 1.65;
    --apl-tracking-caps: 0.08em;

    /* --- Sizing --- */
    --apl-control-min: 2.75rem; /* 44px minimum hit target for buttons / toggles */

    /* --- Spacing scale --- */
    --apl-space-1: 0.5rem;
    --apl-space-2: 1rem;
    --apl-space-3: 1.5rem;
    --apl-space-4: 2rem;
    --apl-space-5: 3rem;
    --apl-space-6: 4rem;
    --apl-space-7: 6rem;

    /* --- Radius (tight / utilitarian) --- */
    --apl-radius-sm: 0.375rem;
    --apl-radius-md: 0.625rem;
    --apl-radius-lg: 0.875rem;
    --apl-radius-pill: 999rem;

    /* --- Elevation (flat & functional; -lg is reserved for true overlays:
           the gallery lightbox and the product order-picker popup) --- */
    --apl-shadow-sm: 0 1px 2px rgba(35, 40, 42, 0.08), 0 1px 3px rgba(35, 40, 42, 0.06);
    --apl-shadow-md: 0 2px 4px rgba(35, 40, 42, 0.08), 0 6px 16px rgba(35, 40, 42, 0.1);
    --apl-shadow-lg: 0 16px 40px rgba(35, 40, 42, 0.22);

    /* --- Motion --- */
    --apl-transition: 0.15s ease;

    /* --- Layout --- */
    --apl-container: 94.5rem; /* wide layout band (nav, product rows, footer) */
    --apl-measure: 52rem; /* comfortable reading width for prose blocks */
    --apl-gutter: 1.5rem; /* minimum side padding below the container width */
}