/* * VocaSensei Color Tokens * Based on Material Design 3 tonal color system. * Each tutor maps to a seed color; ColorScheme.fromSeed is approximated via OKLCH. * NEVER use raw hex values in component code — reference these tokens only. * * Apply tutor themes via: * Default (no attribute) = Kenji, Deep Navy */ /* ───────────────────────────────────────── DEFAULT THEME: Kenji · Deep Navy #1F4E79 ───────────────────────────────────────── */ :root { --tutor-id: kenji; /* @kind other */ --tutor-name: Kenji; /* @kind other */ --tutor-seed: #1F4E79; /* Primary */ --color-primary: oklch(0.38 0.135 252); --color-on-primary: oklch(1.00 0.000 252); --color-primary-container: oklch(0.91 0.055 252); --color-on-primary-container: oklch(0.12 0.055 252); --color-inverse-primary: oklch(0.72 0.105 252); /* Secondary */ --color-secondary: oklch(0.44 0.048 252); --color-on-secondary: oklch(1.00 0.000 252); --color-secondary-container: oklch(0.92 0.022 252); --color-on-secondary-container:oklch(0.15 0.022 252); /* Tertiary */ --color-tertiary: oklch(0.42 0.075 200); --color-on-tertiary: oklch(1.00 0.000 200); --color-tertiary-container: oklch(0.91 0.038 200); --color-on-tertiary-container: oklch(0.14 0.038 200); /* Error */ --color-error: oklch(0.52 0.185 25); --color-on-error: oklch(1.00 0.000 25); --color-error-container: oklch(0.93 0.065 25); --color-on-error-container: oklch(0.16 0.065 25); /* Background */ --color-background: oklch(0.994 0.002 252); --color-on-background: oklch(0.14 0.010 252); /* Surface */ --color-surface: oklch(0.986 0.003 252); --color-on-surface: oklch(0.14 0.010 252); --color-surface-variant: oklch(0.900 0.020 252); --color-on-surface-variant: oklch(0.36 0.028 252); /* Surface containers (tone 100 → 87) */ --color-surface-container-lowest: oklch(1.000 0.000 252); --color-surface-container-low: oklch(0.965 0.004 252); --color-surface-container: oklch(0.932 0.008 252); --color-surface-container-high: oklch(0.900 0.012 252); --color-surface-container-highest: oklch(0.872 0.015 252); /* Outline */ --color-outline: oklch(0.575 0.024 252); --color-outline-variant: oklch(0.800 0.018 252); /* Inverse */ --color-inverse-surface: oklch(0.225 0.015 252); --color-inverse-on-surface: oklch(0.932 0.005 252); /* Scrim / Shadow */ --color-scrim: oklch(0 0 0 / 0.32); --color-shadow: oklch(0 0 0 / 0.08); } /* ───────────────────────────────────── TUTOR: Hana · Bright Amber #FFBF00 ───────────────────────────────────── */ [data-theme="hana"] { --tutor-id: hana; /* @kind other */ --tutor-name: Hana; /* @kind other */ --tutor-seed: #FFBF00; /* @kind color */ --color-primary: oklch(0.52 0.155 85); --color-on-primary: oklch(1.00 0.000 85); --color-primary-container: oklch(0.93 0.085 85); --color-on-primary-container: oklch(0.14 0.085 85); --color-inverse-primary: oklch(0.73 0.120 85); --color-secondary: oklch(0.50 0.065 85); --color-on-secondary: oklch(1.00 0.000 85); --color-secondary-container: oklch(0.93 0.030 85); --color-on-secondary-container:oklch(0.16 0.030 85); --color-surface: oklch(0.987 0.003 85); --color-on-surface: oklch(0.14 0.008 85); --color-surface-variant: oklch(0.905 0.022 85); --color-on-surface-variant: oklch(0.38 0.030 85); --color-surface-container-lowest: oklch(1.000 0.000 85); --color-surface-container-low: oklch(0.967 0.005 85); --color-surface-container: oklch(0.935 0.010 85); --color-surface-container-high: oklch(0.902 0.014 85); --color-surface-container-highest: oklch(0.875 0.017 85); --color-outline: oklch(0.580 0.026 85); --color-outline-variant: oklch(0.808 0.020 85); --color-inverse-surface: oklch(0.225 0.015 85); --color-inverse-on-surface: oklch(0.935 0.005 85); --color-background: oklch(0.994 0.002 85); --color-on-background: oklch(0.14 0.008 85); } /* ───────────────────────────────────────── TUTOR: Sarah · Warm Orange #FF7F50 ───────────────────────────────────────── */ [data-theme="sarah"] { --tutor-id: sarah; /* @kind other */ --tutor-name: Sarah; /* @kind other */ --tutor-seed: #FF7F50; /* @kind color */ --color-primary: oklch(0.52 0.165 42); --color-on-primary: oklch(1.00 0.000 42); --color-primary-container: oklch(0.93 0.085 42); --color-on-primary-container: oklch(0.14 0.085 42); --color-inverse-primary: oklch(0.73 0.130 42); --color-secondary: oklch(0.50 0.070 42); --color-on-secondary: oklch(1.00 0.000 42); --color-secondary-container: oklch(0.93 0.030 42); --color-on-secondary-container:oklch(0.16 0.030 42); --color-surface: oklch(0.987 0.003 42); --color-on-surface: oklch(0.14 0.008 42); --color-surface-variant: oklch(0.905 0.022 42); --color-on-surface-variant: oklch(0.38 0.030 42); --color-surface-container-lowest: oklch(1.000 0.000 42); --color-surface-container-low: oklch(0.967 0.005 42); --color-surface-container: oklch(0.935 0.010 42); --color-surface-container-high: oklch(0.902 0.014 42); --color-surface-container-highest: oklch(0.875 0.017 42); --color-outline: oklch(0.580 0.026 42); --color-outline-variant: oklch(0.808 0.020 42); --color-inverse-surface: oklch(0.225 0.015 42); --color-inverse-on-surface: oklch(0.935 0.005 42); --color-background: oklch(0.994 0.002 42); --color-on-background: oklch(0.14 0.008 42); } /* ─────────────────────────────────────────────── TUTOR: Dr. Elena · Academic Purple #4A2E80 ─────────────────────────────────────────────── */ [data-theme="elena"] { --tutor-id: elena; /* @kind other */ --tutor-name: Dr. Elena; /* @kind other */ --tutor-seed: #4A2E80; /* @kind color */ --color-primary: oklch(0.38 0.175 296); --color-on-primary: oklch(1.00 0.000 296); --color-primary-container: oklch(0.92 0.075 296); --color-on-primary-container: oklch(0.14 0.075 296); --color-inverse-primary: oklch(0.72 0.140 296); --color-secondary: oklch(0.44 0.065 296); --color-on-secondary: oklch(1.00 0.000 296); --color-secondary-container: oklch(0.92 0.025 296); --color-on-secondary-container:oklch(0.16 0.025 296); --color-surface: oklch(0.986 0.003 296); --color-on-surface: oklch(0.14 0.008 296); --color-surface-variant: oklch(0.900 0.022 296); --color-on-surface-variant: oklch(0.36 0.030 296); --color-surface-container-lowest: oklch(1.000 0.000 296); --color-surface-container-low: oklch(0.966 0.004 296); --color-surface-container: oklch(0.933 0.009 296); --color-surface-container-high: oklch(0.900 0.013 296); --color-surface-container-highest: oklch(0.872 0.016 296); --color-outline: oklch(0.570 0.026 296); --color-outline-variant: oklch(0.800 0.020 296); --color-inverse-surface: oklch(0.225 0.015 296); --color-inverse-on-surface: oklch(0.933 0.005 296); --color-background: oklch(0.994 0.002 296); --color-on-background: oklch(0.14 0.008 296); } /* ──────────────────────────────────────────── TUTOR: Arthur · Forest Green #4A5D4E ──────────────────────────────────────────── */ [data-theme="arthur"] { --tutor-id: arthur; /* @kind other */ --tutor-name: Arthur; /* @kind other */ --tutor-seed: #4A5D4E; /* @kind color */ --color-primary: oklch(0.42 0.090 155); --color-on-primary: oklch(1.00 0.000 155); --color-primary-container: oklch(0.92 0.045 155); --color-on-primary-container: oklch(0.14 0.045 155); --color-inverse-primary: oklch(0.72 0.075 155); --color-secondary: oklch(0.44 0.042 155); --color-on-secondary: oklch(1.00 0.000 155); --color-secondary-container: oklch(0.92 0.020 155); --color-on-secondary-container:oklch(0.16 0.020 155); --color-surface: oklch(0.987 0.003 155); --color-on-surface: oklch(0.14 0.007 155); --color-surface-variant: oklch(0.905 0.020 155); --color-on-surface-variant: oklch(0.38 0.028 155); --color-surface-container-lowest: oklch(1.000 0.000 155); --color-surface-container-low: oklch(0.967 0.004 155); --color-surface-container: oklch(0.935 0.008 155); --color-surface-container-high: oklch(0.902 0.012 155); --color-surface-container-highest: oklch(0.875 0.015 155); --color-outline: oklch(0.580 0.024 155); --color-outline-variant: oklch(0.808 0.018 155); --color-inverse-surface: oklch(0.225 0.015 155); --color-inverse-on-surface: oklch(0.935 0.005 155); --color-background: oklch(0.994 0.002 155); --color-on-background: oklch(0.14 0.007 155); } /* ──────────────────────────────────────────── TUTOR: Leo · Crimson Red #D9381E ──────────────────────────────────────────── */ [data-theme="leo"] { --tutor-id: leo; /* @kind other */ --tutor-name: Leo; /* @kind other */ --tutor-seed: #D9381E; /* @kind color */ --color-primary: oklch(0.47 0.195 25); --color-on-primary: oklch(1.00 0.000 25); --color-primary-container: oklch(0.93 0.085 25); --color-on-primary-container: oklch(0.14 0.085 25); --color-inverse-primary: oklch(0.74 0.155 25); --color-secondary: oklch(0.50 0.075 25); --color-on-secondary: oklch(1.00 0.000 25); --color-secondary-container: oklch(0.93 0.030 25); --color-on-secondary-container:oklch(0.16 0.030 25); --color-surface: oklch(0.987 0.003 25); --color-on-surface: oklch(0.14 0.008 25); --color-surface-variant: oklch(0.905 0.022 25); --color-on-surface-variant: oklch(0.38 0.030 25); --color-surface-container-lowest: oklch(1.000 0.000 25); --color-surface-container-low: oklch(0.967 0.005 25); --color-surface-container: oklch(0.935 0.010 25); --color-surface-container-high: oklch(0.902 0.014 25); --color-surface-container-highest: oklch(0.875 0.017 25); --color-outline: oklch(0.580 0.026 25); --color-outline-variant: oklch(0.808 0.020 25); --color-inverse-surface: oklch(0.225 0.015 25); --color-inverse-on-surface: oklch(0.935 0.005 25); --color-background: oklch(0.994 0.002 25); --color-on-background: oklch(0.14 0.008 25); }