/* ============================================================
   MOTION-SITE Design System — Colors & Typography
   Source: MOTIONSITE_UI_SKILL.md + UI_Migration_Guide v2 (March 2026)
   ============================================================ */

@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 800;
  font-style: normal;
  src: url('fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-weight: 700;
  font-style: normal;
  src: url('fonts/BarlowCondensed-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/Barlow-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Barlow';
  font-weight: 500;
  font-style: normal;
  src: url('fonts/Barlow-Medium.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  src: url('fonts/JetBrainsMono-Regular.ttf') format('truetype');
}

/* ──────────────────────────────────────────────────────────
   FONT FAMILIES
   ────────────────────────────────────────────────────────── */
:root {
  --font-display:    'Barlow Condensed', sans-serif; /* ExtraBold 800 + Bold 700 */
  --font-body:       'Barlow', sans-serif;            /* Regular 400 + Medium 500 */
  --font-mono:       'JetBrains Mono', monospace;     /* Regular 400 */
}

/* ──────────────────────────────────────────────────────────
   BRAND COLORS
   ────────────────────────────────────────────────────────── */
:root {
  --color-brand-orange:        #FF3D00;
  --color-brand-orange-hover:  #E53500;
  --color-brand-orange-mute:   #FFE8E0;  /* selected row bg */
  --color-brand-orange-tint:   #FFF8F6;  /* selected card bg */
  --color-brand-orange-glow:   rgba(255, 61, 0, 0.25); /* button shadow */
}

/* ──────────────────────────────────────────────────────────
   SURFACE / BACKGROUND COLORS
   ────────────────────────────────────────────────────────── */
:root {
  --color-surface-white:   #FFFFFF;  /* main body, lists, cards */
  --color-surface-panel:   #F3F3F3;  /* toolbars, tab strips, bottom bar */
  --color-surface-bg:      #EBECEC;  /* chrome bar, brand header, hover state */
  --color-surface-active:  #FFE8E0;  /* selected row / card */
  --color-surface-infobar: #FFF4F0;  /* info/warning banner bg */
  --color-dark:            #1F1F1F;  /* secondary button bg, dark pill active */
}

/* ──────────────────────────────────────────────────────────
   TEXT COLORS
   ────────────────────────────────────────────────────────── */
:root {
  --color-text-primary:    #1A1A1A;  /* primary content */
  --color-text-secondary:  #5B5B5B;  /* secondary info, descriptions */
  --color-text-muted:      #9A9A9A;  /* column headers, disabled, hints */
  --color-text-on-orange:  #FFFFFF;  /* text on orange-filled elements */
  --color-text-info-bar:   #CC5500;  /* info banner text, modified badge */
}

/* ──────────────────────────────────────────────────────────
   BORDER COLORS
   ────────────────────────────────────────────────────────── */
:root {
  --color-border-subtle:   #E2E2E2;  /* row separators, subtle dividers */
  --color-border-medium:   #CBCBCB;  /* panel borders, input outlines */
  --color-border-strong:   #AAAAAA;  /* header vertical divider */
  --color-border-infobar:  #FFCDB8;  /* info banner border */
}

/* ──────────────────────────────────────────────────────────
   SEMANTIC / STATUS COLORS
   ────────────────────────────────────────────────────────── */
:root {
  /* Success */
  --color-success:         #2EAA5E;
  --color-success-bg:      #E8F5EC;
  --color-success-alt:     #1E8A4C;

  /* Warning / Amber */
  --color-warning:         #E08A00;
  --color-warning-bg:      #FFF3CD;

  /* Danger / Red */
  --color-danger:          #D13438;
  --color-danger-bg:       #FDECEA;
  --color-danger-alt:      #C0392B;

  /* Info / Blue */
  --color-info:            #2A7FD4;
  --color-info-bg:         #EFF6FF;
  --color-info-border:     #B3D1F8;

  /* Modified / Orange-brown */
  --color-modified:        #CC5500;
}

/* ──────────────────────────────────────────────────────────
   SPACING & SIZING TOKENS
   ────────────────────────────────────────────────────────── */
:root {
  --size-chrome-bar:       32px;
  --size-brand-header:     68px;
  --size-dialog-header:    52px;
  --size-toolbar:          46px;
  --size-action-bar:       52px;
  --size-btn-primary:      32px;
  --size-btn-secondary:    26px;
  --size-btn-pill:         22px;
  --size-input:            28px;
  --size-list-row:         40px;
  --size-datagrid-row:     42px;
  --size-logo-main:        34px;
  --size-logo-dialog:      28px;
  --size-progress-track:   8px;

  --radius-window:         6px;
  --radius-card:           6px;
  --radius-button:         4px;
  --radius-input:          4px;
  --radius-badge:          3px;
  --radius-badge-pill:     10px;
  --radius-toggle:         9px;

  --shadow-window: 0 4px 20px rgba(0,0,0,0.25);
  --shadow-btn-primary: 0 2px 8px rgba(255,61,0,0.35);
}

/* ──────────────────────────────────────────────────────────
   SEMANTIC TYPE ROLES
   ────────────────────────────────────────────────────────── */

/* Tool / brand name in header */
.ms-tool-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Brand wordmark "MOTION-SITE" */
.ms-brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--color-text-primary);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Brand subtitle "REVIT ADD-IN SUITE" */
.ms-brand-sub {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 8.5px;
  color: var(--color-brand-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Dialog title */
.ms-dialog-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-text-primary);
  text-transform: uppercase;
}

/* Section / column header labels */
.ms-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body text */
.ms-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--color-text-primary);
}

/* DataGrid primary cell */
.ms-cell {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-primary);
}

/* Mono: IDs, counts, status, progress */
.ms-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 11px;
  color: var(--color-text-primary);
}

/* Button label */
.ms-btn-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Badge text */
.ms-badge {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-badge);
  display: inline-flex;
  align-items: center;
}

/* ──────────────────────────────────────────────────────────
   COMPONENT PRIMITIVES
   ────────────────────────────────────────────────────────── */

/* Primary button */
.ms-btn-primary {
  height: var(--size-btn-primary);
  padding: 0 16px;
  background: var(--color-brand-orange);
  color: var(--color-text-on-orange);
  border: none;
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: var(--shadow-btn-primary);
}
.ms-btn-primary:hover { background: var(--color-brand-orange-hover); }

/* Secondary button */
.ms-btn-secondary {
  height: var(--size-btn-primary);
  padding: 0 14px;
  background: var(--color-surface-white);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ms-btn-secondary:hover { background: var(--color-surface-bg); }

/* Ghost button */
.ms-btn-ghost {
  height: var(--size-btn-primary);
  padding: 0 14px;
  background: transparent;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ms-btn-ghost:hover { background: var(--color-surface-bg); }

/* Danger button */
.ms-btn-danger {
  height: var(--size-btn-primary);
  padding: 0 14px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-button);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.ms-btn-danger:hover { background: #f8d0d0; }

/* Input field */
.ms-input {
  height: var(--size-input);
  padding: 0 10px;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-medium);
  border-radius: var(--radius-input);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text-primary);
  outline: none;
}
.ms-input:focus { border-color: var(--color-brand-orange); }

/* Badge variants */
.ms-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.ms-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.ms-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.ms-badge-info    { background: var(--color-info-bg);    color: var(--color-info); border: 1px solid var(--color-info-border); }
.ms-badge-muted   { background: var(--color-surface-panel); color: var(--color-text-muted); }