/**
 * Design Tokens for VinoVista Backoffice and Dealer Portal
 * Reference documentation: docs/design-tokens.md
 * Ticket: US-42448
 */

:root {
  /* ==========================================================================
     1. Brand / Accent Tokens (Accent only)
     The brand colour is used only for:
     - Primary buttons
     - Active navigation item
     - Links
     - Headings
     - Focus rings
     - Selected states
     Neutral defaults preserve the existing blue accents and component palettes.
     ========================================================================== */
  --primary: var(--brand-primary, #2563eb);
  --primary-hover: var(--brand-primary-hover, #1d4ed8);
  --primary-soft: var(--brand-primary-soft, #eff6ff);
  --on-primary: var(--brand-on-primary, #ffffff);

  --accent: var(--brand-accent, var(--primary));
  --focus: var(--brand-accent, var(--primary));

  --link: var(--brand-link, var(--primary));
  --link-hover: color-mix(in srgb, var(--link) 80%, #000000);

  --selection-bg: var(--primary-soft);
  --selection-text: var(--primary);

  /* ==========================================================================
     2. Neutral Surface Tokens
     Surfaces stay neutral (light surface from branding, white cards).
     ========================================================================== */
  --bg: var(--brand-bg, #f9fafb);
  --surface: var(--brand-surface, #ffffff);
  --surface-card: #ffffff;
  --surface-2: #f3f4f6;
  --surface-muted: #f3f4f6;

  /* ==========================================================================
     3. Neutral Text & Border Tokens
     ========================================================================== */
  --text: var(--brand-text, #111827);
  --text-2: #4b5563;
  --text-3: var(--brand-muted, #6b7280);
  --muted: var(--brand-muted, #6b7280);

  --border: var(--brand-border, #e5e7eb);
  --border-strong: #d1d5db;

  /* ==========================================================================
     4. Semantic Status Tokens (Harmonized Soft Palette)
     Status colours stay semantic and are NOT brand-coloured.
     ========================================================================== */
  --status-success: #15803d;
  --status-success-bg: #f0fdf4;
  --status-success-border: #bbf7d0;
  --status-success-text: #166534;

  --status-warning: #b45309;
  --status-warning-bg: #fffbeb;
  --status-warning-border: #fde68a;
  --status-warning-text: #92400e;

  --status-error: #b91c1c;
  --status-error-bg: #fef2f2;
  --status-error-border: #fecaca;
  --status-error-text: #991b1b;

  --status-info: #1d4ed8;
  --status-info-bg: #eff6ff;
  --status-info-border: #bfdbfe;
  --status-info-text: #1e40af;

  /* ==========================================================================
     5. Calendar & Event Tokens (Semantic, Harmonized)
     Calendar event states stay semantic and are not brand-coloured.
     ========================================================================== */
  --calendar-btn-bg: var(--surface);
  --calendar-btn-border: var(--border-strong);
  --calendar-btn-text: var(--text);
  --calendar-btn-hover-bg: var(--surface-2);
  --calendar-btn-active-bg: var(--primary);
  --calendar-btn-active-text: var(--on-primary);

  --calendar-series-bg: #eff6ff;
  --calendar-series-border: #93c5fd;
  --calendar-series-text: #1e40af;

  --calendar-single-bg: #ecfdf5;
  --calendar-single-border: #a7f3d0;
  --calendar-single-text: #065f46;

  --calendar-reservation-bg: #fffbeb;
  --calendar-reservation-border: #fde68a;
  --calendar-reservation-text: #92400e;

  --calendar-holiday-bg: #f3f4f6;
  --calendar-holiday-border: #d1d5db;
  --calendar-holiday-text: #4b5563;

  --dot-ok: #22c55e;
  --dot-low: #f59e0b;
  --dot-full: #ef4444;

}

/* ==========================================================================
   Dark Mode Tokens
   ========================================================================== */
html.dark, :root.dark {
  --primary: var(--brand-dark-accent, #60a5fa);
  --primary-hover: color-mix(in srgb, var(--primary) 85%, #ffffff);
  --primary-soft: #172554;
  --on-primary: var(--brand-dark-on-primary, #111827);

  --accent: var(--brand-dark-accent, #60a5fa);
  --focus: var(--brand-dark-accent, #60a5fa);

  --link: var(--brand-dark-accent, #60a5fa);
  --link-hover: #93c5fd;

  --selection-bg: var(--primary-soft);
  --selection-text: var(--primary);

  /* Surfaces remain neutral dark */
  --bg: #0f1623;
  --surface: #1a2333;
  --surface-card: #1a2333;
  --surface-2: #232e42;
  --surface-muted: #232e42;

  --text: #f3f4f6;
  --text-2: #c7cdd8;
  --text-3: #929cad;
  --muted: #929cad;

  --border: #2b3750;
  --border-strong: #3c4a66;

  --status-success: #4ade80;
  --status-success-bg: rgba(20, 83, 45, 0.25);
  --status-success-border: #166534;
  --status-success-text: #86efac;

  --status-warning: #fbbf24;
  --status-warning-bg: rgba(120, 53, 15, 0.25);
  --status-warning-border: #92400e;
  --status-warning-text: #fcd34d;

  --status-error: #f87171;
  --status-error-bg: rgba(127, 29, 29, 0.25);
  --status-error-border: #991b1b;
  --status-error-text: #fca5a5;

  --status-info: #60a5fa;
  --status-info-bg: rgba(30, 58, 138, 0.25);
  --status-info-border: #1d4ed8;
  --status-info-text: #93c5fd;

  --calendar-btn-bg: #1a2333;
  --calendar-btn-border: #3c4a66;
  --calendar-btn-text: #f3f4f6;
  --calendar-btn-hover-bg: #232e42;
  --calendar-btn-active-bg: var(--primary);
  --calendar-btn-active-text: var(--on-primary);

  --calendar-series-bg: rgba(30, 58, 138, 0.35);
  --calendar-series-border: #1d4ed8;
  --calendar-series-text: #93c5fd;

  --calendar-single-bg: rgba(6, 78, 59, 0.35);
  --calendar-single-border: #047857;
  --calendar-single-text: #6ee7b7;

  --calendar-reservation-bg: rgba(120, 53, 15, 0.35);
  --calendar-reservation-border: #b45309;
  --calendar-reservation-text: #fcd34d;

  --calendar-holiday-bg: #374151;
  --calendar-holiday-border: #4b5563;
  --calendar-holiday-text: #d1d5db;

  --dot-ok: #4ade80;
  --dot-low: #fbbf24;
  --dot-full: #f87171;
}

/* ==========================================================================
   Component Applications of Tokens
   ========================================================================== */

/* FullCalendar styling */
.fc .fc-button {
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  box-shadow: none !important;
  transition: all 0.15s ease;
}
.fc .fc-button-primary {
  background-color: var(--calendar-btn-bg) !important;
  border-color: var(--calendar-btn-border) !important;
  color: var(--calendar-btn-text) !important;
}
.fc .fc-button-primary:hover {
  background-color: var(--calendar-btn-hover-bg) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background-color: var(--calendar-btn-active-bg) !important;
  border-color: var(--calendar-btn-active-bg) !important;
  color: var(--calendar-btn-active-text) !important;
}
.fc .fc-button-primary:disabled {
  opacity: 0.5;
  background-color: var(--calendar-btn-bg) !important;
  border-color: var(--calendar-btn-border) !important;
  color: var(--muted) !important;
}
.fc .fc-today-button {
  background-color: var(--calendar-btn-bg) !important;
  border-color: var(--calendar-btn-border) !important;
  color: var(--calendar-btn-text) !important;
}

/* Calendar Event Types */
.holiday-event {
  --fc-event-text-color: var(--calendar-holiday-text);
  --fc-event-bg-color: var(--calendar-holiday-bg);
  --fc-event-border-color: var(--calendar-holiday-border);
  background-color: var(--calendar-holiday-bg) !important;
  border-color: var(--calendar-holiday-border) !important;
  color: var(--calendar-holiday-text) !important;
}
.series-event {
  --fc-event-text-color: var(--calendar-series-text);
  --fc-event-bg-color: var(--calendar-series-bg);
  --fc-event-border-color: var(--calendar-series-border);
  background-color: var(--calendar-series-bg) !important;
  border-color: var(--calendar-series-border) !important;
  color: var(--calendar-series-text) !important;
}
.timewindow-event {
  --fc-event-text-color: var(--calendar-single-text);
  --fc-event-bg-color: var(--calendar-single-bg);
  --fc-event-border-color: var(--calendar-single-border);
  background-color: var(--calendar-single-bg) !important;
  border-color: var(--calendar-single-border) !important;
  color: var(--calendar-single-text) !important;
}
.table-reservation-event {
  --fc-event-text-color: var(--calendar-reservation-text);
  --fc-event-bg-color: var(--calendar-reservation-bg);
  --fc-event-border-color: var(--calendar-reservation-border);
  background-color: var(--calendar-reservation-bg) !important;
  border-color: var(--calendar-reservation-border) !important;
  color: var(--calendar-reservation-text) !important;
}

/* Calendar Event Dialog Panels */
.calendar-event-dialog-panel {
  border-radius: 0.5rem;
  padding: 1rem;
}
.calendar-event-dialog-series {
  background-color: var(--calendar-series-bg) !important;
  border: 1px solid var(--calendar-series-border) !important;
  color: var(--text) !important;
}
.calendar-event-dialog-series h3,
.calendar-event-dialog-series .calendar-event-dialog-title {
  color: var(--calendar-series-text) !important;
}
.calendar-event-dialog-single {
  background-color: var(--calendar-single-bg) !important;
  border: 1px solid var(--calendar-single-border) !important;
  color: var(--text) !important;
}
.calendar-event-dialog-single h3,
.calendar-event-dialog-single .calendar-event-dialog-title {
  color: var(--calendar-single-text) !important;
}
.calendar-event-dialog-reservation {
  background-color: var(--calendar-reservation-bg) !important;
  border: 1px solid var(--calendar-reservation-border) !important;
  color: var(--text) !important;
}
.calendar-event-dialog-reservation h3,
.calendar-event-dialog-reservation .calendar-event-dialog-title {
  color: var(--calendar-reservation-text) !important;
}

/* Dots */
.booking-dot-ok { background-color: var(--dot-ok) !important; }
.booking-dot-low { background-color: var(--dot-low) !important; }
.booking-dot-full { background-color: var(--dot-full) !important; }


/* Compatibility palette: exact incumbent values during semantic migration. */
:root {
  --palette-000: #000;
  --palette-101827: #101827;
  --palette-101828: #101828;
  --palette-10b981: #10b981;
  --palette-111827: #111827;
  --palette-12291c: #12291c;
  --palette-16233c: #16233c;
  --palette-166534: #166534;
  --palette-16a34a: #16a34a;
  --palette-172235: #172235;
  --palette-172554: #172554;
  --palette-1b2b49: #1b2b49;
  --palette-1d4ed8: #1d4ed8;
  --palette-1e2f52: #1e2f52;
  --palette-1e40af: #1e40af;
  --palette-1f2937: #1f2937;
  --palette-2563eb: #2563eb;
  --palette-259800: #259800;
  --palette-274069: #274069;
  --palette-331a1a: #331a1a;
  --palette-33260e: #33260e;
  --palette-333: #333;
  --palette-374151: #374151;
  --palette-384456: #384456;
  --palette-3b82f6: #3b82f6;
  --palette-475569: #475569;
  --palette-4ade80: #4ade80;
  --palette-4b5563: #4b5563;
  --palette-5b451a: #5b451a;
  --palette-60a5fa: #60a5fa;
  --palette-64748b: #64748b;
  --palette-657184: #657184;
  --palette-6b7280: #6b7280;
  --palette-713f1220: #713f1220;
  --palette-77839a: #77839a;
  --palette-78350f50: #78350f50;
  --palette-86efac: #86efac;
  --palette-92400e: #92400e;
  --palette-929cad: #929cad;
  --palette-93c5fd: #93c5fd;
  --palette-94a3b8: #94a3b8;
  --palette-991b1b: #991b1b;
  --palette-9ca3af: #9ca3af;
  --palette-a4afbf: #a4afbf;
  --palette-a78bfa: #a78bfa;
  --palette-b3c7ea: #b3c7ea;
  --palette-b45309: #b45309;
  --palette-bfdbfe: #bfdbfe;
  --palette-d1d5db: #d1d5db;
  --palette-d97706: #d97706;
  --palette-dbeafe: #dbeafe;
  --palette-dc2626: #dc2626;
  --palette-dce2ea: #dce2ea;
  --palette-dcfce7: #dcfce7;
  --palette-ddd: #ddd;
  --palette-e2e8f0: #e2e8f0;
  --palette-e5e7eb: #e5e7eb;
  --palette-eab308: #eab308;
  --palette-ecf3fe: #ecf3fe;
  --palette-ef4444: #ef4444;
  --palette-eff6ff: #eff6ff;
  --palette-f0feed: #f0feed;
  --palette-f1f5f9: #f1f5f9;
  --palette-f3f4f6: #f3f4f6;
  --palette-f59e0b: #f59e0b;
  --palette-f5f7fa: #f5f7fa;
  --palette-f5f9ff: #f5f9ff;
  --palette-f87171: #f87171;
  --palette-f8fafc: #f8fafc;
  --palette-f9fafb: #f9fafb;
  --palette-fbbf24: #fbbf24;
  --palette-fbdcdc: #fbdcdc;
  --palette-fca5a5: #fca5a5;
  --palette-fcd34d: #fcd34d;
  --palette-fde68a: #fde68a;
  --palette-fdecec: #fdecec;
  --palette-fef2f2: #fef2f2;
  --palette-fef3c7: #fef3c7;
  --palette-fff: #fff;
  --palette-fffbeb: #fffbeb;
  --palette-ffffff: #ffffff;
  --palette-rgb-34-197-94: rgb(34, 197, 94);
  --palette-rgb-55-65-81: rgb(55,65,81);
  --palette-rgb-59-130-246: rgb(59, 130, 246);
  --palette-rgba-0-0-0-0-06: rgba(0,0,0,0.06);
  --palette-rgba-0-0-0-0-5: rgba(0, 0, 0, 0.5);
  --palette-rgba-0-0-0-05: rgba(0, 0, 0, .05);
  --palette-rgba-0-0-0-4: rgba(0, 0, 0, .4);
  --palette-rgba-0-0-0-45: rgba(0, 0, 0, .45);
  --palette-rgba-0-0-0-5: rgba(0, 0, 0, .5);
  --palette-rgba-0-0-0-6: rgba(0, 0, 0, .6);
  --palette-rgba-113-63-18-0-5: rgba(113, 63, 18, 0.5);
  --palette-rgba-120-53-15-0-25: rgba(120, 53, 15, 0.25);
  --palette-rgba-120-53-15-0-4: rgba(120, 53, 15, 0.4);
  --palette-rgba-120-53-15-0-5: rgba(120, 53, 15, 0.5);
  --palette-rgba-17-24-39-05: rgba(17, 24, 39, .05);
  --palette-rgba-17-24-39-06: rgba(17, 24, 39, .06);
  --palette-rgba-17-24-39-08: rgba(17, 24, 39, .08);
  --palette-rgba-17-24-39-10: rgba(17, 24, 39, .10);
  --palette-rgba-17-24-39-18: rgba(17, 24, 39, .18);
  --palette-rgba-17-24-39-45: rgba(17, 24, 39, .45);
  --palette-rgba-22-163-74-0-25: rgba(22, 163, 74, 0.25);
  --palette-rgba-220-38-38-0-25: rgba(220, 38, 38, 0.25);
  --palette-rgba-255-255-255-0-08: rgba(255,255,255,0.08);
  --palette-rgba-255-255-255-0-9: rgba(255,255,255,0.9);
  --palette-rgba-255-255-255-22: rgba(255, 255, 255, .22);
  --palette-rgba-34-197-94-0-15: rgba(34, 197, 94, 0.15);
  --palette-rgba-34-197-94-0-6: rgba(34, 197, 94, 0.6);
  --palette-rgba-59-130-246-0-15: rgba(59, 130, 246, 0.15);
  --palette-rgba-59-130-246-0-6: rgba(59, 130, 246, 0.6);
}

html:root:not(.dark) {
  --tone-action-50: var(--brand-primary-soft, var(--color-blue-50));
  --tone-action-100: var(--brand-primary-soft, var(--color-blue-100));
  --tone-action-200: var(--brand-primary-soft, var(--color-blue-200));
  --tone-action-300: var(--brand-primary-soft, var(--color-blue-300));
  --tone-action-400: var(--brand-primary, var(--color-blue-400));
  --tone-action-500: var(--brand-primary, var(--color-blue-500));
  --tone-action-600: var(--brand-primary, var(--color-blue-600));
  --tone-action-700: var(--brand-primary, var(--color-blue-700));
  --tone-action-800: var(--brand-primary, var(--color-blue-800));
  --tone-action-900: var(--brand-primary, var(--color-blue-900));
  --tone-action-950: var(--brand-primary, var(--color-blue-950));
}
html.dark {
  --tone-action-400: var(--brand-dark-accent, var(--color-blue-400));
  --tone-action-500: var(--brand-dark-accent, var(--color-blue-500));
  --tone-action-600: var(--brand-dark-accent, var(--color-blue-600));
  --tone-action-700: var(--brand-dark-accent, var(--color-blue-700));
  --tone-action-800: var(--brand-dark-accent, var(--color-blue-800));
}
:root {
  --portal-bg: var(--brand-bg, #fafafa);
  --portal-surface: var(--brand-surface, #fff);
  --portal-text: var(--brand-text, #222);
  --portal-muted: var(--brand-muted, #666);
  --portal-product-border: var(--brand-muted, #777);
  --portal-primary: var(--brand-primary, #333);
  --portal-accent: var(--brand-accent, #666);
  --portal-border: var(--brand-border, #e5e7eb);
  --portal-on-primary: var(--brand-on-primary, #fff);
  --portal-surface-card: #fff;
  --portal-start-muted: var(--brand-muted, #555);
  --portal-hover-bg: var(--brand-bg, #f5f5f5);
  --portal-card-shadow: rgba(0, 0, 0, .04);
}

/* Shared source styles and chart categorical colours. */
:root {
  --palette-000000: #000000;
  --palette-06b6d4: #06b6d4;
  --palette-11182712: #11182712;
  --palette-11182720: #11182720;
  --palette-11182755: #11182755;
  --palette-14b8a6: #14b8a6;
  --palette-22c55e: #22c55e;
  --palette-334155: #334155;
  --palette-334b68: #334b68;
  --palette-354052: #354052;
  --palette-365475: #365475;
  --palette-475467: #475467;
  --palette-53634e: #53634e;
  --palette-667085: #667085;
  --palette-84cc16: #84cc16;
  --palette-8993a2: #8993a2;
  --palette-8b5cf6: #8b5cf6;
  --palette-a855f7: #a855f7;
  --palette-a9b8cb: #a9b8cb;
  --palette-ccc: #ccc;
  --palette-cccccc: #cccccc;
  --palette-d6dbe3: #d6dbe3;
  --palette-d8dde5: #d8dde5;
  --palette-dce1e7: #dce1e7;
  --palette-eaf0f7: #eaf0f7;
  --palette-ec4899: #ec4899;
  --palette-edebeb: #EDEBEB;
  --palette-edf0f3: #edf0f3;
  --palette-eef1f4: #eef1f4;
  --palette-efcb00: #EFCB00;
  --palette-f2e0e0: #F2E0E0;
  --palette-f97316: #f97316;
  --palette-facc15: #facc15;
  --palette-fafbfc: #fafbfc;
  --palette-fff3b4: #FFF3B4;
  --palette-rgb-107-114-128: rgb(107 114 128);
  --palette-rgb-120-53-15: rgb(120 53 15);
  --palette-rgb-127-29-29: rgb(127 29 29);
  --palette-rgb-147-197-253: rgb(147 197 253);
  --palette-rgb-154-52-18: rgb(154 52 18);
  --palette-rgb-185-28-28: rgb(185 28 28);
  --palette-rgb-187-247-208: rgb(187 247 208);
  --palette-rgb-191-219-254: rgb(191 219 254);
  --palette-rgb-22-101-52: rgb(22 101 52);
  --palette-rgb-22-163-74: rgb(22 163 74);
  --palette-rgb-220-38-38: rgb(220 38 38);
  --palette-rgb-233-213-255: rgb(233 213 255);
  --palette-rgb-254-202-202: rgb(254 202 202);
  --palette-rgb-254-215-170: rgb(254 215 170);
  --palette-rgb-254-243-199: rgb(254 243 199);
  --palette-rgb-29-78-216: rgb(29 78 216);
  --palette-rgb-30-58-138: rgb(30 58 138);
  --palette-rgb-37-99-235: rgb(37 99 235);
  --palette-rgb-88-28-135: rgb(88 28 135);
  --palette-rgb-96-165-250: rgb(96 165 250);
  --palette-rgba-0-0-0-0-05: rgba(0, 0, 0, 0.05);
  --palette-rgba-0-0-0-0-1: rgba(0, 0, 0, 0.1);
  --palette-rgba-0-0-0-0-15: rgba(0, 0, 0, 0.15);
  --palette-rgba-0-0-0-0-3: rgba(0, 0, 0, 0.3);
  --palette-rgba-0-0-0-0-4: rgba(0, 0, 0, 0.4);
  --palette-rgba-107-114-128-0-99: rgba(107, 114, 128, 0.99);
  --palette-rgba-168-85-247-0-6: rgba(168, 85, 247, 0.6);
  --palette-rgba-239-68-68-0-1: rgba(239, 68, 68, 0.1);
  --palette-rgba-30-58-138-0-3: rgba(30, 58, 138, 0.3);
}

:root { --portal-separator: var(--brand-muted, #94a3b8); }

/* Foregrounds on branded action surfaces are computed from the same accent. */
html:root:not(.dark) :is(button, a, input):is(.bg-action-600,.bg-highlight-600),
html:root:not(.dark) :is(button, a, input):is(.bg-action-500,.bg-highlight-500) { color:var(--brand-on-primary, var(--color-white)); }
html.dark :is(button, a, input):is(.bg-action-600,.bg-highlight-600):not(.bg-danger-600,.bg-success-600),
html.dark :is(button, a, input):is(.bg-action-500,.bg-highlight-500):not(.bg-danger-600,.bg-success-600) { color:var(--brand-dark-on-primary, var(--color-white)); }

:root { --palette-white: white; --palette-black: black; }
html:root:not(.dark) {
  --tone-highlight-50: var(--brand-primary-soft, var(--color-indigo-50));
  --tone-highlight-100: var(--brand-primary-soft, var(--color-indigo-100));
  --tone-highlight-200: var(--brand-primary-soft, var(--color-indigo-200));
  --tone-highlight-300: var(--brand-primary-soft, var(--color-indigo-300));
  --tone-highlight-400: var(--brand-primary, var(--color-indigo-400));
  --tone-highlight-500: var(--brand-primary, var(--color-indigo-500));
  --tone-highlight-600: var(--brand-primary, var(--color-indigo-600));
  --tone-highlight-700: var(--brand-primary, var(--color-indigo-700));
  --tone-highlight-800: var(--brand-primary, var(--color-indigo-800));
  --tone-highlight-900: var(--brand-primary, var(--color-indigo-900));
  --tone-highlight-950: var(--brand-primary, var(--color-indigo-950));
}
html.dark {
  --tone-highlight-400: var(--brand-dark-accent, var(--color-indigo-400));
  --tone-highlight-500: var(--brand-dark-accent, var(--color-indigo-500));
  --tone-highlight-600: var(--brand-dark-accent, var(--color-indigo-600));
  --tone-highlight-700: var(--brand-dark-accent, var(--color-indigo-700));
  --tone-highlight-800: var(--brand-dark-accent, var(--color-indigo-800));
}

/* Opted-in portal dark values; absent branding preserves incumbent defaults. */
html.dark {
  --portal-start-muted: var(--brand-portal-dark-muted, #555);
  --portal-hover-bg: var(--brand-portal-dark-bg, #f5f5f5);
  --portal-bg: var(--brand-portal-dark-bg, #fafafa);
  --portal-surface: var(--brand-portal-dark-surface, #fff);
  --portal-surface-card: var(--brand-portal-dark-surface-card, #fff);
  --portal-text: var(--brand-portal-dark-text, #222);
  --portal-muted: var(--brand-portal-dark-muted, #666);
  --portal-product-border: var(--brand-portal-dark-muted, #777);
  --portal-separator: var(--brand-portal-dark-separator, #94a3b8);
  --portal-primary: var(--brand-portal-dark-primary, #333);
  --portal-accent: var(--brand-portal-dark-accent, #666);
  --portal-border: var(--brand-portal-dark-border, #e5e7eb);
  --portal-on-primary: var(--brand-portal-dark-on-primary, #fff);
}

/* Keep unbranded utility values; branding strengthens borders independently of hover fills. */
html:root:not(.dark) .border-action-200 { border-color:var(--brand-primary, var(--tone-action-200)); }
html:root:not(.dark) .border-action-300 { border-color:var(--brand-primary, var(--tone-action-300)); }
html.dark :is(button, a, input):is(.bg-action-500,.bg-action-600,.bg-highlight-500,.bg-highlight-600):focus-visible { outline-color:var(--brand-dark-accent, currentColor); }