/* Golden Square — brand layer (Design System / UI Kit, Rebrand 2026 / A).
   Loaded LAST on every page. It maps each page's existing CSS variables
   (--page, --surface, --ink, --gold…) to the official brand tokens and
   restyles the few hard-coded colours, so page logic stays untouched.
   Brand hex lives here only. */

@font-face { font-family: "Outfit"; src: url("/fonts/Outfit-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("/fonts/IBMPlexSansArabic-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- tokens: light ---------- */
:root, html[data-theme=light], :root[data-theme=light] {
  --gs-gold: #F0CB73; --gs-gold-deep: #B08030; --gs-black: #1A1614; --gs-ivory: #FAF7F0; --gs-umber: #75451B;
  --gs-surface: #FFFFFF; --gs-surface-raised: #FAF7F0; --gs-surface-sunken: #F4EFE4;
  --gs-text: #1A1614; --gs-text-2: #5E554C; --gs-text-3: #736A60; --gs-gold-text: #8A6424; --gs-gold-tint: #FBF1D9;
  --gs-line: #E6DFD2; --gs-line-strong: #8F857A; --gs-focus: #8A6424; --gs-on-primary: #1A1614; --gs-primary-hover: #E2B85E;
  --gs-success: #276A43; --gs-success-tint: #E6F2EA; --gs-danger: #B3261E; --gs-danger-tint: #FBE9E7; --gs-warning: #8A5A00; --gs-warning-tint: #FFF1D6;
  --gs-shadow-card: 0 1px 2px rgba(26,22,20,.08), 0 8px 24px rgba(26,22,20,.08);
  --font-latin: "Outfit", system-ui, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Outfit", Tahoma, system-ui, sans-serif;
  --crm-font: var(--font-arabic);
}
/* ---------- tokens: dark (user's choice, or a dark section) ---------- */
html[data-theme=dark], :root[data-theme=dark], [data-theme=dark] {
  --gs-surface: #1A1614; --gs-surface-raised: #241F1B; --gs-surface-sunken: #120F0D;
  --gs-text: #FFFFFF; --gs-text-2: #B8AEA2; --gs-text-3: #9C9186; --gs-gold-text: #F0CB73; --gs-gold-tint: #3A2F1C;
  --gs-line: #3A332D; --gs-focus: #F0CB73; --gs-primary-hover: #F5D68F;
  --gs-success: #6FCF97; --gs-success-tint: #16291E; --gs-danger: #F2A09A; --gs-danger-tint: #3A1715; --gs-warning: #F2C46B; --gs-warning-tint: #3A2C12;
  --gs-shadow-card: none;
}
/* ---------- map each page's variables to the tokens ---------- */
:root, html[data-theme=light], :root[data-theme=light], html[data-theme=dark], :root[data-theme=dark], [data-theme=dark] {
  --page: var(--gs-surface-sunken);
  --paper: var(--gs-surface-sunken);
  --surface: var(--gs-surface);
  --surface2: var(--gs-surface-raised);
  --panel: var(--gs-surface-sunken);
  --line: var(--gs-line);
  --ink: var(--gs-text);
  --muted: var(--gs-text-2);
  --gold: var(--gs-gold-text);
  --accent: var(--gs-gold-text);
  --incoming: var(--gs-surface);
  --outgoing: var(--gs-gold-tint);
}

body { font-family: var(--font-arabic) !important; background: var(--page); color: var(--ink); }
[dir=ltr], .eyebrow, .brand [dir=ltr], footer [dir=ltr] { font-family: var(--font-latin); }
:focus-visible { outline: 2px solid var(--gs-focus) !important; outline-offset: 2px; }
a { color: var(--gs-gold-text); }

/* ---------- shape: square cards, 2px controls, pill badges ---------- */
.stats>div, .stats>button, .clients-panel, .records-panel, .record-card, .auto-sync, .daily-workspace, .daily-metrics button,
.daily-lane, .daily-card, .pipeline-workspace, .pipeline-stage-strip button, .pipeline-card, .timeline-content, .directory-filters,
.table-scroll, #client360, .workspace-info, .customer-card, .report-grid article, .report-section, .settings-card, .pipeline-column,
.today-detail section, .today-detail details, #aiProposals:not(:empty), .login-card, .suggestion-card, .crm-preview, .ai-reply-draft,
.card, .ops-health { border-radius: 0 !important; }
.edit-dialog, .crm-dialog { border-radius: 0 !important; box-shadow: 0 16px 48px rgba(26,22,20,.24); }
button, .quiet, .primary, .button, input, select, textarea, .search, .filters button, .record-tabs button, .client-row,
.reply-bar textarea, .reply-bar button, .attach-toggle, .media-load { border-radius: 2px !important; }
.tag, .privacy, .badge, .pipeline-badges span, .daily-meta span, .daily-meta b, .stage-badge, .priority, .quick-count { border-radius: 999px !important; }
.bubble { border-radius: 4px !important; }
.record-card, .customer-card, .stats>div, .stats>button, .daily-workspace, .pipeline-workspace, .clients-panel, .records-panel { box-shadow: var(--gs-shadow-card); }
input, select, textarea { border-color: var(--gs-line-strong) !important; }
input::placeholder, textarea::placeholder { color: var(--gs-text-3); }

/* ---------- actions: gold primary, outline secondary ---------- */
.primary, button.primary, .button.primary, .reply-bar button {
  background: var(--gs-gold) !important; color: var(--gs-on-primary) !important; border: 0 !important; font-weight: 600;
}
.primary:hover, .button.primary:hover { background: var(--gs-primary-hover) !important; filter: none !important; }
.quiet { color: var(--muted); border-color: var(--gs-line) !important; }
.quiet:hover { color: var(--ink); background: var(--gs-surface-raised); }
.button.secondary { background: var(--gs-surface) !important; color: var(--gs-text) !important; border: 1.5px solid var(--gs-line-strong) !important; }

/* ---------- header / brand (dark section with the official lockup) ---------- */
.topbar { background: var(--gs-black) !important; border-bottom-color: #3A332D !important; color: #FFFFFF; }
.topbar .eyebrow { color: #F0CB73; font-family: var(--font-latin); letter-spacing: .16em; }
.topbar h1 { color: #FFFFFF; }
.topbar .quiet { color: #B8AEA2; border-color: #3A332D !important; background: transparent; }
.topbar .quiet:hover { color: #FFFFFF; background: #241F1B; }
.topbar .privacy { background: #3A2F1C; color: #F0CB73; }
.gs-logo { display: block; height: 48px; width: auto; flex-shrink: 0; }
.brand-mark.gs-has-logo, .mark.gs-has-logo { display: none !important; }
/* two lockups: dark text on light grounds, reversed on dark grounds (topbar, dark theme) */
.gs-logo-on-dark { display: none; }
.topbar .gs-logo-on-light, html[data-theme=dark] .gs-logo-on-light, html:not([data-theme]) .gs-logo-on-light { display: none; }
.topbar .gs-logo-on-dark, html[data-theme=dark] .gs-logo-on-dark, html:not([data-theme]) .gs-logo-on-dark { display: block; }

/* ---------- selection & status colours (were green/blue) ---------- */
.client-row.selected, .record-tabs .selected, .filters .selected, .thread-tabs .selected,
:root[data-theme=light] .client-row.selected, :root[data-theme=light] .record-tabs .selected {
  background: var(--gs-gold-tint) !important; color: var(--gs-gold-text) !important;
}
.selected-client { border-right-color: var(--gs-gold-deep) !important; }
.notice, .match-reasons, :root[data-theme=light] .notice, :root[data-theme=light] .match-reasons { color: var(--gs-success) !important; }
.warn, .idle-warn, :root[data-theme=light] .warn { color: var(--gs-warning) !important; }
.edit-dialog [role=alert], .daily-meta .overdue { color: var(--gs-danger) !important; }
.pipeline-card.hot { border-inline-start-color: var(--gs-danger) !important; }
.pipeline-card.warm { border-inline-start-color: var(--gs-warning) !important; }
.pipeline-card.cold { border-inline-start-color: var(--gs-line-strong) !important; }
.pipeline-badges .hot { color: var(--gs-danger) !important; }
.pipeline-badges .warm { color: var(--gs-warning) !important; }
.pipeline-badges .cold { color: var(--gs-text-2) !important; }
.pipeline-card .human-tag { color: var(--gs-gold-text) !important; border-color: var(--gs-gold-deep) !important; }
#aiProposals blockquote, #recordAISource blockquote { border-inline-start-color: var(--gs-gold-deep) !important; }

/* CRM workspace (Customers): navigation was navy, selection blue */
.crm-nav { background: var(--gs-black) !important; color: #FFFFFF !important; border-color: #3A332D !important; }
.crm-nav button { color: #B8AEA2; }
.crm-nav button:hover { background: #241F1B !important; color: #FFFFFF !important; }
.crm-nav button[aria-current=page], .crm-nav button[aria-current=page]:hover { background: #3A2F1C !important; color: #F0CB73 !important; border-color: #3A2F1C !important; box-shadow: inset -3px 0 #F0CB73 !important; }
.workspace-links { border-top-color: #3A332D !important; }
.quick-views [data-quick=today] { background: var(--gs-gold-tint) !important; color: var(--gs-gold-text) !important; }
.quick-views [data-quick=today] .quick-count { background: var(--gs-gold) !important; color: var(--gs-on-primary) !important; }
.customers-table tr.is-selected, :root[data-theme=dark] .customers-table tr.is-selected { background: var(--gs-gold-tint) !important; box-shadow: inset -3px 0 var(--gs-gold-deep) !important; }
.priority.cold { background: var(--gs-surface-sunken) !important; color: var(--gs-text-2) !important; }
.stage-badge.qualified, .stage-badge.presented { background: var(--gs-gold-tint) !important; color: var(--gs-gold-text) !important; }
.stage-badge.visit { background: var(--gs-warning-tint) !important; color: var(--gs-warning) !important; }
.stage-badge.contacted { background: var(--gs-surface-sunken) !important; color: var(--gs-text-2) !important; }
.detail-identity .customer-avatar { background: var(--gs-umber) !important; color: #FFFFFF !important; }
.client-actions a[href^='tel:'] { background: var(--gs-surface) !important; border-color: var(--gs-line-strong) !important; color: var(--gs-text) !important; }
.next-action-section, :root[data-theme=dark] .next-action-section { background: var(--gs-gold-tint) !important; border-color: var(--gs-gold-deep) !important; }
.next-action-section h3, :root[data-theme=dark] .next-action-section h3 { color: var(--gs-gold-text) !important; }
.customer-card .tag { background: var(--gs-surface-sunken) !important; color: var(--gs-text-2) !important; }
.requirement-cell .intent-mini { background: var(--gs-surface-sunken) !important; color: var(--gs-text-2) !important; }
.cloud-wa { background: var(--gs-surface-sunken) !important; border-color: var(--gs-line) !important; color: var(--gs-gold-text) !important; }
#crmApp[data-view=client] #client360 { box-shadow: -10px 0 35px rgba(26,22,20,.19) !important; }

/* ---------- operations home ---------- */
.shell > header { border-bottom-color: var(--gs-line); }
.card { background: var(--gs-surface) !important; box-shadow: var(--gs-shadow-card); }
.card.personal { background: var(--gs-black) !important; color: #FFFFFF !important; border-color: var(--gs-black) !important; box-shadow: none; }
.card.personal .description, .card.personal .status p, .card.personal .destination { color: #B8AEA2 !important; }
.card.personal .status { border-color: #3A332D !important; }
.card.personal .badge { border-color: #8F857A !important; color: #F0CB73 !important; }
.card .badge { border-color: var(--gs-line-strong); color: var(--gs-text-2); }
.number { font-family: var(--font-latin) !important; color: var(--gs-gold-text); opacity: 1 !important; }
.card.personal .number { color: #F0CB73; }
.intro .eyebrow { color: var(--gs-gold-text) !important; }
.intro h1 { letter-spacing: 0 !important; }
.privacy-note > span { color: var(--gs-gold-deep) !important; }
a:focus-visible { outline-color: var(--gs-focus) !important; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }