:root {
    /* ── Brand (source of truth) ───────────────────────── */
    /* --gt-color-primary: #2B004D; */
    --gt-color-primary: #4015AF;
    --gt-color-primary-hover: #1F0038;
    --gt-color-primary-alpha: rgba(43, 0, 77, 0.05);
    --gt-color-accent: #4015AF;
    --gt-color-black: #0D0D12;

    /* ── Neutrals ──────────────────────────────────────── */
    --gt-color-white: #ffffff;
    --gt-color-surface: #ffffff;
    --gt-color-page: #F8F9FC;
    --gt-color-border: #E5E7EB;
    --gt-color-text: #0D0D12;
    --gt-color-muted: #6B7280;
    --gt-color-muted-light: #9CA3AF;

    --gt-gray-50: #F8F9FC;
    --gt-gray-100: #f0f1f4;
    --gt-gray-200: #e5e7eb;
    --gt-gray-300: #ddd;
    --gt-gray-400: #aaa;
    --gt-gray-500: #888;
    --gt-gray-600: #555;
    --gt-gray-700: #444;
    --gt-gray-800: #333;
    --gt-gray-900: #222;

    /* ── Semantic ────────────────────────────────────── */
    --gt-color-success: #28a745;
    --gt-color-danger: #dc3545;
    --gt-color-warning: #d97706;
    --gt-color-info: var(--gt-color-accent);

    /* ── Layout ────────────────────────────────────────── */
    --gt-page-padding: 24px;
    --gt-gap-xs: 4px;
    --gt-gap-sm: 8px;
    --gt-gap-md: 16px;
    --gt-gap-lg: 24px;

    /* ── Cards ─────────────────────────────────────────── */
    --gt-card-bg: var(--gt-color-surface);
    --gt-card-radius: 10px;
    --gt-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    --gt-card-padding: 20px;

    /* ── Typography ────────────────────────────────────── */
    --gt-font-family: "GT Inter", "Inter", "Noto Sans Thai Looped", system-ui, sans-serif;
    --gt-font-family-latin: "Inter", system-ui, sans-serif;
    --gt-font-family-thai: "Noto Sans Thai Looped", "Noto Sans Thai", sans-serif;
    --gt-line-height: 1.4;
    --gt-text-xs: 11px;
    --gt-text-sm: 12px;
    --gt-text-base: 13px;
    --gt-text-md: 14px;
    --gt-text-lg: 15px;
    --gt-text-xl: 1.25rem;
    --gt-text-2xl: 1.5rem;
    --gt-page-title-size: 1.5rem;
    --gt-page-title-weight: 700;
    --gt-stat-value-size: 26px;
    --gt-stat-label-size: 12px;

    /* ── Radius & focus ──────────────────────────────── */
    --gt-radius-sm: 6px;
    --gt-radius-md: 10px;
    --gt-radius-pill: 20px;
    --gt-focus-ring: 0 0 0 2px var(--gt-color-white), 0 0 0 4px var(--gt-color-accent);

    /* ── Buttons ─────────────────────────────────────── */
    --gt-btn-height-sm: 32px;
    --gt-btn-height-md: 40px;
    --gt-btn-height-lg: 44px;

    /* ── Breakpoints (reference) ─────────────────────── */
    --gt-bp-tablet: 768px;
    --gt-bp-phone: 640px;

    /* ── Sidebar shell (eyewear_home) ────────────────── */
    --gt-sidebar-width: 200px;
    --gt-sidebar-width-collapsed: 64px;
    --gt-sidebar-bg: var(--gt-color-page);
    --gt-sidebar-fg: var(--gt-gray-600);
    --gt-sidebar-logo-fg: var(--gt-color-black);
    --gt-sidebar-user-fg: var(--gt-color-text);
    --gt-sidebar-border: var(--gt-color-border);
    --gt-sidebar-muted-fg: var(--gt-color-muted-light);
    --gt-sidebar-sub-fg: var(--gt-color-muted);
    --gt-sidebar-flyout-fg: var(--gt-color-text);
    --gt-sidebar-dropdown-fg: var(--gt-color-text);
    --gt-sidebar-toggle-fg: var(--gt-color-muted);
    --gt-sidebar-hover-bg: #EEE9FF;
    --gt-sidebar-active-bg: var(--gt-color-accent);
    --gt-sidebar-active-fg: var(--gt-color-white);
    --gt-sidebar-sub-hover-bg: var(--gt-color-primary-alpha);
    --gt-sidebar-sub-active-fg: #EEE9FF;
    --gt-sidebar-sub-active-bg: var(--gt-color-primary);
    --gt-sidebar-sub-panel-bg: transparent;
    --gt-sidebar-user-hover-bg: #E0D8FF;
    --gt-sidebar-header-hover-bg: var(--gt-gray-100);
    --gt-sidebar-avatar-bg: #EEE9FF;
    --gt-sidebar-tooltip-bg: var(--gt-color-primary);
    --gt-sidebar-tooltip-fg: var(--gt-color-white);
    --gt-sidebar-flyout-bg: var(--gt-color-white);
    --gt-sidebar-dropdown-bg: var(--gt-color-white);
    --gt-sidebar-flyout-shadow: 0 4px 16px rgba(13, 13, 18, 0.12);
    --gt-sidebar-dropdown-shadow: 0 4px 16px rgba(13, 13, 18, 0.12);
    --gt-sidebar-z: 1055;
    --gt-sidebar-flyout-z: 200;
    --gt-sidebar-tooltip-z: 9999;
    --gt-sidebar-transition: 0.2s ease;

    /* ── Slide panel (GtSlidePanel) ──────────────────── */
    /* Stack (low → high): sidebar 1055 → slide panel 1056/1057 → notifications/toasts 1100 → modals 1100 → blocking 1200 */
    --gt-slide-panel-width: 400px;
    --gt-slide-panel-width-narrow: 300px;
    --gt-slide-panel-width-wide: 600px;
    --gt-slide-panel-overlay-z: 1056; /* above --gt-sidebar-z */
    --gt-slide-panel-z: 1057;

    /* Odoo .o_notification_manager defaults to 1055 — below slide panel without this */
    --gt-notification-z: 1100;

    /* ── Toasts (GtNotification) ─────────────────────── */
    --gt-toast-bg: var(--gt-color-surface);
    --gt-toast-border: var(--gt-color-border);
    --gt-toast-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --gt-toast-radius: 12px;
    --gt-toast-max-width: 360px;
    --gt-toast-gap: 8px;
    --gt-toast-padding-y: 12px;
    --gt-toast-padding-x: 18px;
    --gt-toast-padding-y-compact: 12px;
    --gt-toast-padding-x-compact: 18px;
    --gt-toast-icon-size: 28px;
    --gt-toast-close-size: 28px;
    --gt-toast-success-surface: rgba(40, 167, 69, 0.12);
    --gt-toast-success-border: rgba(40, 167, 69, 0.28);
    --gt-toast-success-bg: rgba(40, 167, 69, 0.08);
    --gt-toast-success-fg: var(--gt-color-success);
    --gt-toast-danger-surface: rgba(220, 53, 69, 0.12);
    --gt-toast-danger-border: rgba(220, 53, 69, 0.28);
    --gt-toast-danger-bg: rgba(220, 53, 69, 0.08);
    --gt-toast-danger-fg: var(--gt-color-danger);
    --gt-toast-warning-surface: rgba(217, 119, 6, 0.12);
    --gt-toast-warning-border: rgba(217, 119, 6, 0.28);
    --gt-toast-warning-bg: rgba(217, 119, 6, 0.08);
    --gt-toast-warning-fg: var(--gt-color-warning);
    --gt-toast-info-surface: rgba(64, 21, 175, 0.08);
    --gt-toast-info-border: rgba(64, 21, 175, 0.22);
    --gt-toast-info-bg: rgba(64, 21, 175, 0.06);
    --gt-toast-info-fg: var(--gt-color-info);
    --gt-toast-transition-duration: 0.28s;
    --gt-toast-transition-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --gt-toast-enter-from-y: -1.25rem;
    --gt-toast-leave-to-y: -1.5rem;

    /* ── Modals / Odoo overlay dialogs ───────────────── */
    /* Odoo .o-overlay-item uses $zindex-modal (1055) — must exceed slide panel. */
    --gt-modal-z: 1100;
    --gt-modal-top-z: 1200; /* app-level blocking overlays (branch picker, etc.) */

    /* ── Compatibility: brand aliases ────────────────── */
    --brand-primary: var(--gt-color-primary);
    --brand-accent: var(--gt-color-accent);
    --brand-primary-hover: var(--gt-color-primary-hover);
    --brand-primary-alpha: var(--gt-color-primary-alpha);
    --brand-dark: var(--gt-color-black);
    --brand-light: var(--gt-color-page);

    /* ── Compatibility: eyewear token aliases ──────────── */
    --ew-white: var(--gt-color-white);
    --ew-gray-50: var(--gt-gray-50);
    --ew-gray-100: var(--gt-gray-100);
    --ew-gray-200: var(--gt-gray-200);
    --ew-gray-300: var(--gt-gray-300);
    --ew-gray-400: var(--gt-gray-400);
    --ew-gray-500: var(--gt-gray-500);
    --ew-gray-600: var(--gt-gray-600);
    --ew-gray-700: var(--gt-gray-700);
    --ew-gray-800: var(--gt-gray-800);
    --ew-gray-900: var(--gt-gray-900);
    --ew-success: var(--gt-color-success);
    --ew-danger: var(--gt-color-danger);
    --ew-warning: var(--gt-color-warning);
    --ew-info: var(--gt-color-info);
    --ew-card-bg: var(--gt-card-bg);
    --ew-card-radius: var(--gt-card-radius);
    --ew-card-shadow: var(--gt-card-shadow);
    --ew-card-padding: var(--gt-card-padding);
    --ew-page-bg: var(--gt-color-page);
    --ew-page-padding: var(--gt-page-padding);
    --ew-gap-sm: var(--gt-gap-sm);
    --ew-gap-md: var(--gt-gap-md);
    --ew-gap-lg: var(--gt-gap-lg);
    --ew-text-xs: var(--gt-text-xs);
    --ew-text-sm: var(--gt-text-sm);
    --ew-text-base: var(--gt-text-base);
    --ew-text-md: var(--gt-text-md);
    --ew-text-lg: var(--gt-text-lg);
    --ew-text-xl: var(--gt-text-xl);
    --ew-text-2xl: var(--gt-text-2xl);
    --ew-page-title-size: var(--gt-page-title-size);
    --ew-page-title-weight: var(--gt-page-title-weight);
    --ew-page-title-color: var(--gt-color-text);
    --ew-border-color: var(--gt-color-border);
    --ew-border-radius: var(--gt-radius-sm);
}

/* Backend shell: mixed EN/TH strings inherit GT Inter everywhere custom UI loads. */
.o_web_client {
    font-family: var(--gt-font-family);
    line-height: var(--gt-line-height);
}