/* Squills DS v1 — hand-translated tokens for browser tool.
   Source of truth: ai-company-skills/knowledge/design-system.md §2.
   Resolved values match the published Figma DS file XyEzG7Ym7CuodjLSMv4XIM. */

:root {
  /* Surface */
  --surface-canvas: #FAF6F0;        /* warm white page canvas */
  --surface-default: #FFFFFF;       /* white tactile button + field bg */
  --surface-subtle: #F4EEE5;        /* muted elevated surface for cards */
  --surface-muted: #ECE5DA;         /* quieter neutral */
  --surface-brand: #E85D04;         /* orange brand fill */
  --surface-inverse: #1F1B17;       /* dark surface (rare) */

  /* Text */
  --text-primary: #1F1B17;          /* jet on warm canvas */
  --text-body: #2A2520;
  --text-secondary: #5C544A;
  --text-tertiary: rgba(31,27,23,0.40); /* 26-40% warm */
  --text-inverse: #FFF6E9;          /* ivory label on orange */
  --text-brand: #E85D04;
  --text-link: #E85D04;
  --text-error: #B82323;

  /* Border */
  --border-default: rgba(31,27,23,0.18);
  --border-subtle: rgba(31,27,23,0.08);
  --border-strong: rgba(31,27,23,0.32);
  --border-brand: #E85D04;
  --border-error: #B82323;

  /* Background (status) */
  --bg-error: #FCE9E9;

  /* Radius */
  --radius-none: 0;
  --radius-field: 8px;
  --radius-interactive: 12px;
  --radius-pill: 999px;

  /* Spacing */
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-44: 44px;
  --space-52: 52px;
  --space-80: 80px;

  /* Shadow — Stack/CTA: 6px slab + warm bloom inset */
  --shadow-stack-cta:
    0 6px 0 #C04D03,
    inset 0 1px 0 rgba(255,200,140,0.45);
  --shadow-stack-cta-pressed:
    0 1px 0 #C04D03,
    inset 0 1px 0 rgba(255,200,140,0.30);
  --shadow-stack-neutral:
    0 4px 0 rgba(31,27,23,0.18),
    inset 0 1px 0 rgba(255,255,255,0.6);

  /* Elevation */
  --shadow-elev-md: 0 4px 16px rgba(31,27,23,0.10);
  --shadow-elev-lg: 0 12px 32px rgba(31,27,23,0.18);

  /* Type */
  --font-display: 'Manrope', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;
}

/* Reset / base */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Page shell — centered single column */
.page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-24) var(--space-80);
}

.topbar {
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-subtle);
}
.topbar__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}
.topbar__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.topbar__controls {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

.marker-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
}
.marker-field__label {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-tertiary);
}
.marker-field__input {
  font-family: var(--font-ui);
  font-size: 14px;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  background: var(--surface-default);
  color: var(--text-body);
  width: 160px;
}
.marker-field__input:focus {
  outline: 2px solid var(--surface-brand);
  outline-offset: 1px;
}

.ghost-link {
  background: none;
  border: none;
  padding: 6px 8px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-tertiary);
  cursor: pointer;
}
.ghost-link:hover { color: var(--text-primary); }

.modal[hidden] { display: none; }
.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(31,27,23,0.45);
}
.modal__panel {
  position: relative;
  background: var(--surface-default);
  border-radius: var(--radius-interactive);
  box-shadow: var(--shadow-elev-lg);
  padding: var(--space-32);
  max-width: 480px;
  width: calc(100% - 48px);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--space-12);
}
.modal__body {
  margin: 0 0 var(--space-20);
  font-size: 14px;
  color: var(--text-body);
  line-height: 20px;
}
.modal__input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-field);
  font-family: var(--font-ui);
  font-size: 14px;
  background: var(--surface-default);
  color: var(--text-body);
}
.modal__input:focus { outline: 2px solid var(--surface-brand); outline-offset: 1px; }
.modal__error {
  margin: var(--space-8) 0 0;
  font-size: 12px;
  color: var(--text-error);
}

/* Primary button — used in modal save and main Send-to-Strapi button */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  padding: 14px 24px;
  margin-top: var(--space-20);
  background: var(--surface-brand);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-interactive);
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-stack-cta);
  transition: transform 90ms ease, box-shadow 90ms ease;
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: var(--shadow-stack-cta-pressed);
}
.btn-primary:disabled {
  background: var(--surface-muted);
  color: var(--text-tertiary);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.dropzone {
  margin-top: var(--space-32);
  padding: var(--space-80) var(--space-32);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-interactive);
  background: var(--surface-canvas);
  text-align: center;
  transition: border-color 90ms ease, background 90ms ease;
}
.dropzone--hover {
  border-color: var(--border-brand);
  background: var(--surface-subtle);
}
.dropzone--filled {
  border-style: solid;
  background: var(--surface-default);
}
.dropzone__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  cursor: pointer;
}
.dropzone__icon {
  font-size: 32px;
  color: var(--text-tertiary);
}
.dropzone__primary {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-body);
}
.dropzone__secondary {
  font-family: var(--font-ui);
  font-size: 14px;
  color: var(--text-tertiary);
}

.parse-summary {
  margin-top: var(--space-24);
  padding: var(--space-20) var(--space-24);
  background: var(--surface-subtle);
  border-radius: var(--radius-interactive);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 22px;
  color: var(--text-body);
}
.parse-summary--error {
  background: var(--bg-error);
  color: var(--text-error);
}
.parse-summary ul { margin: var(--space-8) 0 0; padding-left: var(--space-20); }
.parse-summary li { margin-bottom: var(--space-4); }

#send-btn {
  display: block;
  margin: var(--space-32) auto 0;
  min-width: 240px;
}
.send-icon {
  display: inline-block;
  margin-right: var(--space-8);
  font-size: 18px;
}
.send-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: var(--space-8);
  border: 2px solid rgba(255,255,255,0.5);
  border-top-color: var(--text-inverse);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.result-panel {
  margin-top: var(--space-32);
  padding: var(--space-28) var(--space-32);
  background: var(--surface-default);
  border-radius: var(--radius-interactive);
  border: 1px solid var(--border-subtle);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 22px;
  color: var(--text-body);
}
.result-panel__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 var(--space-16);
}
.result-panel__title--success { color: var(--text-primary); }
.result-panel__title--partial { color: #B45309; }
.result-panel__title--fail { color: var(--text-error); }
.result-panel ol { padding-left: var(--space-20); margin: 0 0 var(--space-20); }
.result-panel li { margin-bottom: var(--space-8); }
.result-panel a { color: var(--text-link); }
.result-panel__hint { color: var(--text-secondary); font-size: 14px; }
.result-panel__again {
  margin-top: var(--space-24);
}