/* iDU Design Tokens — CSS custom properties. * GENERATED from tokens.json by build-tokens.mjs (`npm run tokens:build`). Do not hand-edit. * * Usage: * 1. Import once at app root: import '@idu-nightlife/ui-kit/design-system/tokens/tokens.css' * 2. Set the active brand on or the app shell: data-brand="checkd|trackd|dashd" * The brand tokens (--brand-*) resolve automatically; everything downstream * references --brand-main / --brand-dark / etc, so components are brand-agnostic. */ :root { /* ---- Neutral ramp ---- */ --neutral-darkest: #1f2024; --neutral-dark: #5f626d; --neutral-secondary: #6d717f; --neutral-main: #9ea2ae; --neutral-disabled: #aaaeb9; --neutral-divider: #dcdcdc; --neutral-light: #dcdcdc; --neutral-faint: #dbdcda; --neutral-white: #ffffff; /* ---- Surfaces ---- */ --surface-canvas: #fcfcfc; --surface-paper: #ffffff; --surface-subheader: #f9f9f9; /* ---- Text ---- */ --text-primary: #1f2024; --text-secondary: #5f626d; --text-disabled: #aaaeb9; --text-contrast: #ffffff; --text-link: #0269a3; /* ---- Status: Success / Error / Warning / Info (dark / main / bright / bg) ---- */ --status-success-dark: #105e2c; --status-success-main: #199144; --status-success-bright: #82d57a; --status-success-bg: #edf7ed; --status-error-dark: #860b0b; --status-error-main: #d32f2f; --status-error-bright: #ffafaf; --status-error-bg: #f7eded; --status-warning-dark: #5e4610; --status-warning-main: #d9540c; --status-warning-bright: #ffe3a8; --status-warning-bg: #f7f2ed; --status-info-dark: #10345e; --status-info-main: #0288d1; --status-info-bright: #b6e1ff; --status-info-bg: #edf2f7; /* ---- Interaction overlays ---- */ --state-hover: rgba(0, 0, 0, 0.04); --state-selected: rgba(0, 0, 0, 0.08); --state-focus: rgba(0, 0, 0, 0.12); /* ---- Company accent (iDU) ---- */ --idu-primary: #c42464; --idu-mid: #e7a7c0; --idu-dull: #e3c8dc; --idu-light: #fae9f9; /* ---- Type ---- */ --font-sans: 'Inter', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', sans-serif; --font-mui: 'Roboto', 'Inter', sans-serif; --font-display: 'Inter', sans-serif; --font-hand: 'Caveat', cursive; --font-mono: 'Inconsolata', monospace; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-black: 900; --type-display-size: 48px; --type-display-lh: 1.05; --type-display-weight: 900; --type-section-size: 20px; --type-section-lh: 28px; --type-section-weight: 500; --type-body-lg-size: 16px; --type-body-lg-lh: 24px; --type-body-size: 14px; --type-body-lh: 20px; --type-label-size: 14px; --type-label-lh: 20px; --type-label-weight: 500; --type-caption-size: 12px; --type-caption-lh: 16px; --type-metric-size: 26px; --type-metric-lh: 1.2; --type-metric-weight: 800; --type-metric-tracking: -0.5px; /* ---- Spacing (8/16/24 rhythm) ---- */ --space-0: 0px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 40px; --space-half: 4px; /* ---- Radii ---- */ --radius-base: 4px; --radius-capsule: 16px; --radius-pill: 9999px; --radius-md: 12px; /* ---- Shadows ---- */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-raised: 0 4px 12px rgba(0, 0, 0, 0.3); /* ---- Sizing ---- */ --size-nav-width: 280px; --size-desktop-surface: 1133px; --size-touch-min: 44px; --size-input-touch-font-min: 16px; --control-h-lg: 48px; --control-h-md: 40px; --control-h-sm: 32px; --control-h-tiny: 24px; /* Default brand = checkd (override via [data-brand]) */ --brand-dark: #8c0668; --brand-main: #b73193; --brand-accent: #e297ce; --brand-divider: #e3c8dc; --brand-light: #fae9f9; --brand-on: #ffffff; } /* ---- Per-product themes: set data-brand on a root/shell element ---- */ [data-brand='checkd'] { --brand-dark: #8c0668; --brand-main: #b73193; --brand-accent: #e297ce; --brand-divider: #e3c8dc; --brand-light: #fae9f9; --brand-on: #ffffff; } [data-brand='trackd'] { --brand-dark: #31077a; --brand-main: #6244be; --brand-accent: #b7b8ff; --brand-divider: #d1c8e3; --brand-light: #f1e9fa; --brand-on: #ffffff; --surface-canvas: #f0f0f2; --surface-row-line: #f0f0f2; --brand-main-hover: #5238a6; --trackd-space-1: 2px; --trackd-space-2: 4px; --trackd-space-3: 6px; --trackd-space-4: 8px; --trackd-space-5: 10px; --trackd-space-6: 12px; --trackd-space-7: 14px; --trackd-space-8: 16px; --trackd-space-9: 20px; --trackd-space-10: 24px; --trackd-space-11: 32px; --trackd-radius-base: 4px; --trackd-radius-sm: 10px; --trackd-radius-md: 12px; --trackd-radius-lg: 14px; --trackd-radius-capsule: 16px; --trackd-radius-sheetTop: 22px; --trackd-radius-sheet: 40px; --trackd-type-caption-size: 11px; --trackd-type-caption-lh: 1.45; --trackd-type-meta-size: 12px; --trackd-type-meta-lh: 1.45; --trackd-type-body-size: 13px; --trackd-type-body-lh: 1.5; --trackd-type-bodyLarge-size: 14px; --trackd-type-bodyLarge-lh: 1.45; --trackd-type-label-size: 12px; --trackd-type-label-lh: 1.4; --trackd-type-label-weight: 500; --trackd-type-title-size: 16px; --trackd-type-title-lh: 1.3; --trackd-type-title-weight: 600; --trackd-type-heading-size: 20px; --trackd-type-heading-lh: 1.25; --trackd-type-heading-weight: 600; } [data-brand='dashd'] { --brand-dark: #062c8c; --brand-main: #3161d1; --brand-accent: #a0b2d3; --brand-divider: #c8d1e3; --brand-light: #dcebff; --brand-on: #ffffff; } /* Legacy alias: some Figma-extracted components reference --incident-primary. Map to active brand. */ :root, [data-brand] { --incident-primary: var(--brand-main); }