/* Design System ยท Role themes * * Overrides --ds-color-primary* tokens based on attribute. * Default theme (no attribute, or unknown value) falls back to student tokens * defined in tokens.css. * * Auth pages MUST use data-role="student". */ :root[data-role="student"] { --ds-color-primary: #667eea; --ds-color-primary-hover: #5a67d8; --ds-color-primary-subtle: rgb(102 126 234 / 8%); --ds-color-primary-gradient-from: #667eea; --ds-color-primary-gradient-to: #7c3aed; --ds-color-focus-ring: rgb(102 126 234 / 40%); } :root[data-role="teacher"] { --ds-color-primary: #4299e1; --ds-color-primary-hover: #2c5282; --ds-color-primary-subtle: rgb(66 153 225 / 8%); --ds-color-primary-gradient-from: #1e3a5f; --ds-color-primary-gradient-to: #2c5282; --ds-color-focus-ring: rgb(66 153 225 / 40%); } :root[data-role="admin"] { --ds-color-primary: #4e73df; --ds-color-primary-hover: #224abe; --ds-color-primary-subtle: rgb(78 115 223 / 8%); --ds-color-primary-gradient-from: #1e3a5f; --ds-color-primary-gradient-to: #0d1b2a; --ds-color-focus-ring: rgb(78 115 223 / 40%); } :root[data-role="parent"] { --ds-color-primary: #2f855a; --ds-color-primary-hover: #276749; --ds-color-primary-subtle: rgb(47 133 90 / 8%); --ds-color-primary-gradient-from: #2f855a; --ds-color-primary-gradient-to: #22543d; --ds-color-focus-ring: rgb(47 133 90 / 40%); }