/**
 * DeutschShirt - Design Tokens
 * System: "Praezision Print"
 *
 * Every value in this file maps 1:1 to a token defined in DESIGN.md.
 * Do not hard-code colours, sizes or spacing anywhere else in the theme.
 * Always consume these custom properties.
 */

:root {
    /* -----------------------------------------------------------------
	 * Colour - Surface tiers
	 * ----------------------------------------------------------------- */
    --ds-surface: #f8f9ff;
    --ds-surface-dim: #cbdbf5;
    --ds-surface-bright: #f8f9ff;
    --ds-surface-container-lowest: #ffffff;
    --ds-surface-container-low: #eff4ff;
    --ds-surface-container: #e5eeff;
    --ds-surface-container-high: #dce9ff;
    --ds-surface-container-highest: #d3e4fe;
    --ds-surface-variant: #d3e4fe;
    --ds-surface-tint: #a73a00;

    /* -----------------------------------------------------------------
	 * Colour - Content on surface
	 * ----------------------------------------------------------------- */
    --ds-on-surface: #0b1c30;
    --ds-on-surface-variant: #5a4138;
    --ds-inverse-surface: #213145;
    --ds-inverse-on-surface: #eaf1ff;
    --ds-outline: #8e7166;
    --ds-outline-variant: #e2bfb2;

    /* -----------------------------------------------------------------
	 * Colour - Primary (Signal Amber / conversion engine)
	 * ----------------------------------------------------------------- */
    --ds-primary: #a33900;
    --ds-on-primary: #ffffff;
    --ds-primary-container: #cc4900;
    --ds-on-primary-container: #fffbff;
    --ds-inverse-primary: #ffb599;
    --ds-primary-fixed: #ffdbce;
    --ds-primary-fixed-dim: #ffb599;
    --ds-on-primary-fixed: #370e00;
    --ds-on-primary-fixed-variant: #7f2b00;

    /* -----------------------------------------------------------------
	 * Colour - Secondary (Crimson Rose / urgency + distinction)
	 * ----------------------------------------------------------------- */
    --ds-secondary: #ba0035;
    --ds-on-secondary: #ffffff;
    --ds-secondary-container: #e21e49;
    --ds-on-secondary-container: #fffbff;
    --ds-secondary-fixed: #ffdada;
    --ds-secondary-fixed-dim: #ffb3b6;
    --ds-on-secondary-fixed: #40000c;
    --ds-on-secondary-fixed-variant: #920028;

    /* -----------------------------------------------------------------
	 * Colour - Tertiary (Slate / structural anchor)
	 * ----------------------------------------------------------------- */
    --ds-tertiary: #545c72;
    --ds-on-tertiary: #ffffff;
    --ds-tertiary-container: #6c748b;
    --ds-on-tertiary-container: #fefcff;
    --ds-tertiary-fixed: #dae2fd;
    --ds-tertiary-fixed-dim: #bec6e0;
    --ds-on-tertiary-fixed: #131b2e;
    --ds-on-tertiary-fixed-variant: #3f465c;

    /* -----------------------------------------------------------------
	 * Colour - Error
	 * ----------------------------------------------------------------- */
    --ds-error: #ba1a1a;
    --ds-on-error: #ffffff;
    --ds-error-container: #ffdad6;
    --ds-on-error-container: #93000a;

    /* -----------------------------------------------------------------
	 * Colour - Background aliases
	 * ----------------------------------------------------------------- */
    --ds-background: #f8f9ff;
    --ds-on-background: #0b1c30;

    /* -----------------------------------------------------------------
	 * Colour - Trust & compliance tokens (DESIGN.md "Trust & Compliance")
	 * ----------------------------------------------------------------- */
    --ds-trust-green: #16a34a;
    --ds-trust-green-tint: #f0fdf4;
    --ds-trust-green-border: #bbf7d0;
    --ds-trust-green-text: #15803d;
    --ds-dhl-yellow: #ffcc00;
    --ds-dhl-red: #d40511;

    /* -----------------------------------------------------------------
	 * Colour - Neutral scale (DESIGN.md "Neutral")
	 * ----------------------------------------------------------------- */
    --ds-neutral-50: #f8fafc;
    --ds-neutral-100: #f1f5f9;
    --ds-neutral-200: #e2e8f0;
    --ds-neutral-300: #cbd5e1;
    --ds-neutral-400: #94a3b8;
    --ds-neutral-500: #64748b;
    --ds-neutral-900: #0f172a;
    --ds-neutral-950: #020617;

    /* -----------------------------------------------------------------
	 * Typography - Families
	 * ----------------------------------------------------------------- */
    --ds-font-headline: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ds-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif;

    /* -----------------------------------------------------------------
	 * Typography - Scale (size / line-height / weight / tracking)
	 * ----------------------------------------------------------------- */
    --ds-headline-xl-size: 56px;
    --ds-headline-xl-line: 64px;
    --ds-headline-xl-weight: 800;
    --ds-headline-xl-tracking: -0.03em;

    --ds-headline-xl-mobile-size: 36px;
    --ds-headline-xl-mobile-line: 44px;
    --ds-headline-xl-mobile-weight: 800;
    --ds-headline-xl-mobile-tracking: -0.025em;

    --ds-headline-lg-size: 40px;
    --ds-headline-lg-line: 48px;
    --ds-headline-lg-weight: 700;
    --ds-headline-lg-tracking: -0.02em;

    --ds-headline-lg-mobile-size: 28px;
    --ds-headline-lg-mobile-line: 36px;
    --ds-headline-lg-mobile-weight: 700;
    --ds-headline-lg-mobile-tracking: -0.02em;

    --ds-headline-md-size: 28px;
    --ds-headline-md-line: 36px;
    --ds-headline-md-weight: 700;
    --ds-headline-md-tracking: -0.015em;

    --ds-headline-sm-size: 20px;
    --ds-headline-sm-line: 28px;
    --ds-headline-sm-weight: 600;
    --ds-headline-sm-tracking: -0.01em;

    --ds-body-lg-size: 18px;
    --ds-body-lg-line: 28px;
    --ds-body-lg-weight: 400;

    --ds-body-md-size: 15px;
    --ds-body-md-line: 24px;
    --ds-body-md-weight: 400;

    --ds-body-sm-size: 13px;
    --ds-body-sm-line: 20px;
    --ds-body-sm-weight: 400;

    --ds-label-lg-size: 14px;
    --ds-label-lg-line: 20px;
    --ds-label-lg-weight: 600;
    --ds-label-lg-tracking: 0.01em;

    --ds-label-md-size: 12px;
    --ds-label-md-line: 16px;
    --ds-label-md-weight: 600;
    --ds-label-md-tracking: 0.04em;

    --ds-label-sm-size: 11px;
    --ds-label-sm-line: 14px;
    --ds-label-sm-weight: 700;
    --ds-label-sm-tracking: 0.06em;

    /* -----------------------------------------------------------------
	 * Spacing - 8pt baseline
	 * ----------------------------------------------------------------- */
    --ds-space-xs: 0.25rem;
    --ds-space-sm: 0.5rem;
    --ds-space-md: 1rem;
    --ds-space-lg: 1.5rem;
    --ds-space-xl: 2.5rem;

    --ds-gutter: 1.5rem;
    --ds-gutter-mobile: 1rem;
    --ds-margin: 3rem;
    --ds-margin-mobile: 1.25rem;

    /* -----------------------------------------------------------------
	 * Layout - container widths (DESIGN.md "Layout & Spacing")
	 * ----------------------------------------------------------------- */
    --ds-container-landing: 1280px;
    --ds-container-catalog: 1440px;
    --ds-container-narrow: 896px;

    /* -----------------------------------------------------------------
	 * Shapes - Soft Industrial Geometry (Level 1)
	 * ----------------------------------------------------------------- */
    --ds-radius-sm: 0.125rem;
    --ds-radius: 0.25rem;
    --ds-radius-md: 0.375rem;
    --ds-radius-lg: 0.5rem;
    --ds-radius-xl: 0.75rem;
    --ds-radius-full: 9999px;

    /* -----------------------------------------------------------------
	 * Elevation - tactile structural planes, no cloud shadows
	 * ----------------------------------------------------------------- */
    --ds-shadow-none: none;
    --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ds-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06);
    --ds-shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    --ds-shadow-lg: 0 8px 24px -2px rgba(15, 23, 42, 0.12);
    --ds-shadow-xl: 0 12px 32px -4px rgba(15, 23, 42, 0.08);
    --ds-shadow-2xl: 0 24px 48px -8px rgba(15, 23, 42, 0.18);
    --ds-shadow-header: 0 1px 8px rgba(0, 0, 0, 0.04);
    --ds-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05);

    /* -----------------------------------------------------------------
	 * Borders
	 * ----------------------------------------------------------------- */
    --ds-border-width: 1px;
    --ds-border-width-strong: 1.5px;
    --ds-border-width-focus: 2px;
    --ds-border-card: var(--ds-border-width) solid var(--ds-neutral-200);
    --ds-border-input: var(--ds-border-width) solid var(--ds-neutral-300);

    /* -----------------------------------------------------------------
	 * Motion
	 * ----------------------------------------------------------------- */
    --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ds-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ds-duration-fast: 120ms;
    --ds-duration: 200ms;
    --ds-duration-slow: 300ms;

    /* -----------------------------------------------------------------
	 * Z-index scale
	 * ----------------------------------------------------------------- */
    --ds-z-base: 1;
    --ds-z-sticky: 40;
    --ds-z-header: 50;
    --ds-z-drawer: 60;
    --ds-z-overlay: 70;
    --ds-z-modal: 80;

    /* -----------------------------------------------------------------
	 * Component metrics
	 * ----------------------------------------------------------------- */
    --ds-header-height: 6rem;
    --ds-announcement-height: 2rem;
    --ds-control-height: 2.75rem;
    --ds-control-height-sm: 2.25rem;
    --ds-control-height-lg: 3.25rem;
    --ds-card-media-ratio: 1 / 1;
    --ds-collection-card-height: 400px;
}

/* ---------------------------------------------------------------------
 * Reduced motion - respect user preference globally
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --ds-duration-fast: 0ms;
        --ds-duration: 0ms;
        --ds-duration-slow: 0ms;
    }
}