@import url('./tokens.css');
@font-face{font-family:Tajawal;src:url('./Tajawal-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Tajawal;src:url('./Tajawal-Bold.ttf') format('truetype');font-weight:700;font-display:swap}

/* Interface only. Never target canvas, SVG artwork, fabric or vehicle materials. */
:root:root {
  --accent:var(--nas-brand);--accent-foreground:#fff;--background:var(--nas-canvas);
  --foreground:var(--nas-text);--surface:var(--nas-surface);--surface-foreground:var(--nas-text);
  --surface-secondary:var(--nas-subtle);--surface-secondary-foreground:var(--nas-text);
  --surface-tertiary:var(--nas-canvas);--surface-tertiary-foreground:var(--nas-text);
  --overlay:var(--nas-surface);--overlay-foreground:var(--nas-text);--focus:var(--nas-assistant);
  --field-background:var(--nas-surface);--field-foreground:var(--nas-text);--field-border:var(--nas-strong-border);
  --field-placeholder:var(--nas-muted);--font-sans:var(--nas-font);--radius:8px;
  --ink:var(--nas-text);--muted:var(--nas-muted);--line:var(--nas-border);--border:var(--nas-border);
  --green:var(--nas-brand);--olive:var(--nas-brand);--paper:var(--nas-subtle);--burgundy:var(--nas-brand);
  --fashion-background:var(--nas-canvas);--fashion-foreground:var(--nas-text);
  --default:var(--nas-subtle);--default-foreground:var(--nas-text);--separator:var(--nas-border);
  --surface-shadow:none;--overlay-shadow:0 8px 24px #25282c14;--cursor-interactive:pointer;
  color:var(--nas-text);background:var(--nas-canvas);font-family:var(--nas-font);font-size:14px;
}
html body{font-family:var(--nas-font);color:var(--nas-text);background:var(--nas-canvas);line-height:1.65}
body :where(button,input,select,textarea){font-family:var(--nas-font)}
body :where(button,a,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--nas-assistant);outline-offset:3px}
body :where(button,a){transition:none}
body :where(input,select,textarea)::placeholder{color:var(--nas-muted);opacity:1}

/* Original vector artwork, with clear space and no decorative containers. */
body .nasnaa-lockup{display:block!important;width:180px!important;height:auto!important;max-width:none!important;background:transparent!important;border:0!important;border-radius:0!important;flex-shrink:0;padding:8px!important;box-sizing:content-box}
body :is(.brand,.e-brand,.v-brand):has(.nasnaa-lockup){gap:0;padding:0;flex-shrink:0}
body .diera-identity{display:inline-flex;align-items:center;gap:8px;color:var(--nas-assistant);font-family:var(--nas-font);font-weight:700}
body .diera-identity img{width:28px;height:28px;object-fit:contain;flex-shrink:0}

/* Quiet shared chrome; the work surface keeps its own engineering contrast. */
body :is(.studio-shell,.visual-app,.vehicles-app,.logistics-app,.fashion-app,.integrated-app){color:var(--nas-text);background:var(--nas-canvas)}
body :is(.studio-header,.app-header,.e-header,.v-header,.main-header,.topbar,.studio-ribbon,.editor-toolbar,.v-ribbon,.v-toolbar,.panel-controls,.workflow){background:var(--nas-surface);color:var(--nas-text);border-color:var(--nas-border);box-shadow:none}
body :is(.sidebar,.left-panel,.right-panel,.v-library,.v-properties){background:var(--nas-subtle);color:var(--nas-text);border-color:var(--nas-border)}
body :is(.panel,.card,.metric,.review-card,.equipment-card,.zone-card){border-color:var(--nas-border);box-shadow:none;border-radius:10px}
body :is(.primary,.button--primary,.e-button.primary,.blue,.orange){background:var(--nas-brand);border-color:var(--nas-brand);color:#fff}
body :is(.primary,.button--primary,.e-button.primary,.blue,.orange):hover:not(:disabled){background:var(--nas-brand-hover);border-color:var(--nas-brand-hover);color:#fff}
body :is(.secondary,.button--secondary,.button--tertiary){background:var(--nas-surface);border-color:var(--nas-border);color:var(--nas-text)}
body :is(.sidebar nav button[aria-current],.workflow button.active,.ribbon-group button.active,.app-header nav button.active){background:var(--nas-brand-soft);color:var(--nas-brand);border-color:var(--nas-brand)}
body :is(.rail){background:var(--nas-subtle);border-inline-end:1px solid var(--nas-border)}
body .rail button{color:var(--nas-muted)}body .rail button.active{color:var(--nas-brand);background:var(--nas-brand-soft)}
body :is(.v-assistant,.e-assistant-card,.assistant-card){background:var(--nas-assistant-soft);border-color:#cce2e4;color:var(--nas-text);border-radius:8px}
body :is(.v-assistant,.e-assistant-card,.assistant-card) :is(.primary,.button--primary,.e-button.primary){background:var(--nas-assistant);border-color:var(--nas-assistant);color:white}

/* Operational UI: 12px is the floor for secondary copy, 14px for work controls. */
.logistics-app :is(.sidebar,.topbar,.main-shell,.modal){color:var(--nas-text)}
.logistics-app :is(.workspace,.driver-card,.demo-bar,.info-strip,.equipment-banner,.form-note,.phone){background:var(--nas-subtle);border-color:var(--nas-border);color:var(--nas-text)}
.logistics-app :is(.page-heading p,.footnote,.soft-note,.equipment-meta,.equipment-content p,dt,.tracking-row small,.driver-profile p,.modal-intro,.workspace small,.nav-label){color:var(--nas-muted);font-size:12px}
.logistics-app :is(nav button,.filters select,input,select,textarea,.secondary,.primary,.tracking-row strong){font-size:14px}
.logistics-app :is(.new-label,.status,.equipment-id,.metric small,.breadcrumb,.demo-bar,.map-footer,.google-map-help,.page-footer,.equipment-meta,.phone-job p,.phone-job strong){font-size:12px}
.logistics-app :is(.equipment-picture,.vehicle-icon,.large-avatar){background:var(--nas-subtle);color:var(--nas-muted)}
.logistics-app :is(th,td){font-size:13px;color:var(--nas-text)}
.logistics-app .chart-row i{background:var(--nas-assistant)}
.logistics-app .metric strong{font-size:30px;font-variant-numeric:tabular-nums;color:var(--nas-text)}
.logistics-app .equipment-content button{color:var(--nas-brand);background:var(--nas-surface);border-color:var(--nas-border)}
.logistics-app .driver-card h3{font-size:14px}.logistics-app .driver-card p{font-size:12px;color:var(--nas-muted)}
.logistics-app .modal,.logistics-app .modal-head{background:var(--nas-surface);color:var(--nas-text)}
@media(max-width:720px){body .nasnaa-lockup{content:url('./symbol.svg');width:32px!important;padding:8px!important}.logistics-app .sidebar .nasnaa-lockup{content:normal;width:180px!important}.logistics-app .equipment-meta{flex-wrap:wrap}.logistics-app .topbar{gap:8px}}
@media(prefers-reduced-motion:reduce){body :where(button,a){transition:none;animation:none;scroll-behavior:auto}}
@media(forced-colors:active){body :is(.primary,.button--primary,.e-button.primary){border:1px solid ButtonText}.nasnaa-lockup{forced-color-adjust:none}}

/* Readable controls and subdued catalog chrome for prolonged work. */
body :is(.studio-ribbon,.editor-toolbar,.v-toolbar,.v-ribbon,.e-header,.e-rail,.workflow) button{font-size:12px;min-height:34px}
body :is(.app-header,.v-header,.e-header,.main-header) nav button{font-size:13px}
.logistics-app :is(small,.metric>div,.attention p,.text-btn,.user,.driver-steps p){font-size:12px;color:var(--nas-muted)}
.logistics-app :is(.nav-label,.page-heading .eyebrow,.page-footer){color:var(--nas-muted)}
body .content>.intro+section>.hero{background:var(--nas-subtle);border-color:var(--nas-border)}
body .assistant .ai-head{color:var(--nas-assistant)}
body .assistant .ai-head img{width:32px;height:32px;object-fit:contain}
body .assistant{background:var(--nas-assistant-soft);border-color:#cce2e4;box-shadow:none}
body .assistant #send{background:var(--nas-assistant);color:white}

/* Preserve readable inherited text when migrating formerly dark headers. */
body .main-header .project-heading strong{color:var(--nas-text)}
body .main-header .project-heading span{color:var(--nas-muted);font-size:12px}
body .main-header .revision{background:var(--nas-subtle);color:var(--nas-muted);border-color:var(--nas-border)}
body :is(.studio-tree,.studio-inspector,.draw-toolbar){background:var(--nas-subtle);border-color:var(--nas-border)}
body :is(.studio-tree,.studio-inspector) :is(label,p,small){color:var(--nas-muted)}
body :is(.studio-tree,.studio-inspector) :is(input,select,button){font-size:12px}
body :is(.mode-tabs,.inspector-tabs,.panel-controls,.toolbar-end,.chips,.topbar nav,.camera-pills) :is(button.active,button.current,button[aria-selected=true]){background:var(--nas-brand-soft);color:var(--nas-brand);border-color:var(--nas-brand)}
body :is(.e-button.active,.e-rail .active,.tool-btn.active){background:var(--nas-brand-soft);color:var(--nas-brand);border-color:var(--nas-brand)}
body .topbar nav button{color:var(--nas-muted)}