/* ============================================
   Hanko Elements theming

   One stylesheet shared by the login page and the profile page so
   <hanko-auth> and <hanko-profile> can never drift apart. Everything here is
   expressed through the variables and shadow parts Hanko documents:
   https://docs.hanko.io/guides/hanko-elements/customize-appearance

   Two rules for anyone editing this file:
     1. Style through ::part(). Reaching past the shadow boundary with
        descendant selectors works today and breaks on the next Elements
        release.
     2. The components render a lot of states from the same parts — email
        entry, passcode, passkey prompt, password, MFA setup, session list,
        errors. A part styled here shows up in all of them, which is the point;
        a state-specific hack does not.
   ============================================ */

hanko-auth,
hanko-profile {
	/* --- Color scheme ---
	   Mapped onto the dashboard's own tokens rather than restated, so a change
	   to --color-primary in base.css moves the auth UI with it. */
	--color: var(--color-gray-900);
	--color-shade-1: var(--color-gray-500);
	--color-shade-2: var(--color-gray-300);

	--brand-color: var(--color-primary);
	--brand-color-shade-1: var(--color-primary-hover);
	--brand-contrast-color: var(--color-white);

	--background-color: var(--color-white);
	--error-color: var(--color-error);
	--link-color: var(--color-primary);

	/* --- Typography --- matches body in base.css */
	--font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	--font-size: 15px;
	--font-weight: 400;

	--headline1-font-size: 24px;
	--headline1-font-weight: 700;
	--headline1-margin: 0 0 8px;

	--headline2-font-size: 15px;
	--headline2-font-weight: 600;
	--headline2-margin: 24px 0 8px;

	/* --- Borders ---
	   Hanko's --border-radius and the dashboard's --border-radius are the same
	   name, so this cannot be written as var(--border-radius): that is a cycle
	   and the whole declaration is dropped. --border-radius-md is the same 8px
	   the dashboard's inputs and buttons use. */
	--border-radius: var(--border-radius-md);
	--border-style: solid;
	--border-width: 1px;

	/* --- Items --- 44px clears the minimum touch target on every control the
	   components render, including the passcode digits. */
	--item-height: 44px;
	--item-margin: 0 0 16px 0;

	/* Padding lives on our own wrapper so the component fills its column. */
	--container-padding: 0;
	--container-max-width: 100%;

	--divider-padding: 0 16px;
	--divider-visibility: visible;

	--link-text-decoration: none;
	--link-text-decoration-hover: underline;

	--input-min-width: 0;
	--button-min-width: 0;

	display: block;
	width: 100%;
}

/* --- Container -------------------------------------------------------- */
hanko-auth::part(container),
hanko-profile::part(container) {
	width: 100%;
	max-width: 100%;
	/* Embedded components carry their own internal layout, which is the usual
	   source of horizontal overflow at 375px. Belt and braces. */
	box-sizing: border-box;
}

/* --- Headlines -------------------------------------------------------- */
hanko-auth::part(headline1),
hanko-profile::part(headline1) {
	color: var(--color-gray-900);
	letter-spacing: -0.01em;
}

hanko-auth::part(headline2),
hanko-profile::part(headline2) {
	color: var(--color-gray-900);
}

hanko-auth::part(paragraph),
hanko-profile::part(paragraph) {
	color: var(--color-gray-500);
	font-size: 14px;
	line-height: 1.5;
}

/* --- Form items ------------------------------------------------------- */
/* Full width stacks inputs and buttons vertically, which is what the rest of
   the dashboard's forms do and what survives a 375px viewport. */
hanko-auth::part(form-item),
hanko-profile::part(form-item) {
	min-width: 100%;
}

/* --- Inputs ----------------------------------------------------------- */
/* Mirrors .form-input in components.css. */
hanko-auth::part(input),
hanko-profile::part(input) {
	padding: 12px 16px;
	font-size: 15px;
	border: 1px solid var(--color-gray-300);
	border-radius: var(--border-radius);
	background: var(--color-white);
	color: var(--color-gray-900);
	transition: all var(--transition-fast);
}

hanko-auth::part(input):focus,
hanko-profile::part(input):focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px var(--color-primary-light);
}

hanko-auth::part(input)::placeholder,
hanko-profile::part(input)::placeholder {
	color: var(--color-gray-400);
}

/* Passcode entry renders one narrow box per digit. Without an explicit width
   the six of them overflow a 375px viewport; without the centring they look
   nothing like the rest of the form. This state only appears mid-flow, which
   is exactly why it is styled here rather than discovered later. */
hanko-auth::part(passcode-input),
hanko-profile::part(passcode-input) {
	text-align: center;
	padding: 12px 4px;
	font-size: 18px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 0;
	flex: 1 1 0;
}

/* --- Buttons ---------------------------------------------------------- */
/* Mirrors .btn / .btn-primary / .btn-secondary in components.css. */
hanko-auth::part(button),
hanko-profile::part(button) {
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	border-radius: var(--border-radius);
	transition: all var(--transition-fast);
	min-height: 44px;
	padding: 10px 20px;
	cursor: pointer;
}

hanko-auth::part(primary-button),
hanko-profile::part(primary-button) {
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
}

hanko-auth::part(primary-button):hover,
hanko-profile::part(primary-button):hover {
	background: var(--color-primary-hover);
	box-shadow: var(--shadow-md);
}

hanko-auth::part(secondary-button),
hanko-profile::part(secondary-button) {
	background: var(--color-white);
	color: var(--color-gray-700);
	border: 1px solid var(--color-gray-300);
}

hanko-auth::part(secondary-button):hover,
hanko-profile::part(secondary-button):hover {
	background: var(--color-gray-50);
	border-color: var(--color-gray-400);
}

/* --- Errors ----------------------------------------------------------- */
/* Same shape as .alert-error, so a failed passcode looks like every other
   validation failure in the app. */
hanko-auth::part(error),
hanko-profile::part(error) {
	background: var(--color-error-light);
	border: 1px solid var(--color-error-border);
	border-radius: var(--border-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
}

hanko-auth::part(error-text),
hanko-profile::part(error-text) {
	color: var(--color-error);
	font-size: 14px;
	font-weight: 500;
}

/* --- Divider ---------------------------------------------------------- */
hanko-auth::part(divider),
hanko-profile::part(divider) {
	margin: 8px 0 16px;
}

hanko-auth::part(divider-text),
hanko-profile::part(divider-text) {
	color: var(--color-gray-400);
	font-size: 13px;
}

hanko-auth::part(divider-line),
hanko-profile::part(divider-line) {
	background: var(--color-gray-200);
}

/* --- Links ------------------------------------------------------------ */
hanko-auth::part(link),
hanko-profile::part(link) {
	color: var(--color-primary);
	font-size: 14px;
	font-weight: 500;
	/* Footer links sit close together; give them a real tap target. */
	display: inline-block;
	padding: 10px 0;
	min-height: 44px;
	line-height: 24px;
}