/*
 * 00-tokens.css — die einzige Datei im Theme, die Farbwerte schreibt.
 *
 * Quelle: docs/phase-02/DESIGN_FREEZE.md § 2 (eingefrorener Tokensatz,
 * neun Korrekturen gegenueber DESIGN.md-Frontmatter) und
 * photon-industries-website-concept-v1/DESIGN.md fuer Typografie, Raster,
 * Abstaende und Radien.
 *
 * Regel aus NO-6: In allen anderen Dateien loest jede Farbe ueber var() auf.
 * Wer hier einen Wert aendert, aendert ihn ueberall — das ist beabsichtigt.
 *
 * Die WordPress-Preset-Variablen (--wp--preset--color--*) kommen aus
 * theme.json und tragen dieselben Werte. Die Photon-Variablen sind der Weg,
 * auf dem das Theme sie benutzt; theme.json ist der Weg, auf dem der Editor
 * sie anbietet. Beide Quellen werden aus DESIGN_FREEZE.md gepflegt.
 */

:root {
	/* --- Flaechen -------------------------------------------------------- */
	--photon-primary: #0B0C0F;
	--photon-secondary: #F2EFE8;
	--photon-surface-light: #FAF8F3;
	--photon-surface-light-muted: #E8E4DA;
	--photon-surface-dark: #14161A;
	--photon-surface-dark-raised: #1C1F24;

	/* --- Text ------------------------------------------------------------ */
	--photon-text-on-light: #111216;
	--photon-text-on-dark: #F5F2EB;
	--photon-text-muted-light: #5C6168;
	--photon-text-muted-dark: #A7ACB4;

	/* --- Akzent ----------------------------------------------------------
	 * #5B56E8 traegt zwei Rollen, die sich widersprechen: als FLAECHE
	 * besteht Text darauf, als TEXT besteht es auf gedaempften und dunklen
	 * Flaechen nicht. Aufgeloest ueber zwei abgeleitete Textvarianten
	 * desselben Violetts — kein zweiter Markenton.
	 */
	--photon-tertiary: #5B56E8;
	--photon-tertiary-hover: #4842C7;
	--photon-tertiary-active: #3732A6;
	--photon-tertiary-on-light: #4842C7;
	--photon-tertiary-on-dark: #8A86F5;

	/* Signaturfarbe. Nur auf Dunkel (14,02:1). Nie Text auf Hell (1,31:1). */
	--photon-cyan: #A6E3FF;

	/* --- Rahmen ----------------------------------------------------------
	 * Zwei Staerken je Helligkeit: Bedienelemente brauchen 3:1 nach
	 * WCAG 1.4.11, dekorative Trennlinien nicht.
	 */
	--photon-border-light-control: #857F73;
	--photon-border-light-decor: #CFCBC1;
	--photon-border-dark-control: #666D79;
	--photon-border-dark-decor: #343840;

	/* --- Status ---------------------------------------------------------- */
	--photon-success: #1F7A52;
	--photon-error: #B8404A;

	/* --- Fokus -----------------------------------------------------------
	 * #5B56E8 gegen alle sechs Flaechen-Token: 3,10 bis 5,02:1.
	 * Der Versatz zeigt die Untergrundfarbe und erzeugt den doppelten Ring.
	 */
	--photon-focus: #5B56E8;
	--photon-focus-width: 2px;
	--photon-focus-offset: 2px;

	/* --- Schrift --------------------------------------------------------- */
	--photon-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--photon-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	/*
	 * Fluide Skalen. Die Endwerte sind die Stufen aus DESIGN.md; die
	 * Untergrenzen folgen der dortigen Vorgabe "Mobile-Hero 44 bis 56 px"
	 * statt einer linearen Verkleinerung.
	 */
	--photon-fs-display: clamp(2.75rem, 1.1rem + 6.9vw, 6rem);      /* 44 -> 96 */
	--photon-fs-xl: clamp(2.375rem, 1.2rem + 4.9vw, 4.5rem);        /* 38 -> 72 */
	--photon-fs-lg: clamp(1.875rem, 1.25rem + 2.6vw, 3rem);         /* 30 -> 48 */
	--photon-fs-md: clamp(1.625rem, 1.35rem + 1.15vw, 2rem);        /* 26 -> 32 */
	--photon-fs-sm: 1.5rem;                                          /* 24 */
	--photon-fs-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 -> 20 */
	--photon-fs-body-md: 1.0625rem;                                  /* 17 */
	--photon-fs-body-sm: 0.9375rem;                                  /* 15 */
	--photon-fs-label-lg: 0.875rem;                                  /* 14 */
	--photon-fs-label-md: 0.75rem;                                   /* 12 */
	--photon-fs-data-xl: clamp(2rem, 1.3rem + 2.9vw, 3rem);          /* 32 -> 48 */
	--photon-fs-data-md: 1rem;                                       /* 16 */

	--photon-lh-display: 0.96;
	--photon-lh-xl: 1;
	--photon-lh-lg: 1.08;
	--photon-lh-md: 1.15;
	--photon-lh-sm: 1.2;
	--photon-lh-body: 1.6;
	--photon-lh-label: 1.25;

	--photon-ls-display: -0.045em;
	--photon-ls-xl: -0.04em;
	--photon-ls-lg: -0.03em;
	--photon-ls-md: -0.02em;
	--photon-ls-sm: -0.01em;
	--photon-ls-label-lg: 0.08em;
	--photon-ls-label-md: 0.12em;
	--photon-ls-data: -0.01em;

	/* --- Abstaende -------------------------------------------------------- */
	--photon-space-xxs: 0.25rem;
	--photon-space-xs: 0.5rem;
	--photon-space-sm: 0.75rem;
	--photon-space-md: 1rem;
	--photon-space-lg: 1.5rem;
	--photon-space-xl: 2rem;
	--photon-space-2xl: 3rem;
	--photon-space-3xl: 4rem;
	--photon-space-4xl: 6rem;
	--photon-space-5xl: 9rem;
	--photon-space-section: clamp(4.5rem, 2rem + 9vw, 10rem);

	/* --- Raster ----------------------------------------------------------- */
	--photon-gutter: 1.5rem;
	--photon-content: 1128px;
	--photon-wide: 1392px;
	--photon-columns: 4;
	--photon-measure: 62ch;

	/* --- Form ------------------------------------------------------------- */
	--photon-radius-none: 0px;
	--photon-radius-xs: 2px;
	--photon-radius-sm: 4px;
	--photon-hairline: 1px;

	/* --- Bewegung ---------------------------------------------------------
	 * Easing-Kurven fehlten in DESIGN.md und MOTION.md. Hier festgelegt,
	 * nachgetragen in docs/build/BUILD_01.md.
	 * Zeitfenster aus PHASE_02_PLAN.md S8.
	 */
	--photon-ease-align: cubic-bezier(0.22, 0.61, 0.36, 1);
	--photon-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
	--photon-dur-micro: 160ms;
	--photon-dur-state: 240ms;
	--photon-dur-reveal: 560ms;
	--photon-dur-signature: 900ms;

	/* --- Schichten --------------------------------------------------------- */
	--photon-z-banner: 60;
	--photon-z-header: 50;
	--photon-z-overlay: 70;
	--photon-header-height: 5rem;
	--photon-banner-height: 0rem;
}

@media (min-width: 48em) {
	:root {
		--photon-columns: 6;
	}
}

@media (min-width: 64em) {
	:root {
		--photon-columns: 12;
		--photon-header-height: 6rem;
	}
}