/* Catalyst Calendar — auth screens. Same ledger language as the app. */

:root {
	--ink:        #0c0b09;
	--rule:       #2a2521;
	--paper:      #f2eee5;
	--paper-dim:  #a8a094;
	--paper-faint:#6d665c;
	--signal:     #ff8f1f;
	--up:         #2fd489;
	--down:       #ff5347;

	--serif: 'Instrument Serif', Georgia, serif;
	--sans:  'Archivo', 'Helvetica Neue', sans-serif;
	--mono:  'Azeret Mono', ui-monospace, Menlo, monospace;
	--ease: cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
	font-family: var(--sans);
	background: var(--ink);
	color: var(--paper);
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 2rem 1.25rem;
	line-height: 1.55;
	background-image:
		radial-gradient(760px 460px at 12% -12%, rgba(255,143,31,.11), transparent 62%),
		radial-gradient(620px 620px at 100% 100%, rgba(47,212,137,.04), transparent 60%);
}

/* film grain, matching the app shell */
body::after {
	content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .35;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

::selection { background: var(--signal); color: var(--ink); }

.auth-container { width: 100%; max-width: 420px; position: relative; z-index: 1; }

.auth-card {
	border: 1px solid var(--rule);
	background: linear-gradient(180deg, rgba(19,17,16,.86), rgba(12,11,9,.86));
	padding: 2.75rem 2.25rem 2.25rem;
	animation: rise .55s var(--ease) both;
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.auth-logo {
	font-family: var(--serif); font-size: 2.2rem; line-height: 1;
	letter-spacing: -.015em; margin-bottom: 2.25rem;
	padding-bottom: 1.5rem; border-bottom: 1px solid var(--rule);
}
.auth-logo em { font-style: italic; color: var(--signal); }

h2 {
	font-family: var(--mono); font-size: .68rem; font-weight: 500;
	letter-spacing: .24em; text-transform: uppercase; color: var(--signal);
	margin-bottom: 1.5rem;
}

label {
	display: block; font-family: var(--mono); font-size: .6rem; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase; color: var(--paper-faint);
	margin-bottom: .5rem;
}

input[type="email"],
input[type="password"],
input[type="text"] {
	width: 100%; padding: .8rem .9rem; margin-bottom: 1.35rem;
	background: rgba(0,0,0,.35); border: 1px solid var(--rule); border-radius: 0;
	color: var(--paper); font-family: var(--mono); font-size: .9rem;
	transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease);
}
input::placeholder { color: #4a443c; }
input:focus {
	outline: none; border-color: var(--signal);
	background: rgba(255,143,31,.05);
	box-shadow: 0 0 0 3px rgba(255,143,31,.12);
}

button[type="submit"] {
	width: 100%; padding: .85rem 1rem; margin-top: .35rem; cursor: pointer;
	font-family: var(--mono); font-size: .7rem; font-weight: 500;
	letter-spacing: .18em; text-transform: uppercase;
	background: var(--signal); color: var(--ink); border: 1px solid var(--signal);
	transition: all .18s var(--ease);
}
button[type="submit"]:hover { background: transparent; color: var(--signal); }
button[type="submit"]:focus-visible { outline: 2px solid var(--paper); outline-offset: 2px; }

.auth-links {
	display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule);
}
.auth-links a {
	font-family: var(--mono); font-size: .64rem; letter-spacing: .1em;
	text-transform: uppercase; color: var(--paper-dim); text-decoration: none;
	transition: color .18s;
}
.auth-links a:hover { color: var(--signal); }

.alert {
	padding: .8rem .9rem; margin-bottom: 1.5rem;
	border: 1px solid var(--rule); border-left-width: 2px;
	font-size: .84rem; color: var(--paper-dim);
}
.alert-success { border-left-color: var(--up); }
.alert-error   { border-left-color: var(--down); color: var(--paper); }

.auth-note {
	margin-top: 1.5rem; font-family: var(--mono); font-size: .62rem;
	letter-spacing: .06em; color: var(--paper-faint); line-height: 1.7;
}