/* CEYLAN Design-Tokens — zusammengeführte Fassung für die Auslieferung. ERZEUGT von css-build/build-styles.py. Nicht von Hand bearbeiten. Quelle: CEYLAN 2026/tokens/{fonts,colors,typography,spacing,shape,base}.css Zwei Abweichungen von der Quelle, beide reine Auslieferungsfragen: 1. Die sechs Token-Dateien sind zusammengeführt statt per @import verkettet — @import lädt seriell und blockiert dabei das Rendering. 2. Die Schriften werden als WOFF2 eingebunden, TTF nur noch als zweite Quelle. Gleiche Schriften, 63 Prozent kleiner. Nach jedem Token-Update aus dem Design System neu erzeugen. */ /* ---------- tokens/fonts.css ---------- */ /* CEYLAN webfonts — Barlow + Barlow Semi Condensed, sonst nichts. */ @font-face{font-family:'Barlow';src:url('assets/fonts/Barlow-Regular.woff2') format('woff2'), url('assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Barlow';src:url('assets/fonts/Barlow-Medium.woff2') format('woff2'), url('assets/fonts/Barlow-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Barlow';src:url('assets/fonts/Barlow-SemiBold.woff2') format('woff2'), url('assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Barlow';src:url('assets/fonts/Barlow-Bold.woff2') format('woff2'), url('assets/fonts/Barlow-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Barlow Semi Condensed';src:url('assets/fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2'), url('assets/fonts/BarlowSemiCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Barlow Semi Condensed';src:url('assets/fonts/BarlowSemiCondensed-Bold.woff2') format('woff2'), url('assets/fonts/BarlowSemiCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} /* ---------- tokens/colors.css ---------- */ /* CEYLAN Farben. Primary #23397E (CMYK 100/86/17/2) · Secondary #8194CA (CMYK 55/39/0/0). Pantone im Brand Book nicht ausgefüllt — vor Druckproduktionen klären. Flächenverhältnis: Markenlayout 50 Blau / 35 hell / 10 dunkler Pol / 5 Sonderfläche · Website und Shop 25 / 55 / 15 / 5. Hellblau (--blue-300) nie als Text auf Weiß. */ :root{ /* Blauskala, acht Stufen mit je einer Aufgabe: 50 Info-Fläche · 100 Lauftext auf Navy · 200 Label und Haarlinie auf Navy · 300 Secondary, Muster und Logo auf dunkel · 500 Fokus · 600 Primary und Akzent · 700 Hover und Bandabstufung · 800 Active, Bandende, tiefste Fläche */ --blue-50:#E6EAF4; --blue-100:#D3D7E6; --blue-200:#B3BFDF; --blue-300:#8194CA; --blue-500:#4F6198; --blue-600:#23397E; --blue-700:#1B2C62; --blue-800:#142048; /* Neutrale sind Funktionsfarben, kühl aus dem Primary abgeleitet. Fünf Stufen: 0 Fläche · 50 ruhige Fläche · 300 Kante · 500 stiller Text und Funktionskante · 800 Text und dunkle Fläche. Naturpapier im Druck ist Materialentscheidung, kein Farbwert. 500 trägt Text und ist deshalb an die Textschwelle 4,5:1 gebunden, nicht an die Kantenschwelle 3:1 — der Wert erreicht 5,04:1 auf Weiß und 4,66:1 auf --neutral-50. Als Funktionskante bleibt er unverändert tauglich, dort genügen 3:1. */ --neutral-0:#FFFFFF; --neutral-50:#F5F6F8; --neutral-300:#C7CAD2; --neutral-500:#696F7D; --neutral-800:#232833; /* Semantische Rollen — verweisen auf Basiswerte, nie auf neue Hexcodes */ --color-primary:var(--blue-600); --color-secondary:var(--blue-300); --surface:var(--neutral-0); --surface-sunken:var(--neutral-50); --surface-inverse:var(--neutral-800); --surface-brand:var(--blue-600); --border:var(--neutral-300); --border-strong:var(--neutral-500); --text-primary:var(--neutral-800); --text-secondary:var(--neutral-500); --text-muted-inverse:var(--neutral-300); --text-inverse:var(--neutral-0); --text-brand:var(--blue-600); --accent:var(--blue-600); --accent-hover:var(--blue-700); --accent-active:var(--blue-800); /* Fokus: --focus auf hellen Flächen, --focus-inverse auf blauen und dunklen. Blau auf Blau bleibt unter 3:1 und ist damit kein sichtbarer Fokus (WCAG 1.4.11). */ --focus:var(--blue-500); --focus-inverse:var(--neutral-0); /* Verläufe: Markenverlauf und C-Pattern-Fade, beide nur als Fläche — nie hinter Text. */ --gradient-primary:linear-gradient(90deg,var(--blue-600),var(--neutral-0)); --gradient-secondary:linear-gradient(90deg,var(--blue-300),var(--neutral-0)); /* C-Pattern: positiv --blue-600 auf hell, negativ --blue-300 auf Blau. Nicht über 0.28. */ --pattern-opacity-positive:0.10; /* @kind other */ --pattern-opacity-negative:0.22; /* @kind other */ --pattern-scale:56px; /* Statusfarben, funktional und sparsam. Auf dunklen und blauen Flächen gilt die -inverse-Fassung: aufgehellte Fassung derselben Farbe, und ohne Füllfläche — dort trägt nur Kante und Text. Alle -inverse-Werte über 4,5:1 auf --neutral-800 und --blue-800. */ --success:#1E7B4D; --success-surface:#E9F4EE; --warning:#8A5600; --warning-surface:#FBF3E4; --danger:#B3261E; --danger-hover:#9A1F18; --danger-active:#821A14; --danger-surface:#FBECEB; --info:var(--blue-600); --info-surface:var(--blue-50); --success-inverse:#8FCFAE; --warning-inverse:#E8B863; --danger-inverse:#F0928C; --info-inverse:var(--blue-200); } /* ---------- tokens/typography.css ---------- */ /* CEYLAN Typografie. Barlow + Barlow Semi Condensed, sonst nichts. Arabisch: Barlow hat keine arabischen Schnitte. Es gibt bewusst kein Token dafür — eine Begleitschrift ist eine offene Lizenzentscheidung (Regel in Teil D6), kein Systemwert. Solange sie nicht getroffen ist, erbt arabischer Text den Systemstack des Geräts. Semi Condensed nur für Produktnamen, Display und technische Bezeichnungen — nie Fließtext, nie der Claim. Skala: Statement 96 · Display XL 80 · Display 48 · h1 48 · h2 34 · h3 26 · h4 21 · h5 18 · Body 16. Statement und Display XL nur für Hero, Cover, Navy-Bänder und Kennzahlen. Kein Mono-Font: Artikel-/Ersatzteilnummern in Barlow mit --numeric-technical. */ :root{ --font-core:'Barlow',system-ui,sans-serif; --font-display:'Barlow Semi Condensed','Barlow',system-ui,sans-serif; --text-statement:96px; --text-display-xl:80px; --text-display:48px; --text-h1:48px; --text-h2:34px; --text-h3:26px; --text-h4:21px; --text-h5:18px; --text-body:16px; --text-small:14px; --text-label:12px; --leading-display:1.05; --leading-heading:1.15; --leading-body:1.5; --leading-tight:1.3; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --tracking-label:0.08em; /* gesperrte Versalien: nur Labels, Kategorien, Buttons */ --tracking-display:-0.01em; --numeric-technical:tabular-nums; /* @kind other */ /* font-variant-numeric für Kennzahlen, Artikelnummern, Tabellen */ } /* ---------- tokens/spacing.css ---------- */ /* CEYLAN Raum & Raster. 8-px-Skala, Raster 12/8/4, Inhalt max. 1320 px. */ :root{ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px; --space-11:96px; --space-12:120px; --space-13:160px; --container-max:1320px; --grid-gutter:24px; --grid-margin:24px; /* Breakpoints (Referenzwerte, in Media Queries wiederholen): sm 480 (4 Spalten) · md 768 (8 Spalten) · lg 1024 · xl 1320 (12 Spalten) */ } /* ---------- tokens/shape.css ---------- */ /* CEYLAN Form & Bewegung. Formensprache scharf und technisch: minimale Rundung, sichtbare Kante. Schatten nur für Produktfotos. Die Dauer- und Kurven-Tokens gelten für Zustandswechsel in UI-Komponenten. Sie sind ein Angebot, keine Obergrenze: Animation, Video und Scroll-Choreografie sind erlaubt und werden nach eigener Dramaturgie gestaltet — verbindlich ist nur prefers-reduced-motion. */ :root{ --radius-0:0px; --radius-1:2px; /* Standard: Buttons, Inputs, Cards */ --radius-2:4px; /* Maximal: größere Container */ --border-1:1px; --border-2:2px; /* Genau zwei Schattenstufen — ausschließlich für Produktfotos deklariert */ --shadow-product-1:0 8px 24px rgba(22,27,38,0.10); --shadow-product-2:0 16px 48px rgba(22,27,38,0.16); --duration-fast:120ms; /* @kind other */ --duration-base:240ms; /* @kind other */ --ease-out:cubic-bezier(0.2,0,0,1); /* @kind other */ --ease-in-out:cubic-bezier(0.45,0,0.55,1); /* @kind other */ --z-base:0; /* @kind other */ --z-sticky:100; /* @kind other */ --z-header:200; /* @kind other */ --z-dropdown:300; /* @kind other */ --z-overlay:400; /* @kind other */ --z-modal:500; /* @kind other */ --z-tooltip:600; /* @kind other */ } @media (prefers-reduced-motion:reduce){ :root{--duration-fast:0ms; /* @kind other */ --duration-base:0ms /* @kind other */} } /* ---------- tokens/base.css ---------- */ /* CEYLAN Basisstile für Dokumente, die styles.css einbinden. */ *{box-sizing:border-box} body{margin:0;font-family:var(--font-core);font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-primary);background:var(--surface);font-variant-ligatures:common-ligatures} h1,h2,h3,h4,h5{margin:0;font-weight:var(--weight-semibold);line-height:var(--leading-heading);color:var(--text-primary)} h1{font-size:var(--text-h1)} h2{font-size:var(--text-h2)} h3{font-size:var(--text-h3)} h4{font-size:var(--text-h4)} h5{font-size:var(--text-h5)} p{margin:0} p,li,figcaption{hyphens:auto} a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;transition:color var(--duration-fast) var(--ease-out)} a:hover{color:var(--accent-hover)} a:active{color:var(--accent-active)} :focus-visible{outline:var(--border-2) solid var(--focus);outline-offset:2px} /* Dunkle und blaue Flächen markieren sich mit data-tone="inverse"; der Fokusring wechselt mit. */ [data-tone="inverse"] :focus-visible,[data-tone="inverse"]:focus-visible{outline-color:var(--focus-inverse)} /* RTL: Richtungs-Icons spiegeln (data-icon-dir), Objekt-Icons nicht. Zahlen, Einheiten, Modellnamen und Messwerttabellen bleiben LTR. */ [dir="rtl"] [data-icon-dir]{transform:scaleX(-1)} [dir="rtl"] .ceylan-ltr,[dir="rtl"] [data-ltr]{direction:ltr;unicode-bidi:embed} ::selection{background:var(--blue-100)}