/* Fixed, user-selectable Reach colour themes. Layout and typography remain shared. */
html[data-theme="ocean"]{
  color-scheme:light;
  --mallard:#236B87;--mallard-dark:#174B65;--navy:#163754;--sage:#D6EAF0;--sage-2:#EBF5F7;
  --cream:#EFF7F8;--white:#FFFFFF;--ink:#17344A;--muted:#617786;--border:#C9DDE3;
  --success:#287A68;--success-soft:#E5F3EF;--warning:#866019;--warning-soft:#FBF1D8;
  --vf-surface-canvas:#EFF7F8;--vf-surface-navigation:#F8FCFD;--vf-surface-content:#FFFFFF;
  --vf-surface-subtle:#EBF5F7;--vf-surface-metric:#F1F8FA;--vf-surface-actionable:#FFFFFF;
  --vf-surface-selected:#D6EAF0;--vf-surface-disabled:#E8F0F2;--vf-text-primary:#17344A;
  --vf-text-secondary:#526D7D;--vf-text-tertiary:#687F8C;--vf-border:#C9DDE3;
  --vf-border-strong:#95B9C5;--vf-border-selected:#5C9DB1;--vf-focus:#236B87;
  --vf-focus-ring:rgba(35,107,135,.25);--vf-primary:#236B87;--vf-primary-hover:#174B65;
  --vf-primary-pressed:#103B51;--vf-secondary-bg:#E1EFF3;--vf-secondary-hover:#D3E7ED;
}

html[data-theme="plum"]{
  color-scheme:light;
  --mallard:#75517E;--mallard-dark:#563A60;--navy:#3F2F4D;--sage:#E8DCEA;--sage-2:#F4EDF5;
  --cream:#F8F4F8;--white:#FFFFFF;--ink:#382D43;--muted:#776A7E;--border:#DED2E1;
  --success:#52745D;--success-soft:#EAF2EC;--warning:#88601B;--warning-soft:#FBF1D8;
  --vf-surface-canvas:#F8F4F8;--vf-surface-navigation:#FCFAFC;--vf-surface-content:#FFFFFF;
  --vf-surface-subtle:#F4EDF5;--vf-surface-metric:#F7F1F7;--vf-surface-actionable:#FFFFFF;
  --vf-surface-selected:#E8DCEA;--vf-surface-disabled:#F0EAEF;--vf-text-primary:#382D43;
  --vf-text-secondary:#6B5E72;--vf-text-tertiary:#7D7083;--vf-border:#DED2E1;
  --vf-border-strong:#BEA8C3;--vf-border-selected:#9B75A3;--vf-focus:#75517E;
  --vf-focus-ring:rgba(117,81,126,.25);--vf-primary:#75517E;--vf-primary-hover:#5F4168;
  --vf-primary-pressed:#4C3454;--vf-secondary-bg:#EFE5F0;--vf-secondary-hover:#E5D6E8;
}

html[data-theme="terracotta"]{
  color-scheme:light;
  --mallard:#A4543E;--mallard-dark:#773C2E;--navy:#54382F;--sage:#EDD9CD;--sage-2:#F7EDE6;
  --cream:#FBF4EE;--white:#FFFFFF;--ink:#493229;--muted:#7D6B63;--border:#E5D5CB;
  --success:#567157;--success-soft:#EAF1E9;--warning:#8A5A16;--warning-soft:#FBF0D7;
  --vf-surface-canvas:#FBF4EE;--vf-surface-navigation:#FEFBF8;--vf-surface-content:#FFFFFF;
  --vf-surface-subtle:#F7EDE6;--vf-surface-metric:#FAF1EA;--vf-surface-actionable:#FFFFFF;
  --vf-surface-selected:#EDD9CD;--vf-surface-disabled:#F3E9E3;--vf-text-primary:#493229;
  --vf-text-secondary:#715E55;--vf-text-tertiary:#837169;--vf-border:#E5D5CB;
  --vf-border-strong:#CDB2A3;--vf-border-selected:#C47A61;--vf-focus:#A4543E;
  --vf-focus-ring:rgba(164,84,62,.25);--vf-primary:#A4543E;--vf-primary-hover:#874330;
  --vf-primary-pressed:#6F3728;--vf-secondary-bg:#F4E4DB;--vf-secondary-hover:#ECD7CC;
}

html[data-theme="meadow"]{
  color-scheme:light;
  --mallard:#3D7650;--mallard-dark:#285238;--navy:#234530;--sage:#DCECDD;--sage-2:#EDF6EE;--cream:#F1F7F1;--white:#FFFFFF;--ink:#263E2C;--muted:#617366;--border:#CFDFD0;--success:#3D7650;--success-soft:#E7F2E8;--warning:#80601B;--warning-soft:#FBF2D8;--vf-surface-canvas:#F1F7F1;--vf-surface-navigation:#FBFDFB;--vf-surface-content:#FFFFFF;--vf-surface-subtle:#EDF6EE;--vf-surface-metric:#F4F9F4;--vf-surface-actionable:#FFFFFF;--vf-surface-selected:#DCECDD;--vf-surface-disabled:#EAF1EA;--vf-text-primary:#263E2C;--vf-text-secondary:#526555;--vf-text-tertiary:#6C7C6E;--vf-border:#CFDFD0;--vf-border-strong:#A7C2AA;--vf-border-selected:#6E9D78;--vf-focus:#3D7650;--vf-focus-ring:rgba(61,118,80,.25);--vf-primary:#3D7650;--vf-primary-hover:#305F40;--vf-primary-pressed:#244C32;--vf-secondary-bg:#E4F0E5;--vf-secondary-hover:#D5E7D7;
}

html[data-theme="sapphire"]{
  color-scheme:light;
  --mallard:#316C9A;--mallard-dark:#245174;--navy:#183A5A;--sage:#DCEAF4;--sage-2:#ECF4FA;--cream:#F1F6FB;--white:#FFFFFF;--ink:#203D57;--muted:#617588;--border:#CEDDE9;--success:#387160;--success-soft:#E7F2ED;--warning:#80601B;--warning-soft:#FBF2D8;--vf-surface-canvas:#F1F6FB;--vf-surface-navigation:#FAFCFE;--vf-surface-content:#FFFFFF;--vf-surface-subtle:#ECF4FA;--vf-surface-metric:#F4F8FC;--vf-surface-actionable:#FFFFFF;--vf-surface-selected:#DCEAF4;--vf-surface-disabled:#E8F0F6;--vf-text-primary:#203D57;--vf-text-secondary:#516A80;--vf-text-tertiary:#6A7F91;--vf-border:#CEDDE9;--vf-border-strong:#A8C1D4;--vf-border-selected:#6394B7;--vf-focus:#316C9A;--vf-focus-ring:rgba(49,108,154,.25);--vf-primary:#316C9A;--vf-primary-hover:#285A80;--vf-primary-pressed:#204966;--vf-secondary-bg:#E2EEF7;--vf-secondary-hover:#D4E5F2;
}

html[data-theme="berry"]{
  color-scheme:light;
  --mallard:#A34D6C;--mallard-dark:#7C354E;--navy:#512B3B;--sage:#F0DDE4;--sage-2:#F9EDF1;--cream:#FBF3F6;--white:#FFFFFF;--ink:#482B36;--muted:#7D6870;--border:#E8D3DC;--success:#52745D;--success-soft:#EAF2EC;--warning:#88601B;--warning-soft:#FBF1D8;--vf-surface-canvas:#FBF3F6;--vf-surface-navigation:#FEFAFB;--vf-surface-content:#FFFFFF;--vf-surface-subtle:#F9EDF1;--vf-surface-metric:#FCF6F8;--vf-surface-actionable:#FFFFFF;--vf-surface-selected:#F0DDE4;--vf-surface-disabled:#F4E8EC;--vf-text-primary:#482B36;--vf-text-secondary:#735A65;--vf-text-tertiary:#89717B;--vf-border:#E8D3DC;--vf-border-strong:#D1AEBB;--vf-border-selected:#C47A94;--vf-focus:#A34D6C;--vf-focus-ring:rgba(163,77,108,.25);--vf-primary:#A34D6C;--vf-primary-hover:#873C59;--vf-primary-pressed:#6E3047;--vf-secondary-bg:#F5E4EA;--vf-secondary-hover:#EED5DE;
}

html[data-theme="amber"]{
  color-scheme:light;
  --mallard:#966619;--mallard-dark:#704B11;--navy:#513A19;--sage:#F1E5C9;--sage-2:#FAF2E2;--cream:#FCF7ED;--white:#FFFFFF;--ink:#49381E;--muted:#786B56;--border:#E8DAC0;--success:#52745D;--success-soft:#EAF2EC;--warning:#855914;--warning-soft:#FBEFCC;--vf-surface-canvas:#FCF7ED;--vf-surface-navigation:#FFFCF7;--vf-surface-content:#FFFFFF;--vf-surface-subtle:#FAF2E2;--vf-surface-metric:#FDF9F1;--vf-surface-actionable:#FFFFFF;--vf-surface-selected:#F1E5C9;--vf-surface-disabled:#F6EEDF;--vf-text-primary:#49381E;--vf-text-secondary:#706149;--vf-text-tertiary:#897963;--vf-border:#E8DAC0;--vf-border-strong:#D4BA83;--vf-border-selected:#B78B3F;--vf-focus:#966619;--vf-focus-ring:rgba(150,102,25,.25);--vf-primary:#966619;--vf-primary-hover:#7B5212;--vf-primary-pressed:#633F0C;--vf-secondary-bg:#F6E9D0;--vf-secondary-hover:#EFDDBC;
}

html[data-theme="ocean"] body,html[data-theme="ocean"] .main,
html[data-theme="plum"] body,html[data-theme="plum"] .main,
html[data-theme="terracotta"] body,html[data-theme="terracotta"] .main,
html[data-theme="meadow"] body,html[data-theme="meadow"] .main,
html[data-theme="sapphire"] body,html[data-theme="sapphire"] .main,
html[data-theme="berry"] body,html[data-theme="berry"] .main,
html[data-theme="amber"] body,html[data-theme="amber"] .main{background:var(--vf-surface-canvas);color:var(--ink)}

html[data-theme="ocean"] .btn-primary,html[data-theme="plum"] .btn-primary,html[data-theme="terracotta"] .btn-primary,
html[data-theme="ocean"] .progress-line span,html[data-theme="plum"] .progress-line span,html[data-theme="terracotta"] .progress-line span,
html[data-theme="ocean"] .timeline-dot,html[data-theme="plum"] .timeline-dot,html[data-theme="terracotta"] .timeline-dot{background:var(--vf-primary)}

html[data-theme="ocean"] .role-pill,html[data-theme="plum"] .role-pill,html[data-theme="terracotta"] .role-pill,
html[data-theme="ocean"] .badge.professional,html[data-theme="plum"] .badge.professional,html[data-theme="terracotta"] .badge.professional{background:var(--sage);color:var(--mallard-dark)}

html[data-theme="ocean"] :focus-visible,html[data-theme="plum"] :focus-visible,html[data-theme="terracotta"] :focus-visible{outline-color:var(--vf-focus)}

/* Keep every workspace on the selected palette. These aliases are consumed by
   the growth, coaching, leadership, intelligence and dashboard surfaces. */
html[data-theme="ocean"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}
html[data-theme="plum"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}
html[data-theme="terracotta"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}
html[data-theme="meadow"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}
html[data-theme="sapphire"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}
html[data-theme="berry"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}
html[data-theme="amber"]{--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg)}

html[data-theme="coral"]{
  color-scheme:light;--mallard:#C85B43;--mallard-dark:#963F2D;--navy:#57342D;--sage:#F4DDD6;--sage-2:#FFF0EB;--cream:#FFF4F0;--white:#FFF;--ink:#482E27;--muted:#79635B;--border:#EBCFC6;--success:#39715A;--success-soft:#E7F3EC;--warning:#8A5717;--warning-soft:#FFF0D6;--vf-surface-canvas:#FFF4F0;--vf-surface-navigation:#FFFDFC;--vf-surface-content:#FFF;--vf-surface-subtle:#FFF0EB;--vf-surface-metric:#FFF7F4;--vf-surface-actionable:#FFF;--vf-surface-selected:#F4DDD6;--vf-surface-disabled:#F8EAE5;--vf-text-primary:#482E27;--vf-text-secondary:#705950;--vf-text-tertiary:#856D64;--vf-border:#EBCFC6;--vf-border-strong:#D4A99B;--vf-border-selected:#D87E68;--vf-focus:#C85B43;--vf-focus-ring:rgba(200,91,67,.25);--vf-primary:#C85B43;--vf-primary-hover:#A84732;--vf-primary-pressed:#843827;--vf-secondary-bg:#F9E4DD;--vf-secondary-hover:#F2D5CB;--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg);
}
html[data-theme="lavender"]{
  color-scheme:light;--mallard:#7159B8;--mallard-dark:#503C91;--navy:#362B63;--sage:#E7E1F6;--sage-2:#F2EFFB;--cream:#F7F5FE;--white:#FFF;--ink:#342D50;--muted:#6E6683;--border:#DDD7EF;--success:#47705B;--success-soft:#E8F2EB;--warning:#805C19;--warning-soft:#FCF1D8;--vf-surface-canvas:#F7F5FE;--vf-surface-navigation:#FCFBFF;--vf-surface-content:#FFF;--vf-surface-subtle:#F2EFFB;--vf-surface-metric:#F9F7FE;--vf-surface-actionable:#FFF;--vf-surface-selected:#E7E1F6;--vf-surface-disabled:#EEEAF7;--vf-text-primary:#342D50;--vf-text-secondary:#5F5877;--vf-text-tertiary:#79718F;--vf-border:#DDD7EF;--vf-border-strong:#BBB0DA;--vf-border-selected:#9380C8;--vf-focus:#7159B8;--vf-focus-ring:rgba(113,89,184,.25);--vf-primary:#7159B8;--vf-primary-hover:#5B469F;--vf-primary-pressed:#493784;--vf-secondary-bg:#EDE8F8;--vf-secondary-hover:#E1D9F2;--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg);
}
html[data-theme="citrus"]{
  color-scheme:light;--mallard:#5E7D20;--mallard-dark:#405814;--navy:#314713;--sage:#E5EFCB;--sage-2:#F2F7E4;--cream:#F8FBEF;--white:#FFF;--ink:#354221;--muted:#657054;--border:#D9E4BF;--success:#477052;--success-soft:#E7F2EA;--warning:#806018;--warning-soft:#FCF1D5;--vf-surface-canvas:#F8FBEF;--vf-surface-navigation:#FDFEF9;--vf-surface-content:#FFF;--vf-surface-subtle:#F2F7E4;--vf-surface-metric:#FAFCEF;--vf-surface-actionable:#FFF;--vf-surface-selected:#E5EFCB;--vf-surface-disabled:#EDF3DF;--vf-text-primary:#354221;--vf-text-secondary:#5D6849;--vf-text-tertiary:#747E60;--vf-border:#D9E4BF;--vf-border-strong:#B6CA8E;--vf-border-selected:#86A64D;--vf-focus:#5E7D20;--vf-focus-ring:rgba(94,125,32,.25);--vf-primary:#5E7D20;--vf-primary-hover:#4A6518;--vf-primary-pressed:#3B5012;--vf-secondary-bg:#EBF3D7;--vf-secondary-hover:#DDEBC1;--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg);
}
html[data-theme="midnight"]{
  color-scheme:dark;--mallard:#75B8FF;--mallard-dark:#B9DCFF;--navy:#EAF4FF;--sage:#203A58;--sage-2:#182B45;--cream:#101B2D;--white:#182B45;--ink:#EAF4FF;--muted:#A9C0D8;--border:#385675;--danger:#FF9A92;--danger-soft:#47272A;--success:#78D2AE;--success-soft:#163A32;--warning:#F1CB75;--warning-soft:#42371E;--shadow:0 10px 30px rgba(0,0,0,.28);--shadow-lg:0 24px 70px rgba(0,0,0,.48);--vf-surface-canvas:#101B2D;--vf-surface-navigation:#101B2D;--vf-surface-content:#182B45;--vf-surface-subtle:#14243A;--vf-surface-metric:#1B304C;--vf-surface-actionable:#182B45;--vf-surface-selected:#203A58;--vf-surface-disabled:#17283F;--vf-text-primary:#EAF4FF;--vf-text-secondary:#BDD0E3;--vf-text-tertiary:#9EB5CD;--vf-border:#385675;--vf-border-strong:#587A9F;--vf-border-selected:#75B8FF;--vf-focus:#75B8FF;--vf-focus-ring:rgba(117,184,255,.42);--vf-primary:#75B8FF;--vf-primary-hover:#9DCEFF;--vf-primary-pressed:#5E9FE5;--vf-secondary-bg:#203A58;--vf-secondary-hover:#294966;--vf-danger:#FF9A92;--vf-danger-hover:#FFB1AA;--vf-danger-soft:#47272A;--vf-success:#78D2AE;--vf-success-soft:#163A32;--vf-warning:#F1CB75;--vf-warning-soft:#42371E;--vf-accent:var(--vf-primary);--vf-accent-soft:var(--vf-secondary-bg);
}

/* Shared components still contain a few legacy literal colours. Reapply the
   semantic roles here so cards, forms, tables, navigation and login all use
   the chosen theme instead of leaking the default evergreen palette. */
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .reach-sidebar{color:var(--vf-text-primary);background:var(--vf-surface-navigation);border-right-color:var(--vf-border)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .reach-sidebar .nav button{color:var(--vf-text-primary)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .reach-sidebar .nav button:hover,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .reach-sidebar .nav button.active{background:var(--vf-secondary-bg);color:var(--vf-text-primary)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .reach-sidebar .nav button.active::before,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .message-nav-badge{background:var(--vf-primary);color:var(--vf-surface-content)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .card,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .goal-card,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .teacher-card,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .message-row,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .modal,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .staff-table td,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .admin-members-table td,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .field input,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .field textarea,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .field select,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) select{background:var(--vf-surface-content);color:var(--vf-text-primary);border-color:var(--vf-border)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .segmented{background:var(--vf-surface-subtle)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .segmented button.active,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .icon-btn{background:var(--vf-surface-content);color:var(--vf-text-primary)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .message-row.is-unread{border-color:var(--vf-border-selected);background:linear-gradient(135deg,var(--vf-surface-content),var(--vf-secondary-bg))}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .login-page{background:linear-gradient(145deg,var(--vf-surface-canvas),var(--vf-surface-subtle))}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .login-card,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .login-auth,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .emergent-surface,html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .emergent-drawer{background:var(--vf-surface-content);color:var(--vf-text-primary)}
html[data-theme]:not([data-theme="light"]):not([data-theme="dark"]) .btn-passkey{border-color:var(--vf-border-strong);background:var(--vf-surface-content);color:var(--vf-text-primary)}
html[data-theme="midnight"] .reach-sidebar{color:var(--vf-text-primary);background:var(--vf-surface-navigation);border-right-color:var(--vf-border)}
html[data-theme="midnight"] .reach-sidebar .nav button{color:var(--vf-text-secondary)}
html[data-theme="midnight"] .reach-sidebar .nav button:hover,html[data-theme="midnight"] .reach-sidebar .nav button.active{background:var(--vf-secondary-bg);color:var(--vf-text-primary)}
html[data-theme="midnight"] .reach-sidebar .nav button.active::before,html[data-theme="midnight"] .message-nav-badge{background:var(--vf-primary);color:#101B2D}
html[data-theme="midnight"] .card,html[data-theme="midnight"] .goal-card,html[data-theme="midnight"] .teacher-card,html[data-theme="midnight"] .message-row,html[data-theme="midnight"] .modal,html[data-theme="midnight"] .staff-table td,html[data-theme="midnight"] .admin-members-table td,html[data-theme="midnight"] .field input,html[data-theme="midnight"] .field textarea,html[data-theme="midnight"] .field select,html[data-theme="midnight"] select{background:var(--vf-surface-content);color:var(--vf-text-primary);border-color:var(--vf-border)}
html[data-theme="midnight"] .btn-ghost,html[data-theme="midnight"] .icon-btn,html[data-theme="midnight"] .account-theme-options button{background:var(--vf-surface-content);color:var(--vf-text-primary)}
html[data-theme="midnight"] .message-row.is-unread{border-color:var(--vf-border-selected);background:linear-gradient(135deg,var(--vf-surface-content),var(--vf-secondary-bg))}
html[data-theme="midnight"] .login-page{background:linear-gradient(145deg,var(--vf-surface-canvas),var(--vf-surface-subtle))}
html[data-theme="midnight"] .login-card,html[data-theme="midnight"] .login-auth,html[data-theme="midnight"] .emergent-surface,html[data-theme="midnight"] .emergent-drawer{background:var(--vf-surface-content);color:var(--vf-text-primary)}
html[data-theme="midnight"] .btn-passkey{border-color:var(--vf-border-strong);background:var(--vf-surface-content);color:var(--vf-text-primary)}

/* Growth Journey originally used its own evergreen vocabulary. Keep those
   aliases pointed at the active theme so the AITSL map, goal progress and
   journey states belong to the same palette as the rest of Reach. */
html[data-theme]{
  --paper:var(--vf-surface-content);
  --mint:var(--vf-secondary-bg);
  --evergreen:var(--vf-primary);
  --deep-evergreen:var(--vf-primary-hover);
  --reach-evergreen:var(--vf-primary);
  --reach-evergreen-deep:var(--vf-primary-hover);
  --reach-evergreen-soft:var(--vf-primary-hover);
  --reach-mint:var(--vf-secondary-bg);
  --reach-mint-strong:var(--vf-surface-selected);
}

html[data-theme] .aitsl-growth-map{
  background:var(--vf-surface-content);
  border-color:var(--vf-border);
}
html[data-theme] .aitsl-map-domains section,
html[data-theme] .aitsl-focus-chips span{
  background:var(--vf-secondary-bg);
  color:var(--vf-text-primary);
}
html[data-theme] .aitsl-map-domains strong{color:var(--vf-primary)}
html[data-theme] .progress-line{background:var(--vf-surface-disabled)}
html[data-theme] .progress-line span{background:linear-gradient(90deg,var(--vf-primary),var(--vf-primary-hover))}
html[data-theme] .growth-journey-goal{box-shadow:var(--vf-shadow-content)}
html[data-theme] .growth-journey-goal--completed,
html[data-theme] .goal-story-state--completed{border-left-color:var(--vf-success)}
html[data-theme] .goal-card:hover{border-color:var(--vf-border-selected);box-shadow:var(--vf-shadow-hover)}
html[data-theme] .badge.professional,
html[data-theme] .badge.on_track,
html[data-theme] .badge.strong_progress{
  border-color:color-mix(in srgb,var(--vf-primary) 25%,var(--vf-border));
  background:var(--vf-secondary-bg);
  color:var(--vf-primary-hover);
}