fix: replace hardcoded text-white with DS variables, fix label/value layout

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

ui/src/pages/LicensePage.tsx

@@ -7,6 +7,7 @@ import {
 } from '@cameleer/design-system';
 import { useAuth } from '../auth/useAuth';
 import { useLicense } from '../api/hooks';
+import styles from '../styles/platform.module.css';
 
 const FEATURE_LABELS: Record<string, string> = {
   topology: 'Topology',
@@ -82,7 +83,7 @@ export function LicensePage() {
     <div className="space-y-6 p-6">
       {/* Header */}
       <div className="flex items-center gap-3">
-        <h1 className="text-2xl font-semibold text-white">License</h1>
+        <h1 className={styles.heading}>License</h1>
         <Badge
           label={license.tier.toUpperCase()}
           color={tierColor(license.tier)}
@@ -91,10 +92,10 @@ export function LicensePage() {
 
       {/* Expiry info */}
       <Card title="Validity">
-        <div className="flex flex-col gap-2 text-sm">
-          <div className="flex items-center justify-between">
-            <span className="text-white/60">Issued</span>
-            <span className="text-white">
+        <div className="flex flex-col gap-2">
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Issued</span>
+            <span className={styles.kvValue}>
               {new Date(license.issuedAt).toLocaleDateString(undefined, {
                 year: 'numeric',
                 month: 'long',
@@ -102,12 +103,12 @@ export function LicensePage() {
               })}
             </span>
           </div>
-          <div className="flex items-center justify-between">
-            <span className="text-white/60">Expires</span>
-            <span className="text-white">{expDate}</span>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Expires</span>
+            <span className={styles.kvValue}>{expDate}</span>
           </div>
-          <div className="flex items-center justify-between">
-            <span className="text-white/60">Days remaining</span>
+          <div className={styles.kvRow}>
+            <span className={styles.kvLabel}>Days remaining</span>
             <Badge
               label={isExpired ? 'Expired' : `${days} days`}
               color={isExpired ? 'error' : isExpiringSoon ? 'warning' : 'success'}
@@ -118,15 +119,12 @@ export function LicensePage() {
 
       {/* Feature matrix */}
       <Card title="Features">
-        <div className="divide-y divide-white/10">
+        <div className={styles.dividerList}>
           {Object.entries(FEATURE_LABELS).map(([key, label]) => {
             const enabled = license.features[key] ?? false;
             return (
-              <div
-                key={key}
-                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
-              >
-                <span className="text-sm text-white">{label}</span>
+              <div key={key} className={styles.dividerRow}>
+                <span className={styles.kvLabel}>{label}</span>
                 <Badge
                   label={enabled ? 'Enabled' : 'Not included'}
                   color={enabled ? 'success' : 'auto'}
@@ -139,16 +137,13 @@ export function LicensePage() {
 
       {/* Limits */}
       <Card title="Limits">
-        <div className="divide-y divide-white/10">
+        <div className={styles.dividerList}>
           {Object.entries(LIMIT_LABELS).map(([key, label]) => {
             const value = license.limits[key];
             return (
-              <div
-                key={key}
-                className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
-              >
-                <span className="text-sm text-white/60">{label}</span>
-                <span className="text-sm font-mono text-white">
+              <div key={key} className={styles.dividerRow}>
+                <span className={styles.kvLabel}>{label}</span>
+                <span className={styles.kvValueMono}>
                   {value !== undefined ? value : '—'}
                 </span>
               </div>
@@ -160,7 +155,7 @@ export function LicensePage() {
       {/* License token */}
       <Card title="License Token">
         <div className="space-y-3">
-          <p className="text-sm text-white/60">
+          <p className={styles.description}>
             Use this token when registering Cameleer agents with your tenant.
           </p>
           <button
@@ -171,8 +166,8 @@ export function LicensePage() {
             {tokenExpanded ? 'Hide token' : 'Show token'}
           </button>
           {tokenExpanded && (
-            <div className="mt-2 rounded bg-white/5 border border-white/10 p-3 overflow-x-auto">
-              <code className="text-xs font-mono text-white/80 break-all">
+            <div className={styles.tokenBlock}>
+              <code className={styles.tokenCode}>
                 {license.token}
               </code>
             </div>