/* Torus design tokens -- single source of truth.
   Construction amber #E67E22 reserved for: active-state, working-indicator,
   approval-hover, primary-hover (per CLAUDE.md). 0px radius, 1px line discipline.
   Semantic colors (success/warning/error/info) match DESIGN.md "Color" section --
   muted earth tones. Same hex per semantic in both modes; tokens.css is the
   runtime source of truth. See DESIGN.md for canonical palette before changing
   any token value. */

:root {
	/* Accent (amber) -- the four allowed uses */
	--accent: #e67e22;
	--accent-dim: rgba(230, 126, 34, 0.08);
	--active-state: var(--accent);
	--active-state-faint: rgba(230, 126, 34, 0.3);
	--working-indicator: var(--accent);
	--approval-hover: var(--accent);
	--primary-hover: var(--accent);

	/* Flag severity */
	--flag-severity-high: #e74c3c;
	--flag-severity-medium: var(--accent);
	--flag-severity-low: #95a5a6;

	/* Surface (DESIGN.md light-mode defaults; (app)/+layout.svelte overrides
	   per theme). Background #F5F3F0 warm off-white = drafting-paper feel. */
	--bg: #f5f3f0;
	--bg-elevated: #ffffff;
	--bg-subtle: #edeae6;
	--bg-overlay: rgba(0, 0, 0, 0.4);

	/* Foreground (legacy `--text-*` and modern `--fg-*` aliases coexist) */
	--text: #1a1a1a;
	--text-mid: #4a4a4a;
	--text-dim: #6b6b6b;
	--fg: var(--text);
	--fg-strong: #000000;
	--fg-dim: var(--text-dim);
	--fg-faint: #999999;

	/* Border (legacy `--line` and modern `--border-*` aliases coexist) */
	--line: #d4d0cc;
	--border: var(--line);
	--border-strong: #bfbab3;
	--border-faint: #ece9e4;

	/* Semantic (DESIGN.md muted earth tones) */
	--success: #4a7a5b;
	--success-faint: rgba(74, 122, 91, 0.12);
	--warning: #9a7b3c;
	--warning-faint: rgba(154, 123, 60, 0.12);
	--error: #8b4049;
	--error-faint: rgba(139, 64, 73, 0.12);
	--info: #4a6a8a;
	--info-faint: rgba(74, 106, 138, 0.12);

	/* People / org tags (non-sanctioned use of amber, scoped to chips) */
	--internal-tag: #9a7b3c;
	--firm-self: #9a7b3c;

	/* Type */
	--font-display: "Space Grotesk", sans-serif;
	--font-body: "IBM Plex Sans", sans-serif;
	--font-sans: var(--font-body);
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Spacing scale (4px base) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;

	/* Z-index scale */
	--z-overlay: 100;
	--z-modal: 200;
	--z-toast: 300;
}

/* Dark-mode semantic tokens. `.app-shell` (without `.light`) is dark mode
   per (app)/+layout.svelte. Hex values match DESIGN.md "Color" -> Semantic.
   Light mode uses the :root block above; the same hex applies in both modes
   so success/warning/error/info read consistently regardless of theme. */
.app-shell:not(.light) {
	--success: #4a7a5b;
	--success-faint: rgba(74, 122, 91, 0.18);
	--warning: #9a7b3c;
	--warning-faint: rgba(154, 123, 60, 0.18);
	--error: #8b4049;
	--error-faint: rgba(139, 64, 73, 0.18);
	--info: #4a6a8a;
	--info-faint: rgba(74, 106, 138, 0.18);
}

/* Universal focus-flash keyframe used by use:flash action. */
@keyframes torus-flash {
	0% {
		background-color: var(--active-state-faint);
		box-shadow: 0 0 0 1px var(--active-state-faint);
	}
	20% {
		background-color: var(--active-state-faint);
		box-shadow: 0 0 0 1px var(--active-state-faint);
	}
	100% {
		background-color: transparent;
		box-shadow: 0 0 0 1px transparent;
	}
}

.torus-flash {
	animation: torus-flash 2s ease-out;
}

/* Code-reference dotted-underline. Inline ASME / API / NFPA references
   rendered via §code{n}§ get a dotted underline that fills to solid on
   hover. Click handler is wired by the consuming component. */
.code-ref {
	border-bottom: 1px dotted var(--border-strong);
	transition:
		border-color 100ms ease,
		border-bottom-style 100ms ease;
	cursor: pointer;
}
.code-ref:hover {
	border-bottom-style: solid;
	border-color: var(--active-state);
}

/* Active-tab line-break discipline. The active tab's bottom border is
   removed so the underline visually continues into the pane below.
   Inactive tabs keep the full bottom border. 1px-pure; no pseudo-elements,
   no gradients. */
.tab-strip {
	display: flex;
	border-bottom: 1px solid var(--border);
}
.tab-strip > .tab {
	border: 1px solid transparent;
	border-bottom: 1px solid var(--border);
	margin-bottom: -1px;
	padding: 6px 12px;
	background: transparent;
	color: var(--text-dim);
	cursor: pointer;
	font-family: var(--font-body);
	font-size: 13px;
}
.tab-strip > .tab.active {
	border: 1px solid var(--border);
	border-bottom-color: var(--bg);
	background: var(--bg);
	color: var(--text);
}

/* Hover-marquee for long titles. Apply to any text node that overflows
   its container -- on hover, scrolls left to reveal then back. */
.marquee-on-hover {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
}
.marquee-on-hover:hover {
	text-overflow: clip;
	animation: torus-marquee 6s linear infinite;
}
@keyframes torus-marquee {
	0% {
		transform: translateX(0);
	}
	40% {
		transform: translateX(calc(-100% + 200px));
	}
	60% {
		transform: translateX(calc(-100% + 200px));
	}
	100% {
		transform: translateX(0);
	}
}

/* Deliverable typography. Apply to the document-preview pane content
   surface -- DOCX previews, FEL2 staged content, generated reports.
   Georgia is intentional: universally available, no web-font payload,
   and the serif delta against IBM Plex Sans chrome keeps "what the AI
   is suggesting" visually distinct from "what's already in the doc." */
.deliverable-content {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	line-height: 1.55;
	color: var(--text);
}
.deliverable-content code,
.deliverable-content pre {
	font-family: var(--font-mono);
}