/* Hue-shift palettes for brand-2. Usage: set data-brand2-palette="01..30" (or one of the named presets below) on the element (the :root). */ :root[data-brand2-palette] { --brand2-hue-shift: 0deg; --brand2-border-h: 50.588; --brand2-border-s: 100; --brand2-border-l: 50; --brand2-primary-h: 45.86; --brand2-primary-s: 64.609; --brand2-primary-l: 52.353; --brand2-solid-h: 43.034; --brand2-solid-s: 67.442; --brand2-solid-l: 42.157; --brand2-primary-warm-h: 43.2; --brand2-primary-warm-s: 70.093; --brand2-primary-warm-l: 58.039; --brand2-primary-solid-h: 42; --brand2-primary-solid-s: 63.025; --brand2-primary-solid-l: 46.667; --brand2-primary-tint-h: 45.283; --brand2-primary-tint-s: 65.975; --brand2-primary-tint-l: 52.745; --color-border: hsl( calc((var(--brand2-border-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-border-s) * 1%) calc(var(--brand2-border-l) * 1%) / 0.18 ); --color-border-strong: hsl( calc((var(--brand2-border-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-border-s) * 1%) calc(var(--brand2-border-l) * 1%) / 0.28 ); --color-primary: hsl( calc((var(--brand2-primary-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-primary-s) * 1%) calc(var(--brand2-primary-l) * 1%) ); --color-solid: hsl( calc((var(--brand2-solid-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-solid-s) * 1%) calc(var(--brand2-solid-l) * 1%) ); --color-primary-warm: hsl( calc((var(--brand2-primary-warm-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-primary-warm-s) * 1%) calc(var(--brand2-primary-warm-l) * 1%) ); --color-primary-glow: hsl( calc((var(--brand2-primary-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-primary-s) * 1%) calc(var(--brand2-primary-l) * 1%) / 0.25 ); --color-primary-shadow: hsl( calc((var(--brand2-primary-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-primary-s) * 1%) calc(var(--brand2-primary-l) * 1%) / 0.28 ); --color-primary-solid: hsl( calc((var(--brand2-primary-solid-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-primary-solid-s) * 1%) calc(var(--brand2-primary-solid-l) * 1%) ); --color-primary-tint: hsl( calc((var(--brand2-primary-tint-h) * 1deg) + var(--brand2-hue-shift)) calc(var(--brand2-primary-tint-s) * 1%) calc(var(--brand2-primary-tint-l) * 1%) / 0.14 ); } :root[data-brand2-palette="01"] { --brand2-hue-shift: -15deg; } :root[data-brand2-palette="02"] { --brand2-hue-shift: -14deg; } :root[data-brand2-palette="03"] { --brand2-hue-shift: -13deg; } :root[data-brand2-palette="04"] { --brand2-hue-shift: -12deg; } :root[data-brand2-palette="05"] { --brand2-hue-shift: -11deg; } :root[data-brand2-palette="06"] { --brand2-hue-shift: -10deg; } :root[data-brand2-palette="07"] { --brand2-hue-shift: -9deg; } :root[data-brand2-palette="08"] { --brand2-hue-shift: -8deg; } :root[data-brand2-palette="09"] { --brand2-hue-shift: -7deg; } :root[data-brand2-palette="10"] { --brand2-hue-shift: -6deg; } :root[data-brand2-palette="11"] { --brand2-hue-shift: -5deg; } :root[data-brand2-palette="12"] { --brand2-hue-shift: -4deg; } :root[data-brand2-palette="13"] { --brand2-hue-shift: -3deg; } :root[data-brand2-palette="14"] { --brand2-hue-shift: -2deg; } :root[data-brand2-palette="15"] { --brand2-hue-shift: -1deg; } :root[data-brand2-palette="16"] { --brand2-hue-shift: 0deg; } :root[data-brand2-palette="17"] { --brand2-hue-shift: 1deg; } :root[data-brand2-palette="18"] { --brand2-hue-shift: 2deg; } :root[data-brand2-palette="19"] { --brand2-hue-shift: 3deg; } :root[data-brand2-palette="20"] { --brand2-hue-shift: 4deg; } :root[data-brand2-palette="21"] { --brand2-hue-shift: 5deg; } :root[data-brand2-palette="22"] { --brand2-hue-shift: 6deg; } :root[data-brand2-palette="23"] { --brand2-hue-shift: 7deg; } :root[data-brand2-palette="24"] { --brand2-hue-shift: 8deg; } :root[data-brand2-palette="25"] { --brand2-hue-shift: 9deg; } :root[data-brand2-palette="26"] { --brand2-hue-shift: 10deg; } :root[data-brand2-palette="27"] { --brand2-hue-shift: 11deg; } :root[data-brand2-palette="28"] { --brand2-hue-shift: 12deg; } :root[data-brand2-palette="29"] { --brand2-hue-shift: 13deg; } :root[data-brand2-palette="30"] { --brand2-hue-shift: 14deg; } /* ============================================================ Named presets — bigger color jumps than 01..30 (keep the same variable system; only override the base knobs) ============================================================ */ /* Keep the original “gold” look (same as palette 16). */ :root[data-brand2-palette="gold"] { --brand2-hue-shift: 0deg; } /* Greens */ :root[data-brand2-palette="emerald"] { --brand2-hue-shift: 85deg; --brand2-primary-s: 72; --brand2-primary-l: 56; } :root[data-brand2-palette="olive"] { --brand2-hue-shift: 60deg; --brand2-primary-s: 58; --brand2-primary-l: 54; } /* Blues */ :root[data-brand2-palette="sapphire"] { --brand2-hue-shift: 175deg; --brand2-primary-s: 70; --brand2-primary-l: 58; } :root[data-brand2-palette="ice"] { --brand2-hue-shift: 150deg; --brand2-primary-s: 62; --brand2-primary-l: 60; --brand2-border-l: 58; } /* Purples */ :root[data-brand2-palette="violet"] { --brand2-hue-shift: 235deg; --brand2-primary-s: 74; --brand2-primary-l: 58; } :root[data-brand2-palette="orchid"] { --brand2-hue-shift: 265deg; --brand2-primary-s: 78; --brand2-primary-l: 60; } /* Reds / Pinks */ :root[data-brand2-palette="ruby"] { --brand2-hue-shift: -75deg; --brand2-primary-s: 76; --brand2-primary-l: 56; } :root[data-brand2-palette="rose"] { --brand2-hue-shift: -95deg; --brand2-primary-s: 78; --brand2-primary-l: 58; } /* Teals */ :root[data-brand2-palette="teal"] { --brand2-hue-shift: 120deg; --brand2-primary-s: 66; --brand2-primary-l: 56; } /* ============================================================ Light background presets Usage: data-brand2-palette="light" or "...-light" ============================================================ */ :root[data-brand2-palette="light"], :root[data-brand2-palette$="-light"] { --color-bg: #f6f8fc; --color-surface: rgba(255, 255, 255, 0.95); --color-surface-alt: rgba(249, 250, 255, 0.9); --color-text: #111322; --color-muted: rgba(17, 19, 34, 0.65); --color-secondary: rgba(17, 19, 34, 0.78); --color-border-soft: rgba(15, 23, 42, 0.05); --color-header-translucent: rgba(255, 255, 255, 0.9); --color-solid: #ffffff; --color-secondary-glow: rgba(15, 23, 42, 0.08); --color-secondary-tint: rgba(15, 23, 42, 0.06); --color-glass-strong: rgba(15, 23, 42, 0.2); --color-glass-mid: rgba(15, 23, 42, 0.12); --color-glass-soft: rgba(15, 23, 42, 0.08); --color-glass-faint: rgba(15, 23, 42, 0.05); --color-glass-ultra: rgba(15, 23, 42, 0.03); --shadow-xl: 0 30px 60px rgba(15, 23, 42, 0.12); --shadow-lg: 0 25px 45px rgba(15, 23, 42, 0.08); --shadow-md: 0 20px 40px rgba(15, 23, 42, 0.08); --shadow-sm: 0 12px 30px rgba(15, 23, 42, 0.08); --shadow-inset: 0 -20px 40px rgba(15, 23, 42, 0.05); } :root[data-brand2-palette="light"] { --brand2-hue-shift: 0deg; --color-on-primary: #141414; } :root[data-brand2-palette="gold-light"] { --brand2-hue-shift: 0deg; --color-on-primary: #141414; } :root[data-brand2-palette="emerald-light"] { --brand2-hue-shift: 85deg; --brand2-primary-s: 72; --brand2-primary-l: 56; --color-on-primary: #ffffff; } :root[data-brand2-palette="olive-light"] { --brand2-hue-shift: 60deg; --brand2-primary-s: 58; --brand2-primary-l: 54; --color-on-primary: #ffffff; } :root[data-brand2-palette="sapphire-light"] { --brand2-hue-shift: 175deg; --brand2-primary-s: 70; --brand2-primary-l: 58; --color-on-primary: #ffffff; } :root[data-brand2-palette="ice-light"] { --brand2-hue-shift: 150deg; --brand2-primary-s: 62; --brand2-primary-l: 60; --brand2-border-l: 58; --color-on-primary: #ffffff; } :root[data-brand2-palette="violet-light"] { --brand2-hue-shift: 235deg; --brand2-primary-s: 74; --brand2-primary-l: 58; --color-on-primary: #ffffff; } :root[data-brand2-palette="orchid-light"] { --brand2-hue-shift: 265deg; --brand2-primary-s: 78; --brand2-primary-l: 60; --color-on-primary: #ffffff; } :root[data-brand2-palette="ruby-light"] { --brand2-hue-shift: -75deg; --brand2-primary-s: 76; --brand2-primary-l: 56; --color-on-primary: #ffffff; } :root[data-brand2-palette="rose-light"] { --brand2-hue-shift: -95deg; --brand2-primary-s: 78; --brand2-primary-l: 58; --color-on-primary: #ffffff; } :root[data-brand2-palette="teal-light"] { --brand2-hue-shift: 120deg; --brand2-primary-s: 66; --brand2-primary-l: 56; --color-on-primary: #ffffff; }