/* ============================================================================
   UZTEX GROUP — DESIGN TOKENS
   Single source of truth for colour, type, space, motion and elevation.
   Nothing below this file should contain a raw hex value or a magic px number.

   Two surfaces carry the whole brand:
     PAPER — warm off-white, the default reading surface
     INK   — warm near-black, used for the "factory floor" sections
   The logo's red and orange are accents on both, never background fills for text.
   ========================================================================= */

:root {
    /* ---------------------------------------------------------------- BRAND
       Sampled directly from uztex-logo.svg. The site previously used #F97316
       for orange, which is not the logo colour. */
    --brand-red: #E5222B;
    --brand-orange: #EF8531;

    /* Text-safe variants. The logo colours are too light for small type on
       paper (red 4.14:1, orange 2.36:1 — both fail WCAG AA). Use these
       wherever the colour carries words rather than shape. */
    --brand-red-ink: #B81A22;       /* 5.92:1 on paper — AA */
    --brand-orange-ink: #B85F1B;    /* 4.05:1 on paper — AA for 18px+ */
    --brand-red-hover: #9C141C;

    /* ------------------------------------------------------------- NEUTRALS
       Warm greys. A neutral-grey ramp reads cold and cheap next to the
       cream paper, so every step carries a little red/yellow. */
    --ink-900: #12100E;
    --ink-800: #1C1917;
    --ink-700: #26221E;
    --ink-600: #332E29;
    --ink-500: #4A433C;

    --paper-0: #FFFFFF;
    --paper-50: #F7F3EE;
    --paper-100: #EFE9E1;
    --paper-200: #E2DAD0;

    --stone-600: #57504A;
    --stone-500: #6B635A;           /* 5.34:1 on paper — AA */
    --stone-300: #A69C90;           /* 7.03:1 on ink — AAA */

    /* -------------------------------------------------------------- SEMANTIC
       Components reference these, never the ramps above. */
    --surface: var(--paper-50);
    --surface-alt: var(--paper-100);
    --surface-raised: var(--paper-0);
    --surface-inverse: var(--ink-900);
    --surface-inverse-raised: var(--ink-700);

    --on-surface: var(--ink-900);
    --on-surface-muted: var(--stone-500);
    --on-inverse: var(--paper-50);
    --on-inverse-muted: var(--stone-300);

    --line: var(--paper-200);
    --line-inverse: var(--ink-600);

    --accent: var(--brand-red);              /* fills, rules, large display type */
    --accent-text: var(--brand-red-ink);     /* accent colour carrying small text */
    --accent-2: var(--brand-orange);         /* on ink only */
    --accent-2-text: var(--brand-orange-ink);/* on paper */
    --on-accent: #FFFFFF;                    /* 4.57:1 on brand red — AA */

    --focus-ring: var(--brand-red);

    /* ------------------------------------------------------------------ TYPE
       Display: Oswald. Condensed, flat-sided, engineered — the same
       proportions as the logo wordmark, and it carries Cyrillic (Archivo and
       Saira, the closest Latin matches, do not).
       Body: Inter. Neutral by design, so it never competes with the display. */
    --font-display: 'Oswald', 'Arial Narrow', system-ui, sans-serif;

    /* The company name only. The logo is set in Impact, so Impact comes first —
       Windows and macOS both ship it, and those users see the exact logo
       letterforms. iOS, Android and Linux don't, so Anton (the standard free
       stand-in, self-hosted) catches them; at display size the two are hard to
       tell apart. Both are single-weight ultra-bold by design, which is why
       .hero-title sets font-weight 400 rather than synthesising a bold. */
    --font-brand: Impact, 'Anton', 'Haettenschweiler', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

    /* Fluid scale. min is the 375px value, max the 1440px+ value. */
    --fs-display: clamp(3rem, 8.4vw, 7rem);
    --fs-h1: clamp(2.125rem, 5.4vw, 4.25rem);
    --fs-h2: clamp(1.75rem, 3.6vw, 2.875rem);
    --fs-h3: clamp(1.3125rem, 2.1vw, 1.75rem);
    --fs-h4: clamp(1.125rem, 1.5vw, 1.3125rem);
    --fs-lead: clamp(1.0625rem, 1.35vw, 1.25rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.8125rem;
    --fs-micro: 0.75rem;

    --lh-display: 0.94;
    --lh-heading: 1.06;
    --lh-snug: 1.35;
    --lh-body: 1.65;

    /* Oswald is already narrow; heavy negative tracking closes the counters. */
    --tracking-display: 0.005em;
    --tracking-heading: 0.01em;
    --tracking-eyebrow: 0.2em;
    --tracking-body: 0;

    --weight-body: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-display: 600;

    /* ----------------------------------------------------------------- SPACE
       4px base. Use the steps; don't invent values between them. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* ---------------------------------------------------------------- LAYOUT */
    --container: 1360px;
    --container-narrow: 860px;
    --gutter: clamp(20px, 4vw, 44px);
    --section-y: clamp(40px, 5vw, 84px);
    --measure: 68ch;                /* body copy line length cap */

    /* --------------------------------------------------------------- RADIUS
       Near-square. The logo has no soft corners and neither should the UI. */
    --r-xs: 2px;
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 16px;
    --r-pill: 999px;

    /* ------------------------------------------------------------- ELEVATION
       Warm-tinted shadows; pure black shadows go grey against cream. */
    --shadow-sm: 0 1px 2px rgba(18, 16, 14, .06), 0 2px 6px rgba(18, 16, 14, .04);
    --shadow-md: 0 4px 12px rgba(18, 16, 14, .08), 0 12px 32px rgba(18, 16, 14, .06);
    --shadow-lg: 0 12px 32px rgba(18, 16, 14, .12), 0 32px 72px rgba(18, 16, 14, .10);

    /* ---------------------------------------------------------------- MOTION
       One easing vocabulary for the whole site: everything decelerates in.
       Exits run at ~65% of the entry duration so the UI feels responsive. */
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-1: 160ms;                 /* hover, colour changes */
    --dur-2: 260ms;                 /* state changes, small moves */
    --dur-3: 420ms;                 /* reveals, panel transitions */
    --dur-4: 700ms;                 /* hero / section entrances */

    /* ------------------------------------------------------------------- Z */
    --z-base: 0;
    --z-raised: 10;
    --z-sticky: 40;
    --z-nav: 60;
    --z-overlay: 80;
    --z-loader: 100;

    /* --------------------------------------------------------------- TEXTURE
       A single jersey-knit loop, tiled. Used at very low opacity behind ink
       sections — reads as woven cloth rather than as a pattern. */
    --texture-weave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='16' viewBox='0 0 24 16'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='.5'%3E%3Cpath d='M0 8c3 0 3-8 6-8s3 8 6 8 3-8 6-8 3 8 6 8'/%3E%3Cpath d='M0 16c3 0 3-8 6-8s3 8 6 8 3-8 6-8 3 8 6 8'/%3E%3C/g%3E%3C/svg%3E");
}

/* Sections rendered on the dark surface flip the semantic tokens rather than
   overriding each component. Anything inside gets correct colours for free —
   including components that were designed for the paper surface.
   The named sections below already had dark backgrounds; listing them here
   means they pick up the flip without touching a single template. */
.on-ink,
.boundaries-section,
.footer-section,
.contact-form-section,
.nav-menu-overlay {
    --surface: var(--ink-900);
    --surface-alt: var(--ink-800);
    --surface-raised: var(--ink-700);
    --on-surface: var(--paper-50);
    --on-surface-muted: var(--stone-300);
    --line: var(--ink-600);
    --accent-text: var(--brand-orange);   /* 7.29:1 on ink — the red is too dark here */
    --accent-2-text: var(--brand-orange);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-1: 1ms;
        --dur-2: 1ms;
        --dur-3: 1ms;
        --dur-4: 1ms;
    }
}