/*
 * Podologia Miller – Design-Tokens (v2)
 * STATUS: VORLÄUFIG. Keine freigegebenen Markenwerte.
 * Pantone-Referenzen (Amethyst Purple 19-3520 TCX, Rich Gold 16-0836 TCX) sind nur Stimmungsreferenz,
 * die HEX-Werte hier sind eigene, am Bildschirm und per Kontrastberechnung geprüfte Arbeitswerte.
 * Farben, Schriften und Abstände nur hier ändern; Komponenten nutzen ausschließlich die semantischen Rollen.
 * Kontrastwerte: docs/DESIGN_SYSTEM.md
 */
:root {
	/* ---------- Basispalette (vorläufig) ---------- */
	--pm-amethyst-950: #1b0e24;
	--pm-amethyst-900: #24132f;
	--pm-amethyst-800: #341c44;
	--pm-amethyst-600: #5a3a70;
	--pm-amethyst-200: #ddd0e4;
	--pm-amethyst-100: #f1ebf4;
	--pm-gold-300: #e2cb9b;
	--pm-gold-400: #d4b477;
	--pm-gold-500: #c4a262;
	--pm-gold-700: #7d6128; /* einzige Gold-Stufe für Text auf hellem Grund */
	--pm-silver-200: #dfe2e6;
	--pm-silver-300: #c9cdd3;
	--pm-silver-500: #9aa0a8;
	--pm-silver-700: #5b6068;
	--pm-emerald-700: #1e5a4c; /* ergänzende Farbe, nicht Teil des Hauptsystems; derzeit ungenutzt */
	--pm-cream: #faf6ef;
	--pm-stone: #f2ebe1;
	--pm-taupe: #d9cfc2;
	--pm-white: #ffffff;
	--pm-ink: #221b27;
	--pm-muted: #5d5464;
	--pm-error-700: #a3262a;
	--pm-error-100: #fbeaea;
	--pm-success-700: #2f6b3a;

	/* ---------- Akzent (Gold, Vergleich Silber über .pm-accent-silver) ---------- */
	--pm-accent: var(--pm-gold-500);        /* Linien, Icons, Flächen, Text auf Dunkel */
	--pm-accent-strong: var(--pm-gold-400); /* Hover auf Dunkel, Fokus */
	--pm-accent-soft: var(--pm-gold-300);   /* feine Ornamente auf Dunkel */
	--pm-accent-text: var(--pm-gold-700);   /* Akzent als Text auf Hell (5,4:1 auf Creme) */
	--pm-accent-tint: rgba(196, 162, 98, 0.14);

	/* ---------- Semantische Rollen ---------- */
	--pm-color-brand: var(--pm-amethyst-900);
	--pm-color-brand-strong: var(--pm-amethyst-800);
	--pm-color-brand-deep: var(--pm-amethyst-950);
	--pm-color-bg: var(--pm-white);
	--pm-color-surface: var(--pm-cream);
	--pm-color-surface-alt: var(--pm-stone);
	--pm-color-surface-tint: var(--pm-amethyst-100);
	--pm-color-text: var(--pm-ink);
	--pm-color-text-muted: var(--pm-muted);
	--pm-color-text-inverse: var(--pm-cream);
	--pm-color-text-inverse-muted: rgba(250, 246, 239, 0.78);
	--pm-color-heading: var(--pm-amethyst-900);
	--pm-color-link: var(--pm-amethyst-600);
	--pm-color-link-hover: var(--pm-amethyst-900);
	--pm-color-border: #e6dfe9;
	--pm-color-border-strong: var(--pm-amethyst-200);
	--pm-color-border-inverse: rgba(250, 246, 239, 0.16);
	--pm-color-focus: var(--pm-amethyst-600);
	--pm-color-focus-inverse: var(--pm-accent-strong);
	--pm-color-error: var(--pm-error-700);
	--pm-color-error-bg: var(--pm-error-100);
	--pm-color-success: var(--pm-success-700);

	/* ---------- Typografie ---------- */
	--pm-font-display: "PM Literata", Georgia, "Noto Serif", "Times New Roman", serif;
	--pm-font-text: "PM Manrope", system-ui, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
	--pm-text-2xs: 0.75rem;    /* 12, Zusatzangaben (Rubrik auf Journalkarten) */
	--pm-text-xs: 0.8125rem;   /* 13 */
	--pm-text-sm: 0.9375rem;   /* 15 */
	--pm-text-base: 1.0625rem; /* 17 */
	--pm-text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
	--pm-text-xl: clamp(1.3125rem, 1.15rem + 0.7vw, 1.75rem);
	--pm-text-h3: clamp(1.25rem, 1.14rem + 0.5vw, 1.5625rem);
	/* Journal (Designfeedback 3): Artikel-H2 24 px (320) bis 33 px (ab 1300), Artikel-H3 20 bis 24 px; Kartentitel 18 bis 20 px;
	   Bereichsüberschrift der Übersicht 22 bis 28 px. Vorher Artikel-H2 26 bis 40 px, Kartentitel --pm-text-xl (21 bis 28 px). */
	--pm-text-article-h2: clamp(1.5rem, 1.32rem + 0.9vw, 2.0625rem);
	--pm-text-article-h3: clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
	--pm-text-card-title: clamp(1.125rem, 1.05rem + 0.25vw, 1.3125rem);
	--pm-text-section-title: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
	--pm-text-h2: clamp(1.75rem, 1.45rem + 1.4vw, 2.75rem);
	--pm-text-h1: clamp(2.125rem, 1.6rem + 2.6vw, 3.75rem);
	--pm-text-statement: clamp(1.5rem, 1.25rem + 1.3vw, 2.375rem);
	--pm-leading-tight: 1.12;
	--pm-leading-snug: 1.3;
	--pm-leading-text: 1.7;
	--pm-weight-text: 450;
	--pm-weight-strong: 650;
	--pm-tracking-caps: 0.16em;
	--pm-tracking-caps-soft: 0.12em; /* Dachzeile im Journalkopf */

	/* ---------- Abstände, Raster ---------- */
	--pm-space-1: 0.25rem;
	--pm-space-2: 0.5rem;
	--pm-space-3: 0.75rem;
	--pm-space-4: 1rem;
	--pm-space-5: 1.25rem;
	--pm-space-6: 1.5rem;
	--pm-space-8: 2rem;
	--pm-space-10: 2.5rem;
	--pm-space-12: 3rem;
	--pm-space-16: 4rem;
	--pm-space-section: clamp(4rem, 2.6rem + 6vw, 8.5rem);
	--pm-container: 1200px;
	--pm-container-narrow: 760px;
	--pm-gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
	--pm-measure: 66ch;

	/* ---------- Form ---------- */
	--pm-radius-sm: 6px;
	--pm-radius-md: 14px;
	--pm-radius-lg: 24px;
	--pm-radius-arch: 999px 999px var(--pm-radius-md) var(--pm-radius-md);
	--pm-radius-pill: 999px;
	--pm-border-hair: 1px solid var(--pm-color-border);
	--pm-shadow-soft: 0 18px 40px -28px rgba(36, 19, 47, 0.45);
	--pm-shadow-lift: 0 26px 60px -32px rgba(36, 19, 47, 0.55);
	--pm-transition: 180ms cubic-bezier(0.2, 0.6, 0.2, 1);

	/* ---------- Bedienelemente ---------- */
	--pm-touch-min: 44px;
	--pm-icon-box: 1.375rem;      /* Symbole in Hinweis-, Warn-, Frage- und Tippkästen (Korrekturrunde Journal) */
	--pm-icon-inline: 1.1em;      /* Symbol im Fließtext (Kurzfassung) */
	--pm-table-cell-min: 9rem;    /* Mindestbreite Tabellenzelle; mit Liste breiter */
	--pm-table-cell-min-list: 15rem;
	--pm-toc-bar-h: 52px;         /* mobile Inhaltsleiste unter dem Header */
	--pm-scroll-arrow: 2.25rem;   /* Pfeile am Themenfilter des Journals */
	--pm-scroll-fade: 3rem;       /* Verlauf am Rand des Themenfilters */
	--pm-to-top-size: 48px; /* Nach-oben-Knopf (Lauf 2.2) */
	--pm-focus-ring: 0 0 0 3px var(--pm-color-bg), 0 0 0 5px var(--pm-color-focus);

	/* ---------- Header und Logo ---------- */
	--pm-header-h: 88px;
	--pm-header-h-fixed: 72px;
	--pm-header-h-mobile: 68px;
	--pm-nav-gap: var(--pm-space-8);
	/* Freigegebenes Querformat-Logo (ca. 1,9 : 1): Höhe so, dass „MILLER“ klar und „PODOLOGIA“ noch lesbar bleibt. */
	--pm-logo-height: 64px;
	--pm-logo-height-fixed: 54px;
	--pm-logo-height-mobile: 52px;
	--pm-logo-height-small: 46px;  /* bis 380 px */
	--pm-logo-height-footer: 114px; /* Runde 4: vorher 84 px (sichtbar 81 px), +30 px; Bild 498 × 240 px, auch bei 2× scharf */
}

/* Akzentvergleich Gold vs. Silber (lokal: ?pm_accent=silver). Nur Akzentwerte, keine Layout-/Kontrastrollen. */
.pm-accent-silver {
	--pm-accent: var(--pm-silver-300);
	--pm-accent-strong: var(--pm-silver-200);
	--pm-accent-soft: var(--pm-silver-200);
	--pm-accent-text: var(--pm-silver-700);
	--pm-accent-tint: rgba(154, 160, 168, 0.16);
}