/* ==========================================================================
   TradeDay — base design system
   Fonts are self-hosted, not pulled from a CDN — see README.md "Fonts"
   for the exact files to download into assets/fonts/ before launch.
   ========================================================================== */

@font-face {
	font-family: 'Big Shoulders Display';
	src: url('../fonts/BigShouldersDisplay-Bold.woff2') format('woff2');
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: 'Work Sans';
	src: url('../fonts/WorkSans-Regular.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Work Sans';
	src: url('../fonts/WorkSans-SemiBold.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'IBM Plex Mono';
	src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
	font-weight: 500;
	font-display: swap;
}

:root {
	--td-paper: #F7F7F2;
	--td-ink: #1C1C1A;
	--td-chili: #C8442B;
	--td-chili-dark: #A6371F;
	--td-mustard: #E0A52E;
	--td-sage: #5C7A5A;
	--td-steel: #8A8780;
	--td-border: #E2E0D8;

	--td-font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
	--td-font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--td-font-mono: 'IBM Plex Mono', ui-monospace, monospace;

	--td-radius-sm: 4px;
	--td-radius-md: 8px;
	--td-shadow: 0 2px 8px rgba(28, 28, 26, 0.08);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--td-font-body);
	background: var(--td-paper);
	color: var(--td-ink);
	line-height: 1.6;
}

h1, h2, h3 {
	font-family: var(--td-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.05;
	margin: 0 0 0.5em;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--td-chili); }
a:hover { color: var(--td-ink); }

/* Visible keyboard focus everywhere — never suppressed. */
:focus-visible {
	outline: 3px solid var(--td-chili);
	outline-offset: 2px;
}

.screen-reader-text {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* ---- shared buttons ---- */
.portal-btn {
	font-family: var(--td-font-body);
	font-weight: 600;
	font-size: 0.95rem;
	border-radius: var(--td-radius-sm);
	padding: 0.7em 1.4em;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.12s ease, background-color 0.12s ease;
}
.portal-btn:active { transform: scale(0.98); }
.portal-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.portal-btn--primary {
	background: var(--td-chili);
	color: var(--td-paper);
}
.portal-btn--primary:hover:not(:disabled) { background: var(--td-chili-dark); }

.portal-btn--ghost {
	background: transparent;
	border-color: var(--td-border);
	color: var(--td-ink);
}
.portal-btn--ghost:hover:not(:disabled) { border-color: var(--td-ink); }

/* ---- shared form fields ---- */
label {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	margin: 1em 0 0.35em;
}
input[type="text"], input[type="email"], input[type="tel"],
input[type="password"], input[type="number"], textarea {
	width: 100%;
	font-family: var(--td-font-body);
	font-size: 1rem;
	padding: 0.65em 0.8em;
	border: 1.5px solid var(--td-border);
	border-radius: var(--td-radius-sm);
	background: #fff;
	color: var(--td-ink);
}
input:focus, textarea:focus { border-color: var(--td-chili); }

.portal-radio, .portal-checkbox {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 500;
	margin: 0.6em 0;
}

/* ---- shared cards ---- */
.portal-card {
	background: #fff;
	border: 1px solid var(--td-border);
	border-radius: var(--td-radius-md);
	padding: 1.5rem;
	box-shadow: var(--td-shadow);
}
.portal-card__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}
.portal-card__hint { color: var(--td-steel); font-size: 0.9rem; margin-top: -0.3em; }
.portal-empty-state { color: var(--td-steel); font-style: italic; }
.portal-divider { border: none; border-top: 1px solid var(--td-border); margin: 1.5em 0; }

/* ---- ticket / docket motif — the signature element, used on order cards
   and confirmation screens. A dashed tear-edge with punched notches. ---- */
.ticket-edge {
	position: relative;
	border-top: 2px dashed var(--td-border);
}
.ticket-edge::before, .ticket-edge::after {
	content: '';
	position: absolute;
	top: -8px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--td-paper);
}
.ticket-edge::before { left: -8px; }
.ticket-edge::after { right: -8px; }

/* ---- shared <dialog> component ---- */
.portal-dialog {
	border: none;
	border-radius: var(--td-radius-md);
	padding: 1.75rem;
	max-width: 440px;
	width: 92vw;
	box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.portal-dialog::backdrop { background: rgba(28,28,26,0.55); }
.portal-dialog__actions {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	margin-top: 1.5rem;
}