/* * brands.css — per-brand design tokens ("dynamic CSS by brand"). * * Source of truth: proteu/brand//dart/.prod.json (ACTION, ACCENT, * ON_PRIMARY_ACTION, FONT_FAMILY_*, ...). These blocks mirror the tokens the * payroll-loan SPA generates in src/brand/tokens/.css, so both surfaces * stay visually consistent. * * The active brand is chosen at runtime from the ?brand= query param: the * pre-paint hook in index.html sets before first * paint, so the correct block below applies with no color flash. * * To regenerate from proteu, run scripts/sync-brand-tokens.mjs (optional — * this file is committed and needs no build step to work). * * Consumed by styles.css / the inline SVG via var(--color-action), * var(--color-accent), var(--color-on-primary-action), var(--color-support), * var(--color-neutral-dark), var(--font-family-title|body). */ /* novücard is the default brand (matches the historical fallback). */ :root, :root[data-brand="novucard"] { --font-family-title: 'Nunito', sans-serif; --font-family-body: 'Roboto', sans-serif; --color-accent-dark: #d1e000; --color-accent-darker-extra: #5f6600; --color-accent-darker: #98a300; --color-accent-light: #f4ff5c; --color-accent-lighter-extra: #fbffc2; --color-accent-lighter: #f7ff85; --color-accent: #edff00; --color-action-dark: #d1e000; --color-action-darker-extra: #5f6600; --color-action-darker: #98a300; --color-action-light: #f4ff5c; --color-action-lighter-extra: #fbffc2; --color-action-lighter: #f7ff85; --color-action: #edff00; --color-card: #edff00; --color-miscellaneous: #9a00ff; --color-neutral-dark-dark: #222222; --color-neutral-dark-darker: #0d0d0d; --color-neutral-dark-light: #6f6f6f; --color-neutral-dark-lighter: #9a9a9a; --color-neutral-dark: #404040; --color-neutral-grey-dark: #d9d9d9; --color-neutral-grey-darker: #c4c4c4; --color-neutral-grey-light: #f4f4f4; --color-neutral-grey-lighter: #f8f8f8; --color-neutral-grey: #e4e4e4; --color-neutral-white: #ffffff; --color-on-primary-action: #0d0d0d; --color-shades-black-base: #0d0d0d; --color-shadow: #424242; --color-status-green: #66f200; --color-status-red: #e71834; --color-support: #02b3f6; } :root[data-brand="payjoy"] { --font-family-title: 'Inter', sans-serif; --font-family-body: 'Inter', sans-serif; --color-accent-dark: #99c606; --color-accent-darker-extra: #404c1a; --color-accent-darker: #719207; --color-accent-light: #cff945; --color-accent-lighter-extra: #e3f8a0; --color-accent-lighter: #d7f86d; --color-accent: #c7fd17; --color-action-dark: #00632f; --color-action-darker-extra: #003218; --color-action-darker: #004a23; --color-action-light: #04c861; --color-action-lighter-extra: #9ff9ca; --color-action-lighter: #6cf9af; --color-action: #007c3b; --color-card: #9bc31e; --color-miscellaneous: #6d9a32; --color-neutral-dark-dark: #191a1a; --color-neutral-dark-darker: #0a0a0a; --color-neutral-dark-light: #666666; --color-neutral-dark-lighter: #989a9a; --color-neutral-dark: #1a1919; --color-neutral-grey-dark: #cccccc; --color-neutral-grey-darker: #b2b3b3; --color-neutral-grey-light: #f2f2f2; --color-neutral-grey-lighter: #f9f9f9; --color-neutral-grey: #e5e6e6; --color-neutral-white: #ffffff; --color-on-primary-action: #ffffff; --color-shades-black-base: #0d0d0d; --color-shadow: #424242; --color-status-green: #58ff00; --color-status-red: #d73228; --color-support: #007c3b; } :root[data-brand="supersim"] { --font-family-title: 'Be Vietnam Pro', sans-serif; --font-family-body: 'Be Vietnam Pro', sans-serif; --color-accent-dark: #eab306; --color-accent-darker-extra: #703f11; --color-accent-darker: #b88609; --color-accent-light: #fde047; --color-accent-lighter-extra: #fffac3; --color-accent-lighter: #fef089; --color-accent: #ffcc00; --color-action-dark: #cc6300; --color-action-darker-extra: #723600; --color-action-darker: #8f4400; --color-action-light: #fe9632; --color-action-lighter-extra: #fdd6b2; --color-action-lighter: #feab5c; --color-action: #e77000; --color-card: #ffcc00; --color-miscellaneous: #0d9488; --color-neutral-dark-dark: #151311; --color-neutral-dark-darker: #100e0d; --color-neutral-dark-light: #757575; --color-neutral-dark-lighter: #919191; --color-neutral-dark: #1a1815; --color-neutral-grey-dark: #d7d7d7; --color-neutral-grey-darker: #c4c4c4; --color-neutral-grey-light: #eeeeee; --color-neutral-grey-lighter: #fafafa; --color-neutral-grey: #e3e3e3; --color-neutral-white: #ffffff; --color-on-primary-action: #ffffff; --color-shades-black-base: #0d0d0d; --color-shadow: #424242; --color-status-green: #29e66f; --color-status-red: #df2935; --color-support: #4872ff; }