/* * Tchibo design tokens - the SINGLE SOURCE OF TRUTH for every colour, radius * and font decision in Tchibo.Contest.Web.App and Tchibo.Contest.Web.Registration. * --------------------------------------------------------------------------- * Served at /_content/Tchibo.Contest.Web.Theme/css/tchibo-tokens.css (see the * .csproj of this project for why that prefix). Load it BEFORE tchibo-theme.css * and before any page stylesheet. * * WHERE THE VALUES COME FROM (measured, not invented) * Every value tagged "tchibo.ch" below is a live design token of www.tchibo.ch, * read with getComputedStyle(document.documentElement).getPropertyValue(name) * on the rendered site (2026-08-18) or copied verbatim from the token block * inlined in its HTML. The original token name is kept next to each value so a * future session can re-verify it on tchibo.ch with one console call. Do not * "improve" a value here without re-measuring it there. * * NAMING * --tchibo- semantic token, use these in component CSS * --tchibo-ref- raw palette value, only referenced by the semantic * tokens above; never use a ref token in a component * * FONT * tchibo.ch renders "Tchibo Espresso VF". The woff2 ships in this library * (../fonts/, declared in tchibo-fonts.css, licence OFL 1.1 per its name table). * Roboto stays in the stack as fallback. */ :root { /* ---------- raw palette (tchibo.ch --tchibo-ref-color-*) ---------- */ --tchibo-ref-gold-33: #776132; /* gold-33 brand-variant */ --tchibo-ref-gold-39: #8c723b; /* gold-39 brand */ --tchibo-ref-gold-48: #a38a52; /* gold-48-y */ --tchibo-ref-gold-58: #c0a468; /* gold-58 = colour of the logo SVG */ --tchibo-ref-gold-24: #564624; /* gold-24 on-brand-container */ --tchibo-ref-gold-88: #f9e9c8; /* gold-88-y brand-container */ --tchibo-ref-navy-16: #003552; /* navy-16 */ --tchibo-ref-navy-20: #004266; /* navy-20 */ --tchibo-ref-blue-39: #0a63bd; /* blue-39 primary-primary */ --tchibo-ref-red-44: #c31d1d; /* red-44 danger-danger */ --tchibo-ref-red-26: #731111; /* red-26 error-on-error */ --tchibo-ref-red-96: #feebeb; /* red-96 error-error (surface) */ --tchibo-ref-green-14: #004726; /* green-14 success-on-success */ --tchibo-ref-green-88: #c2ffe3; /* green-88 success-success (surface) */ --tchibo-ref-movegray-36: #545c63; /* movegray-36 outline / secondary */ --tchibo-ref-movegray-72: #b2b8bd; /* movegray-72 outline-variant */ --tchibo-ref-movegray-90: #e3e6e8; /* movegray-90 secondary-container */ --tchibo-ref-neutral-0: #000; --tchibo-ref-neutral-91: #e8e8e8; --tchibo-ref-neutral-94: #f0f0f0; --tchibo-ref-neutral-96: #f6f6f6; /* surface-surface */ --tchibo-ref-neutral-98: #fbfbfb; /* surface-surface-high */ --tchibo-ref-neutral-100: #fff; /* surface-surface-highest */ /* ---------- semantic colours (tchibo.ch --tchibo-theme-color-*) ---------- */ /* surfaces */ --tchibo-surface: var(--tchibo-ref-neutral-100); /* surface-surface-highest: page bg */ --tchibo-surface-low: var(--tchibo-ref-neutral-96); /* surface-surface: cards, footer */ --tchibo-surface-high: var(--tchibo-ref-neutral-98); /* surface-surface-high */ --tchibo-surface-container: var(--tchibo-ref-movegray-90); /* secondary-secondary-container */ /* text */ --tchibo-on-surface: var(--tchibo-ref-neutral-0); /* surface-on-surface: body + titles */ --tchibo-on-surface-variant: var(--tchibo-ref-movegray-36); /* surface-on-surface-variant: muted */ /* brand (primary call-to-action colour on tchibo.ch = brand gold) */ --tchibo-brand: var(--tchibo-ref-gold-39); /* brand-brand */ --tchibo-brand-variant: var(--tchibo-ref-gold-33); /* brand-brand-variant */ --tchibo-brand-light: var(--tchibo-ref-gold-48); /* gold-48-y, gradient partner */ --tchibo-on-brand: var(--tchibo-ref-neutral-100); /* brand-on-brand */ --tchibo-brand-container: var(--tchibo-ref-gold-88); /* brand-brand-container */ --tchibo-on-brand-container: var(--tchibo-ref-gold-24); /* brand-on-brand-container */ /* dark brand surface (the navy band used for "Tchibo Card" on tchibo.ch) */ --tchibo-brand-dark: var(--tchibo-ref-navy-16); --tchibo-brand-dark-variant: var(--tchibo-ref-navy-20); --tchibo-on-brand-dark: var(--tchibo-ref-neutral-100); /* interaction */ --tchibo-trigger: var(--tchibo-ref-neutral-0); /* trigger-trigger: hover/active bg */ --tchibo-on-trigger: var(--tchibo-ref-neutral-100); /* trigger-on-trigger */ --tchibo-focus: var(--tchibo-ref-blue-39); /* primary-primary: focus ring */ /* outlines */ --tchibo-outline: var(--tchibo-ref-movegray-36); /* outline-outline: field borders */ --tchibo-outline-variant: var(--tchibo-ref-movegray-72); /* outline-outline-variant: dividers */ --tchibo-divider: var(--tchibo-ref-neutral-91); /* states */ --tchibo-danger: var(--tchibo-ref-red-44); /* danger-danger: error text */ --tchibo-on-danger: var(--tchibo-ref-neutral-100); --tchibo-error-surface: var(--tchibo-ref-red-96); /* error-error */ --tchibo-on-error-surface: var(--tchibo-ref-red-26); /* error-on-error */ --tchibo-success-surface: var(--tchibo-ref-green-88); --tchibo-on-success-surface: var(--tchibo-ref-green-14); /* ---------- shape (tchibo.ch --tchibo-ref-radius-* / outline-*) ---------- */ --tchibo-radius-xs: 2px; /* ref-radius-01 */ --tchibo-radius-sm: 4px; /* ref-radius-02: form fields */ --tchibo-radius-md: 8px; /* ref-radius-04 */ --tchibo-radius-lg: 12px; /* ref-radius-06: cards */ --tchibo-radius-pill: 22px; /* measured on a rendered .ds-button */ --tchibo-border-width: 1px; /* ref-outline-01 */ --tchibo-border-width-strong: 2px; /* ref-outline-02: focus */ /* ---------- typography ---------- */ /* "Tchibo Espresso VF" is declared in tchibo-fonts.css (variable font, OFL 1.1, downloaded from tchibo.ch). Roboto (Google Fonts, loaded by both layouts) is the fallback while the woff2 loads or if it fails. */ --tchibo-font-family: 'Tchibo Espresso VF', 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; --tchibo-font-weight-light: 300; --tchibo-font-weight-regular: 400; --tchibo-font-weight-bold: 700; /* ---------- gradients (replacements for the Swisscom brand gradients) ---------- */ /* Swisscom used red->blue->cyan on product boxes and navy->blue on teaser cards. Tchibo has no multi-hue brand gradient; these two are built only from tokens above so they stay on-brand automatically. */ --tchibo-gradient-brand: linear-gradient(135deg, var(--tchibo-brand-light) 0%, var(--tchibo-brand) 55%, var(--tchibo-brand-variant) 100%); --tchibo-gradient-dark: linear-gradient(90deg, var(--tchibo-brand-dark) 0%, var(--tchibo-brand-dark-variant) 100%); }