/* ============================================================
   Thread & Template — Global Styles
   Aesthetic: "Clinical Couture" — architectural drafting meets
   high-end atelier sophistication
   ============================================================ */

:root {
  /* --- Primary Palette --- */
  --color-bg:          #1a1a2e;
  --color-bg-surface:  #222240;
  --color-bg-elevated: #2a2a4a;
  --color-bg-inset:    #141428;

  /* --- Accent --- */
  --color-accent:       #c4a882;
  --color-accent-light: #e8d5b7;
  --color-accent-dim:   #8a7560;

  /* --- Text --- */
  --color-text:         #e8e8f0;
  --color-text-muted:   #9898b0;
  --color-text-dim:     #6868880;

  /* --- Semantic --- */
  --color-success:  #5cb85c;
  --color-warning:  #d4a843;
  --color-error:    #c45050;
  --color-info:     #5090c4;

  /* --- Grid / Drafting --- */
  --color-grid:         #2a2a4a;
  --color-grid-major:   #3a3a5a;
  --color-seam:         #c4a882;
  --color-seam-allow:   rgba(196, 168, 130, 0.3);
  --color-anchor:       #e8d5b7;
  --color-anchor-hover: #ffffff;
  --color-validation-ok:    #5cb85c;
  --color-validation-error: #c45050;

  /* --- Dimensions --- */
  --header-height:  48px;
  --nav-height:     56px;
  --border-radius:  6px;
  --border-radius-lg: 12px;

  /* --- Typography --- */
  --font-main:    'SF Pro Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-display: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Transitions --- */
  --transition-fast: 120ms ease-out;
  --transition-med:  250ms ease-out;
}

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-main);
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

/* --- App Header --- */
#app-header {
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-bg-elevated);
}

.app-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-accent-light);
  letter-spacing: 0.5px;
}

.app-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* --- Navigation Tabs --- */
#app-nav {
  height: var(--nav-height);
  display: flex;
  align-items: stretch;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-bg-elevated);
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
  font-family: var(--font-main);
  position: relative;
}

.nav-tab:hover {
  color: var(--color-text);
  background: var(--color-bg-elevated);
}

.nav-tab.locked {
  opacity: 0.35;
  pointer-events: auto;
}

.nav-tab.locked .nav-label::after {
  content: ' \1F512';
  font-size: 8px;
}

.nav-tab.active {
  color: var(--color-accent-light);
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px 2px 0 0;
}

.nav-icon {
  font-size: 18px;
  line-height: 1;
}

.nav-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

/* --- Screen Container --- */
#screen-container {
  position: absolute;
  top: calc(var(--header-height) + var(--nav-height));
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: var(--color-bg);
}

/* --- Screen Base --- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity var(--transition-med);
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
}

/* --- Placeholder Screen --- */
.screen-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--color-text-muted);
}

.screen-placeholder .placeholder-icon {
  font-size: 48px;
  opacity: 0.3;
}

.screen-placeholder .placeholder-label {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.screen-placeholder .placeholder-hint {
  font-size: 12px;
  color: var(--color-text-dim);
}

/* --- Utility Classes --- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- Scrollbar Styling --- */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-dim);
}

/* --- Button Base --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-bg-elevated);
  border-radius: var(--border-radius);
  background: var(--color-bg-surface);
  color: var(--color-text);
  font-family: var(--font-main);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn:hover {
  background: var(--color-bg-elevated);
  border-color: var(--color-accent-dim);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--color-accent-light);
  border-color: var(--color-accent-light);
}

.btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}

/* --- Accessibility: Focus Indicators ---
   :focus-visible only shows when navigating by keyboard (not pointer/touch).
   Uses the accent color to keep focus rings consistent with the design system. */

/* Suppress browser default outline universally; we add our own below */
:focus {
  outline: none;
}

/* Keyboard-only focus ring for nav tabs */
.nav-tab:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  z-index: 1;
}

/* Keyboard-only focus ring for buttons */
.btn:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Keyboard-only focus ring for form controls */
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
  border-color: var(--color-accent) !important;
}