/** * ╔═══════════════════════════════════════════════════════════╗ * ║ Integral Healthcare — Design Tokens ║ * ║ Auto-generated from the Style Guide theme sources. ║ * ║ Generated: 2026-03-09 ║ * ║ ║ * ║ https://github.com/Integral-Healthcare/style-guide ║ * ╚═══════════════════════════════════════════════════════════╝ * * HOW TO USE * ────────── * 1. Add this file to your project: * * or * @import url("integral-design-tokens.css"); * * 2. Reference any variable in your CSS: * color: var(--text); * background: var(--bg-card); * font-size: var(--font-size-md); * * 3. Dark mode is applied automatically via * @media (prefers-color-scheme: dark), or you can add * [data-theme="dark"] to your element. */ :root { /* ═══════════════════════════════════════════════ Color Primitives Raw color values for the full design palette. ═══════════════════════════════════════════════ */ /* Brand */ --color-brand-25: #F9F2FF; --color-brand-50: #F2E4FD; --color-brand-100: #E4C7FB; --color-brand-200: #D4A5F9; --color-brand-300: #C484F7; --color-brand-400: #AE57F4; --color-brand-500: #931FF0; --color-brand-600: #7D1ACC; --color-brand-700: #6716A8; --color-brand-800: #511184; --color-brand-900: #3B0C60; --color-brand-950: #250840; /* Secondary */ --color-secondary-25: #FAFAFC; --color-secondary-50: #F6F4FA; --color-secondary-100: #EDE9F4; --color-secondary-200: #D8D0E9; --color-secondary-300: #C4B8DD; --color-secondary-400: #AF9FD1; --color-secondary-500: #9B87C5; --color-secondary-600: #866EB9; --color-secondary-700: #7255AE; --color-secondary-800: #5D3DA2; --color-secondary-900: #492496; --color-secondary-950: #2E1760; /* Tertiary */ --color-tertiary-25: #FAFAFB; --color-tertiary-50: #F5F4F6; --color-tertiary-100: #EAE9ED; --color-tertiary-200: #D1CED7; --color-tertiary-300: #B8B4C1; --color-tertiary-400: #9E99AB; --color-tertiary-500: #857E95; --color-tertiary-600: #6C647F; --color-tertiary-700: #534969; --color-tertiary-800: #3E3357; --color-tertiary-900: #2D2148; --color-tertiary-950: #1A1230; /* Blue */ --color-blue-25: #F5F8FF; --color-blue-50: #EFF6FF; --color-blue-100: #DBEAFE; --color-blue-200: #BFDBFE; --color-blue-300: #93C5FD; --color-blue-400: #60A5FA; --color-blue-500: #3B82F6; --color-blue-600: #2563EB; --color-blue-700: #1D4ED8; --color-blue-800: #1E40AF; --color-blue-900: #1E3A8A; --color-blue-950: #172554; /* Green */ --color-green-25: #F6FEF9; --color-green-50: #ECFDF5; --color-green-100: #D1FAE5; --color-green-200: #A7F3D0; --color-green-300: #6EE7B7; --color-green-400: #34D399; --color-green-500: #10B981; --color-green-600: #059669; --color-green-700: #047857; --color-green-800: #065F46; --color-green-900: #064E3B; --color-green-950: #022C22; /* Amber */ --color-amber-25: #FFFCF5; --color-amber-50: #FFFBEB; --color-amber-100: #FEF3C7; --color-amber-200: #FDE68A; --color-amber-300: #FCD34D; --color-amber-400: #FBBF24; --color-amber-500: #F59E0B; --color-amber-600: #D97706; --color-amber-700: #B45309; --color-amber-800: #92400E; --color-amber-900: #78350F; --color-amber-950: #451A03; /* Red */ --color-red-25: #FFFBFA; --color-red-50: #FEF2F2; --color-red-100: #FEE2E2; --color-red-200: #FECACA; --color-red-300: #FCA5A5; --color-red-400: #F87171; --color-red-500: #EF4444; --color-red-600: #DC2626; --color-red-700: #B91C1C; --color-red-800: #991B1B; --color-red-900: #7F1D1D; --color-red-950: #450A0A; /* Gray */ --color-gray-25: #FCFCFD; --color-gray-50: #F9FAFB; --color-gray-100: #F3F4F6; --color-gray-200: #E5E7EB; --color-gray-300: #D1D5DB; --color-gray-400: #9CA3AF; --color-gray-500: #6B7280; --color-gray-600: #4B5563; --color-gray-700: #374151; --color-gray-800: #1F2937; --color-gray-900: #111827; --color-gray-950: #0B0F1A; /* Base */ --color-base-white: #FFFFFF; --color-base-black: #000000; /* ═══════════════════════════════════════════════ Semantic Design Tokens — Light Mode Intent-based variables for UI surfaces, text, borders, buttons, and components. ═══════════════════════════════════════════════ */ /* Brand */ --brand-primary: var(--color-secondary-700); --brand-subtle: var(--color-secondary-100); /* Backgrounds */ --bg: var(--color-base-white); --bg-hover: var(--color-gray-50); --bg-active: var(--color-gray-200); --bg-body: var(--color-gray-25); --bg-card: var(--color-base-white); --bg-card-hover: var(--color-gray-50); --bg-table: var(--color-gray-50); --bg-sidebar: var(--color-base-white); --bg-sidebar-active: var(--color-secondary-50); /* Borders */ --border: var(--color-gray-200); --border-light: var(--color-gray-100); --border-card: var(--color-gray-200); /* Text */ --text: var(--color-gray-900); --text-muted: var(--color-gray-500); --text-faint: var(--color-gray-400); --text-disabled: var(--color-gray-500); --text-header: var(--color-gray-700); /* Status – Backgrounds */ --neutral-bg: var(--color-gray-100); --success-bg: var(--color-green-100); --warning-bg: var(--color-amber-100); --danger-bg: var(--color-red-100); --accent-bg: var(--color-secondary-100); --info-bg: var(--color-blue-100); /* Status – Text */ --neutral-text: var(--color-gray-700); --success-text: var(--color-green-700); --warning-text: var(--color-amber-700); --danger-text: var(--color-red-700); --accent-text: var(--color-secondary-700); --info-text: var(--color-blue-700); /* Status – Dots / Icons */ --success-dot: var(--color-green-500); --warning-dot: var(--color-amber-500); --danger-dot: var(--color-red-500); --info-dot: var(--color-blue-500); /* Buttons – Primary */ --btn-primary-bg: var(--color-brand-600); --btn-primary-bg-hover: var(--color-brand-700); --btn-primary-bg-active: var(--color-brand-800); --btn-primary-bg-disabled: var(--color-gray-200); --btn-primary-text: var(--color-base-white); --btn-primary-text-disabled: var(--color-gray-500); /* Buttons – Secondary */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--color-gray-100); --btn-secondary-border: var(--color-gray-200); --btn-secondary-border-disabled: var(--color-gray-200); --btn-secondary-text: var(--color-gray-800); --btn-secondary-text-disabled: var(--color-gray-500); --btn-secondary-accent-border: var(--color-brand-600); --btn-secondary-accent-text: var(--color-brand-600); /* Buttons – Tertiary / Ghost */ --btn-tertiary: var(--color-gray-600); --btn-tertiary-bg-hover: var(--color-gray-100); /* Buttons – Destructive */ --btn-destructive-bg: var(--color-red-600); --btn-destructive-bg-hover: var(--color-red-700); --btn-destructive-text: var(--color-base-white); /* Links */ --link: var(--color-brand-600); /* Navigation */ --nav-text: var(--color-tertiary-600); --nav-text-active: var(--color-secondary-700); --nav-bg-active: var(--color-secondary-50); --nav-bg-hover: var(--color-gray-50); --nav-back-link: var(--color-secondary-700); /* Focus */ --focus-ring: color-mix(in srgb, var(--color-brand-600) 15%, transparent); /* Form Inputs */ --input-border-hover: var(--color-gray-300); --input-border-focus: var(--color-brand-600); --placeholder: var(--color-tertiary-600); /* Dropdowns / Select */ --select-bg-filtered: var(--color-brand-25); --menu-option-hover: var(--color-gray-50); --menu-option-selected: var(--color-brand-25); --menu-checkmark: var(--color-brand-600); /* Components – Avatar */ --avatar-bg: var(--color-secondary-100); --avatar-text: var(--color-secondary-700); /* Components – User Menu */ --role-badge-bg: var(--color-gray-100); --role-badge-text: var(--color-gray-700); --sign-out: var(--color-red-600); --sign-out-hover: var(--color-red-50); /* Components – Count Badge */ --count-badge-bg: var(--color-red-500); --count-badge-text: var(--color-base-white); /* ═══════════════════════════════════════════════ Typography — Text Style Presets Composite tokens for each text style in the type scale. ═══════════════════════════════════════════════ */ /* Font Families */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-family-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace; --text-display-font-size: 28px; --text-display-font-weight: 600; --text-display-line-height: 1.2; --text-display-letter-spacing: -0.02em; --text-heading-lg-font-size: 20px; --text-heading-lg-font-weight: 600; --text-heading-lg-line-height: 1.3; --text-heading-lg-letter-spacing: -0.01em; --text-heading-md-font-size: 18px; --text-heading-md-font-weight: 600; --text-heading-md-line-height: 1.4; --text-heading-md-letter-spacing: -0.01em; --text-heading-sm-font-size: 15px; --text-heading-sm-font-weight: 600; --text-heading-sm-line-height: 1.4; --text-heading-sm-letter-spacing: 0; --text-body-font-size: 14px; --text-body-font-weight: 400; --text-body-line-height: 1.5; --text-body-letter-spacing: 0; --text-body-medium-font-size: 14px; --text-body-medium-font-weight: 500; --text-body-medium-line-height: 1.5; --text-body-medium-letter-spacing: 0; --text-body-semibold-font-size: 14px; --text-body-semibold-font-weight: 600; --text-body-semibold-line-height: 1.5; --text-body-semibold-letter-spacing: 0; --text-small-font-size: 13px; --text-small-font-weight: 400; --text-small-line-height: 1.5; --text-small-letter-spacing: 0; --text-small-medium-font-size: 13px; --text-small-medium-font-weight: 500; --text-small-medium-line-height: 1.5; --text-small-medium-letter-spacing: 0; --text-caption-font-size: 12px; --text-caption-font-weight: 500; --text-caption-line-height: 1.5; --text-caption-letter-spacing: 0; --text-badge-font-size: 12px; --text-badge-font-weight: 600; --text-badge-line-height: 1.4; --text-badge-letter-spacing: 0; --text-row-font-size: 12px; --text-row-font-weight: 400; --text-row-line-height: 1.4; --text-row-letter-spacing: 0; --text-overline-font-size: 11px; --text-overline-font-weight: 500; --text-overline-line-height: 1.3; --text-overline-letter-spacing: 0.05em; --text-overline-text-transform: uppercase; --text-micro-font-size: 10px; --text-micro-font-weight: 500; --text-micro-line-height: 1.3; --text-micro-letter-spacing: 0.02em; --text-code-font-size: 12px; --text-code-font-weight: 400; --text-code-line-height: 1.5; --text-code-letter-spacing: 0; --text-code-font-family: var(--font-family-mono); } /* ─── Dark Mode ──────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root { /* ═══════════════════════════════════════════════ Semantic Design Tokens — Dark Mode Intent-based variables for UI surfaces, text, borders, buttons, and components. ═══════════════════════════════════════════════ */ /* Brand */ --brand-primary: var(--color-secondary-600); --brand-subtle: var(--color-secondary-900); /* Backgrounds */ --bg: var(--color-gray-950); --bg-hover: var(--color-gray-700); --bg-active: var(--color-gray-600); --bg-body: var(--color-gray-900); --bg-card: var(--color-gray-800); --bg-card-hover: var(--color-gray-800); --bg-table: var(--color-gray-900); --bg-sidebar: var(--color-gray-900); --bg-sidebar-active: var(--color-gray-800); /* Borders */ --border: var(--color-gray-700); --border-light: var(--color-gray-800); --border-card: var(--color-gray-800); /* Text */ --text: var(--color-gray-50); --text-muted: var(--color-gray-400); --text-faint: var(--color-gray-600); --text-disabled: var(--color-gray-400); --text-header: var(--color-gray-300); /* Status – Backgrounds */ --neutral-bg: var(--color-gray-900); --success-bg: var(--color-green-600); --warning-bg: var(--color-amber-600); --danger-bg: var(--color-red-600); --accent-bg: var(--color-secondary-600); --info-bg: var(--color-blue-600); /* Status – Text */ --neutral-text: var(--color-base-white); --success-text: var(--color-base-white); --warning-text: var(--color-base-white); --danger-text: var(--color-base-white); --accent-text: var(--color-base-white); --info-text: var(--color-base-white); /* Status – Dots / Icons */ --success-dot: var(--color-green-500); --warning-dot: var(--color-amber-500); --danger-dot: var(--color-red-500); --info-dot: var(--color-blue-500); /* Buttons – Primary */ --btn-primary-bg: var(--color-brand-600); --btn-primary-bg-hover: var(--color-brand-500); --btn-primary-bg-active: var(--color-brand-700); --btn-primary-bg-disabled: var(--color-gray-800); --btn-primary-text: var(--color-base-white); --btn-primary-text-disabled: var(--color-gray-500); /* Buttons – Secondary */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--color-gray-700); --btn-secondary-border: var(--color-gray-800); --btn-secondary-border-disabled: var(--color-gray-700); --btn-secondary-text: var(--color-gray-100); --btn-secondary-text-disabled: var(--color-gray-500); --btn-secondary-accent-border: var(--color-brand-400); --btn-secondary-accent-text: var(--color-brand-400); /* Buttons – Tertiary / Ghost */ --btn-tertiary: var(--color-gray-400); --btn-tertiary-bg-hover: var(--color-gray-700); /* Buttons – Destructive */ --btn-destructive-bg: var(--color-red-600); --btn-destructive-bg-hover: var(--color-red-500); --btn-destructive-text: var(--color-base-white); /* Links */ --link: var(--color-brand-400); /* Navigation */ --nav-text: var(--color-gray-400); --nav-text-active: var(--color-secondary-500); --nav-bg-active: var(--color-gray-800); --nav-bg-hover: var(--color-gray-800); --nav-back-link: var(--color-secondary-700); /* Focus */ --focus-ring: color-mix(in srgb, var(--color-brand-600) 30%, transparent); /* Form Inputs */ --input-border-hover: var(--color-gray-600); --input-border-focus: var(--color-brand-600); --placeholder: var(--color-gray-400); /* Dropdowns / Select */ --select-bg-filtered: color-mix(in srgb, var(--color-brand-600) 10%, transparent); --menu-option-hover: var(--color-gray-800); --menu-option-selected: color-mix(in srgb, var(--color-brand-600) 10%, transparent); --menu-checkmark: var(--color-brand-400); /* Components – Avatar */ --avatar-bg: var(--color-secondary-700); --avatar-text: var(--color-secondary-100); /* Components – User Menu */ --role-badge-bg: var(--color-gray-800); --role-badge-text: var(--color-gray-400); --sign-out: var(--color-red-500); --sign-out-hover: var(--color-red-900); /* Components – Count Badge */ --count-badge-bg: var(--color-red-500); --count-badge-text: var(--color-base-white); } } /* Manual dark mode toggle via data attribute */ [data-theme="dark"] { /* ═══════════════════════════════════════════════ Semantic Design Tokens — Dark Mode Intent-based variables for UI surfaces, text, borders, buttons, and components. ═══════════════════════════════════════════════ */ /* Brand */ --brand-primary: var(--color-secondary-600); --brand-subtle: var(--color-secondary-900); /* Backgrounds */ --bg: var(--color-gray-950); --bg-hover: var(--color-gray-700); --bg-active: var(--color-gray-600); --bg-body: var(--color-gray-900); --bg-card: var(--color-gray-800); --bg-card-hover: var(--color-gray-800); --bg-table: var(--color-gray-900); --bg-sidebar: var(--color-gray-900); --bg-sidebar-active: var(--color-gray-800); /* Borders */ --border: var(--color-gray-700); --border-light: var(--color-gray-800); --border-card: var(--color-gray-800); /* Text */ --text: var(--color-gray-50); --text-muted: var(--color-gray-400); --text-faint: var(--color-gray-600); --text-disabled: var(--color-gray-400); --text-header: var(--color-gray-300); /* Status – Backgrounds */ --neutral-bg: var(--color-gray-900); --success-bg: var(--color-green-600); --warning-bg: var(--color-amber-600); --danger-bg: var(--color-red-600); --accent-bg: var(--color-secondary-600); --info-bg: var(--color-blue-600); /* Status – Text */ --neutral-text: var(--color-base-white); --success-text: var(--color-base-white); --warning-text: var(--color-base-white); --danger-text: var(--color-base-white); --accent-text: var(--color-base-white); --info-text: var(--color-base-white); /* Status – Dots / Icons */ --success-dot: var(--color-green-500); --warning-dot: var(--color-amber-500); --danger-dot: var(--color-red-500); --info-dot: var(--color-blue-500); /* Buttons – Primary */ --btn-primary-bg: var(--color-brand-600); --btn-primary-bg-hover: var(--color-brand-500); --btn-primary-bg-active: var(--color-brand-700); --btn-primary-bg-disabled: var(--color-gray-800); --btn-primary-text: var(--color-base-white); --btn-primary-text-disabled: var(--color-gray-500); /* Buttons – Secondary */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: var(--color-gray-700); --btn-secondary-border: var(--color-gray-800); --btn-secondary-border-disabled: var(--color-gray-700); --btn-secondary-text: var(--color-gray-100); --btn-secondary-text-disabled: var(--color-gray-500); --btn-secondary-accent-border: var(--color-brand-400); --btn-secondary-accent-text: var(--color-brand-400); /* Buttons – Tertiary / Ghost */ --btn-tertiary: var(--color-gray-400); --btn-tertiary-bg-hover: var(--color-gray-700); /* Buttons – Destructive */ --btn-destructive-bg: var(--color-red-600); --btn-destructive-bg-hover: var(--color-red-500); --btn-destructive-text: var(--color-base-white); /* Links */ --link: var(--color-brand-400); /* Navigation */ --nav-text: var(--color-gray-400); --nav-text-active: var(--color-secondary-500); --nav-bg-active: var(--color-gray-800); --nav-bg-hover: var(--color-gray-800); --nav-back-link: var(--color-secondary-700); /* Focus */ --focus-ring: color-mix(in srgb, var(--color-brand-600) 30%, transparent); /* Form Inputs */ --input-border-hover: var(--color-gray-600); --input-border-focus: var(--color-brand-600); --placeholder: var(--color-gray-400); /* Dropdowns / Select */ --select-bg-filtered: color-mix(in srgb, var(--color-brand-600) 10%, transparent); --menu-option-hover: var(--color-gray-800); --menu-option-selected: color-mix(in srgb, var(--color-brand-600) 10%, transparent); --menu-checkmark: var(--color-brand-400); /* Components – Avatar */ --avatar-bg: var(--color-secondary-700); --avatar-text: var(--color-secondary-100); /* Components – User Menu */ --role-badge-bg: var(--color-gray-800); --role-badge-text: var(--color-gray-400); --sign-out: var(--color-red-500); --sign-out-hover: var(--color-red-900); /* Components – Count Badge */ --count-badge-bg: var(--color-red-500); --count-badge-text: var(--color-base-white); } /* ═══════════════════════════════════════════════════ Utility Classes — Text Styles Apply a text-style preset with a single class. ═══════════════════════════════════════════════════ */ .text-display { font-family: var(--font-family-heading); font-size: var(--text-display-font-size, 28px); font-weight: var(--text-display-font-weight, 600); line-height: var(--text-display-line-height, 1.2); letter-spacing: var(--text-display-letter-spacing, -0.02em); } .text-heading-lg { font-family: var(--font-family-heading); font-size: var(--text-heading-lg-font-size, 20px); font-weight: var(--text-heading-lg-font-weight, 600); line-height: var(--text-heading-lg-line-height, 1.3); letter-spacing: var(--text-heading-lg-letter-spacing, -0.01em); } .text-heading-md { font-family: var(--font-family-heading); font-size: var(--text-heading-md-font-size, 18px); font-weight: var(--text-heading-md-font-weight, 600); line-height: var(--text-heading-md-line-height, 1.4); letter-spacing: var(--text-heading-md-letter-spacing, -0.01em); } .text-heading-sm { font-family: var(--font-family-heading); font-size: var(--text-heading-sm-font-size, 15px); font-weight: var(--text-heading-sm-font-weight, 600); line-height: var(--text-heading-sm-line-height, 1.4); letter-spacing: var(--text-heading-sm-letter-spacing, 0); } .text-body { font-family: var(--font-family); font-size: var(--text-body-font-size, 14px); font-weight: var(--text-body-font-weight, 400); line-height: var(--text-body-line-height, 1.5); letter-spacing: var(--text-body-letter-spacing, 0); } .text-body-medium { font-family: var(--font-family); font-size: var(--text-body-medium-font-size, 14px); font-weight: var(--text-body-medium-font-weight, 500); line-height: var(--text-body-medium-line-height, 1.5); letter-spacing: var(--text-body-medium-letter-spacing, 0); } .text-body-semibold { font-family: var(--font-family); font-size: var(--text-body-semibold-font-size, 14px); font-weight: var(--text-body-semibold-font-weight, 600); line-height: var(--text-body-semibold-line-height, 1.5); letter-spacing: var(--text-body-semibold-letter-spacing, 0); } .text-small { font-family: var(--font-family); font-size: var(--text-small-font-size, 13px); font-weight: var(--text-small-font-weight, 400); line-height: var(--text-small-line-height, 1.5); letter-spacing: var(--text-small-letter-spacing, 0); } .text-small-medium { font-family: var(--font-family); font-size: var(--text-small-medium-font-size, 13px); font-weight: var(--text-small-medium-font-weight, 500); line-height: var(--text-small-medium-line-height, 1.5); letter-spacing: var(--text-small-medium-letter-spacing, 0); } .text-caption { font-family: var(--font-family); font-size: var(--text-caption-font-size, 12px); font-weight: var(--text-caption-font-weight, 500); line-height: var(--text-caption-line-height, 1.5); letter-spacing: var(--text-caption-letter-spacing, 0); } .text-badge { font-family: var(--font-family); font-size: var(--text-badge-font-size, 12px); font-weight: var(--text-badge-font-weight, 600); line-height: var(--text-badge-line-height, 1.4); letter-spacing: var(--text-badge-letter-spacing, 0); } .text-row { font-family: var(--font-family); font-size: var(--text-row-font-size, 12px); font-weight: var(--text-row-font-weight, 400); line-height: var(--text-row-line-height, 1.4); letter-spacing: var(--text-row-letter-spacing, 0); } .text-overline { font-family: var(--font-family); font-size: var(--text-overline-font-size, 11px); font-weight: var(--text-overline-font-weight, 500); line-height: var(--text-overline-line-height, 1.3); letter-spacing: var(--text-overline-letter-spacing, 0.05em); text-transform: var(--text-overline-text-transform, uppercase); } .text-micro { font-family: var(--font-family); font-size: var(--text-micro-font-size, 10px); font-weight: var(--text-micro-font-weight, 500); line-height: var(--text-micro-line-height, 1.3); letter-spacing: var(--text-micro-letter-spacing, 0.02em); } .text-code { font-family: var(--font-family-mono); font-size: var(--text-code-font-size, 12px); font-weight: var(--text-code-font-weight, 400); line-height: var(--text-code-line-height, 1.5); letter-spacing: var(--text-code-letter-spacing, 0); }