/*
 * Porsche Design System v4 — design tokens.
 * Source: https://designsystem.porsche.com/v4/tokens/
 *
 * Use these custom properties; do not hard-code colors, sizes, or spacing.
 * The light-dark() function automatically resolves based on color-scheme.
 */

/* ----------------------------------------------------------------- */
/* Porsche Next webfont                                               */
/* PDS components register their font inside shadow DOM only, so the  */
/* page body needs its own @font-face declarations pointing at the    */
/* same Porsche CDN URLs.                                             */
/* ----------------------------------------------------------------- */
@font-face {
	font-family: 'Porsche Next';
	src: url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Porsche Next';
	src: url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Porsche Next';
	src: url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light dark;

	/* ----- Color: backgrounds ----- */
	--pds-color-background-base:     light-dark(#fff, hsl(225 66.7% 1.2%));
	--pds-color-background-surface:  light-dark(hsl(240 10% 95%), hsl(240 2% 10%));
	--pds-color-background-frosted:  light-dark(hsl(240 5% 70% / 0.148), hsl(240 2% 43% / 0.228));
	--pds-color-background-frosted-soft: light-dark(hsl(234 9.8% 60% / 0.06), hsl(240 3.7% 26.5% / 0.154));
	--pds-color-background-backdrop: hsl(240 5.3% 14.9% / 0.5);

	/* ----- Color: foreground / contrast ladder ----- */
	--pds-color-primary:           light-dark(hsl(225 66.7% 1.2%), hsl(225 100% 99%));
	--pds-color-contrast-higher:   light-dark(hsl(240 8.7% 9% / 0.8),  hsl(240 12.5% 96.9% / 0.78));
	--pds-color-contrast-high:     light-dark(hsl(240 7.1% 11% / 0.7), hsl(240 12.5% 96.9% / 0.67));
	--pds-color-contrast-medium:   light-dark(hsl(240 6.1% 7% / 0.6),  hsl(240 12.5% 96.9% / 0.56));
	--pds-color-contrast-low:      light-dark(hsl(240 5.3% 14.9% / 0.5), hsl(240 12.5% 96.9% / 0.45));
	--pds-color-contrast-lower:    light-dark(hsl(234 6% 32.9% / 0.324), hsl(240 1.5% 61.8% / 0.302));

	/* ----- Color: semantic ----- */
	--pds-color-info:    light-dark(hsl(228 83.2% 51%),  hsl(210 100% 54.5%));
	--pds-color-success: light-dark(hsl(115 77.5% 27.8%), hsl(157 84.9% 41.6%));
	--pds-color-warning: light-dark(hsl(28 97.7% 34.1%),  hsl(28 90.2% 56.1%));
	--pds-color-error:   light-dark(hsl(357 78% 41%),     hsl(0 96.9% 62%));

	/* ----- Color: focus ----- */
	--pds-color-focus: #1A44EA;

	/* ----- Typography: family ----- */
	--pds-font-family: 'Porsche Next', 'Arial Narrow', Arial, 'Heiti SC', SimHei, sans-serif;

	/* ----- Typography: scale (fluid) ----- */
	--pds-typescale-2xs: 0.75rem;   /* 12px */
	--pds-typescale-xs:  0.875rem;  /* 14px */
	--pds-typescale-sm:  1rem;      /* 16px */
	--pds-typescale-md:  clamp(1.13rem, 0.21vw + 1.08rem, 1.33rem);
	--pds-typescale-lg:  clamp(1.27rem, 0.51vw + 1.16rem, 1.78rem);
	--pds-typescale-xl:  clamp(1.42rem, 0.94vw + 1.23rem, 2.37rem);
	--pds-typescale-2xl: clamp(1.6rem, 1.56vw + 1.29rem, 3.16rem);
	--pds-typescale-3xl: clamp(1.8rem, 2.41vw + 1.32rem, 4.21rem);
	--pds-typescale-4xl: clamp(2.03rem, 3.58vw + 1.31rem, 5.61rem);
	--pds-typescale-5xl: clamp(2.28rem, 5.2vw + 1.24rem, 7.48rem);

	--pds-leading-normal: calc(6px + 2.125ex);

	--pds-font-weight-normal:   400;
	--pds-font-weight-semibold: 600;
	--pds-font-weight-bold:     700;

	/* ----- Spacing: fluid ----- */
	--pds-spacing-fluid-xs:  clamp(4px, 0.25vw + 3px, 8px);
	--pds-spacing-fluid-sm:  clamp(8px, 0.5vw + 6px, 16px);
	--pds-spacing-fluid-md:  clamp(16px, 1.25vw + 12px, 36px);
	--pds-spacing-fluid-lg:  clamp(32px, 2.75vw + 23px, 76px);
	--pds-spacing-fluid-xl:  clamp(48px, 3vw + 38px, 96px);
	--pds-spacing-fluid-2xl: clamp(80px, 7.5vw + 56px, 200px);

	/* ----- Spacing: static ----- */
	--pds-spacing-static-2xs: 1px;
	--pds-spacing-static-xs:  4px;
	--pds-spacing-static-sm:  8px;
	--pds-spacing-static-md:  16px;
	--pds-spacing-static-lg:  32px;
	--pds-spacing-static-xl:  48px;
	--pds-spacing-static-2xl: 80px;

	/* ----- Border radius ----- */
	--pds-radius-xs:   2px;
	--pds-radius-sm:   4px;
	--pds-radius-md:   6px;
	--pds-radius-lg:   8px;
	--pds-radius-xl:   12px;
	--pds-radius-2xl:  16px;
	--pds-radius-3xl:  24px;
	--pds-radius-4xl:  32px;
	--pds-radius-full: 9999px;

	/* ----- Container widths (club-specific, not from PDS) ----- */
	--pclub-container-narrow: 720px;
	--pclub-container-base:   1200px;
	--pclub-container-wide:   1440px;
}

/* Default to light theme; respect user OS pref via color-scheme. Override via [data-theme="dark"] / [data-theme="light"]. */
[data-theme="light"] { color-scheme: light; }
[data-theme="dark"]  { color-scheme: dark;  }