/** * PimentCSS — semantic tokens (surface, text, border) * Light: :root | Dark: [data-theme="dark"] on */ :root { color-scheme: light; --surface-page: var(--neutral-100); --surface-action: var(--primary-600); --surface-action-hover: var(--primary-700); --surface-disabled: var(--neutral-100); --surface-muted: var(--neutral-100); --surface-elevated: var(--neutral-white); --surface-primary: var(--neutral-white); --text-body: var(--neutral-600); --text-disabled: var(--neutral-450); --text-filled: var(--neutral-900); --text-heading: var(--neutral-900); --text-headings: var(--neutral-800); --text-on-action: var(--neutral-100); --text-action: var(--primary-700); --text-on-disabled: var(--neutral-700); --text-muted: var(--neutral-450); --text-inverse: var(--neutral-100); --text-information: var(--information-700); --text-success: var(--success-700); --text-warning: var(--warning-800); --text-error: var(--error-700); --border-default: var(--border-primary); --border-action: var(--primary-default); --border-focus: var(--primary-500); --border-error: var(--error-500); --border-success: var(--success-500); --border-active: var(--border-action-hover); --border-hover: var(--neutral-400); --border-disabled: var(--neutral-300); --border-action-hover: var(--primary-600); --surface-action-hover-2: var(--primary-100); --surface-disabled-selected: var(--neutral-600); --surface-error: var(--error-100); --border-error-input: var(--error-500); --icon-on-action: var(--text-on-action); --icon-information: var(--information-500); --icon-success: var(--success-650); --icon-warning: var(--warning-500); --icon-error: var(--error-500); --surface-information: var(--information-100); --surface-success: var(--success-100); --surface-warning: var(--warning-100); --text-on-information: var(--information-800); --text-on-success: var(--success-800); --text-on-warning: var(--warning-900); --text-on-error: var(--error-800); --border-information: var(--information-300); --border-success: var(--success-300); --border-warning: var(--warning-300); --border-error-soft: var(--error-300); --field-width: 17.5rem; --field-width-defined: 26.875rem; --field-padding-x: 0.75rem; --field-padding-y: 0.5rem; --field-gap: 0.5rem; --field-min-height: 2.625rem; --field-icon-size: 1.5rem; } [data-theme="dark"] { color-scheme: dark; --surface-page: var(--neutral-900); --surface-action: var(--primary-600); --surface-action-hover: var(--primary-700); --surface-disabled: var(--neutral-800); --surface-muted: var(--neutral-800); --surface-elevated: var(--neutral-800); --surface-primary: var(--neutral-800); --text-body: var(--neutral-200); --text-disabled: var(--neutral-500); --text-filled: var(--neutral-100); --text-heading: var(--neutral-100); --text-headings: var(--neutral-200); --text-on-action: var(--neutral-100); --text-action: var(--primary-300); --text-on-disabled: var(--neutral-400); --text-muted: var(--neutral-400); --text-inverse: var(--neutral-900); --text-information: var(--information-200); --text-success: var(--success-200); --text-warning: var(--warning-200); --text-error: var(--error-200); --border-default: var(--neutral-700); --border-action: var(--primary-400); --border-focus: var(--primary-300); --border-error: var(--error-400); --border-success: var(--success-400); --border-active: var(--primary-300); --border-hover: var(--neutral-500); --border-disabled: var(--neutral-700); --border-action-hover: var(--primary-300); --surface-action-hover-2: var(--primary-800); --surface-disabled-selected: var(--neutral-500); --surface-error: var(--error-900); --border-error-input: var(--error-400); --icon-on-action: var(--text-on-action); --icon-information: var(--information-300); --icon-success: var(--success-300); --icon-warning: var(--warning-300); --icon-error: var(--error-400); --surface-information: var(--information-800); --surface-success: var(--success-800); --surface-warning: var(--warning-800); --surface-error: var(--error-900); --text-on-information: var(--information-100); --text-on-success: var(--success-100); --text-on-warning: var(--warning-100); --text-on-error: var(--error-100); --border-information: var(--information-700); --border-success: var(--success-700); --border-warning: var(--warning-700); --border-error-soft: var(--error-700); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --surface-page: var(--neutral-900); --surface-action: var(--primary-600); --surface-action-hover: var(--primary-700); --surface-disabled: var(--neutral-800); --surface-muted: var(--neutral-800); --surface-elevated: var(--neutral-800); --surface-primary: var(--neutral-800); --text-body: var(--neutral-200); --text-disabled: var(--neutral-500); --text-filled: var(--neutral-100); --text-heading: var(--neutral-100); --text-headings: var(--neutral-200); --text-on-action: var(--neutral-100); --text-action: var(--primary-300); --text-on-disabled: var(--neutral-400); --text-muted: var(--neutral-400); --text-inverse: var(--neutral-900); --text-information: var(--information-200); --text-success: var(--success-200); --text-warning: var(--warning-200); --text-error: var(--error-200); --border-default: var(--neutral-700); --border-action: var(--primary-400); --border-focus: var(--primary-300); --border-error: var(--error-400); --border-success: var(--success-400); --border-active: var(--primary-300); --border-hover: var(--neutral-500); --border-disabled: var(--neutral-700); --border-action-hover: var(--primary-300); --surface-action-hover-2: var(--primary-800); --surface-disabled-selected: var(--neutral-500); --surface-error: var(--error-900); --border-error-input: var(--error-400); --icon-on-action: var(--text-on-action); --icon-information: var(--information-300); --icon-success: var(--success-300); --icon-warning: var(--warning-300); --icon-error: var(--error-400); --surface-information: var(--information-800); --surface-success: var(--success-800); --surface-warning: var(--warning-800); --text-on-information: var(--information-100); --text-on-success: var(--success-100); --text-on-warning: var(--warning-100); --text-on-error: var(--error-100); --border-information: var(--information-700); --border-success: var(--success-700); --border-warning: var(--warning-700); --border-error-soft: var(--error-700); } }