/* ==========================================================================
   Flow Artech — Corporate Branding (globalCSS Client Extension)
   Applies the navy + sky-blue palette on top of the Liferay Classic theme.
   No build step: edit this file and run `blade gw deploy`.
   --------------------------------------------------------------------------
   Phase 1 of DESIGN_PLAN.md. Later upgrade path: promote to a themeCSS
   client extension with a frontend-token-definition.json so these colors
   become editable in the Style Book editor.
   ========================================================================== */

/* TODO(font): self-host Inter to drop the external runtime dependency.
   Quick start uses Google Fonts; replace with a font-loader CX in Phase 1. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	/* Brand scale */
	--fa-navy-900: #06245a; /* darkest — footer, deep sections */
	--fa-navy-700: #0b3d91; /* PRIMARY — buttons, links, headings */
	--fa-navy-500: #1a56c4; /* primary hover */
	--fa-sky-500:  #4fa3e3; /* ACCENT — links, icons, highlights, focus */
	--fa-sky-300:  #8fc6ee; /* accent hover, borders */
	--fa-blue-100: #e8f2fc; /* alt section bg, cards, chips */
	--fa-blue-50:  #f4f9fe; /* subtle zebra background */
	--fa-ink:      #1a2330; /* body text */
	--fa-ink-muted:#5a6473; /* secondary text, captions */
	--fa-white:    #ffffff;
	--fa-border:   #dce6f2; /* hairlines, dividers */

	/* Semantic */
	--fa-success: #1e9e6a;
	--fa-warning: #c77700;
	--fa-danger:  #c0392b;

	/* Typography */
	--fa-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Helvetica, Arial, sans-serif;

	/* --------------------------------------------------------------------
	   Map Flow Artech tokens onto Clay / Bootstrap CSS variables so the
	   Classic theme picks up the palette globally.
	   -------------------------------------------------------------------- */
	--brand-color-1: var(--fa-navy-700);
	--brand-color-2: var(--fa-sky-500);

	--primary:    var(--fa-navy-700);
	--primary-d1: var(--fa-navy-900);
	--primary-d2: var(--fa-navy-900);
	--primary-l1: var(--fa-navy-500);
	--primary-l2: var(--fa-sky-300);
	--primary-l3: var(--fa-blue-100);

	--link-color:       var(--fa-navy-700);
	--link-hover-color: var(--fa-sky-500);

	--body-color: var(--fa-ink);
	--body-bg:    var(--fa-white);

	--font-family-base:       var(--fa-font-sans);
	--font-family-sans-serif: var(--fa-font-sans);
	--headings-color:         var(--fa-navy-700);
}

/* --------------------------------------------------------------------------
   2. Base typography
   -------------------------------------------------------------------------- */
body {
	color: var(--fa-ink);
	font-family: var(--fa-font-sans);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--fa-navy-700);
	font-weight: 700;
	letter-spacing: -0.01em;
}

a {
	color: var(--fa-navy-700);
}

a:hover,
a:focus {
	color: var(--fa-sky-500);
}

/* Visible keyboard focus for accessibility (WCAG) */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--fa-sky-500);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. Buttons (Clay .btn-primary / .btn-secondary)
   -------------------------------------------------------------------------- */
.btn-primary {
	background-color: var(--fa-navy-700);
	border-color: var(--fa-navy-700);
	color: var(--fa-white);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--fa-navy-500);
	border-color: var(--fa-navy-500);
	color: var(--fa-white);
}

.btn-secondary {
	background-color: transparent;
	border-color: var(--fa-sky-500);
	color: var(--fa-navy-700);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background-color: var(--fa-blue-100);
	border-color: var(--fa-sky-500);
	color: var(--fa-navy-700);
}

.btn {
	border-radius: 6px;
	font-weight: 600;
	padding: 0.6rem 1.4rem;
}

/* --------------------------------------------------------------------------
   4. Header / navigation (Classic theme)
   -------------------------------------------------------------------------- */
.control-menu,
.navbar.product-menu {
	/* leave admin chrome alone */
}

.cadmin .navbar {
	/* scoped so edit-mode chrome is untouched */
}

/* --------------------------------------------------------------------------
   5. Reusable corporate utilities — consumed by Phase 2 fragments
   -------------------------------------------------------------------------- */
.fa-section {
	padding: clamp(3rem, 6vw, 6rem) 0;
}

.fa-section--light {
	background-color: var(--fa-blue-100);
}

.fa-section--subtle {
	background-color: var(--fa-blue-50);
}

.fa-section--navy {
	background-color: var(--fa-navy-700);
	color: var(--fa-white);
}

.fa-section--navy h1,
.fa-section--navy h2,
.fa-section--navy h3 {
	color: var(--fa-white);
}

.fa-section--gradient {
	background: linear-gradient(135deg, var(--fa-navy-700) 0%, var(--fa-sky-500) 100%);
	color: var(--fa-white);
}

.fa-container {
	margin: 0 auto;
	max-width: 1200px;
	padding: 0 1.25rem;
}

.fa-card {
	background: var(--fa-white);
	border: 1px solid var(--fa-border);
	border-radius: 10px;
	padding: 1.75rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.fa-card:hover {
	box-shadow: 0 12px 28px rgba(11, 61, 145, 0.12);
	transform: translateY(-2px);
}

.fa-eyebrow {
	color: var(--fa-sky-500);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.fa-text-muted {
	color: var(--fa-ink-muted);
}

.fa-stat__value {
	color: var(--fa-sky-300);
	font-size: clamp(2.25rem, 4vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
}

.fa-stat__label {
	color: var(--fa-blue-100);
	font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   6. Sign-in page (/c/portal/login)
   Portal page rendered by the Login portlet (css-class-wrapper: portlet-login),
   not a content page — styled here because globalCSS loads on every page.
   Constrains the too-wide form and frames it as a centered card.
   -------------------------------------------------------------------------- */
.portlet-login .login-container {
	background: var(--fa-white);
	border: 1px solid var(--fa-border);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(11, 61, 145, 0.08);
	margin: clamp(2rem, 6vw, 4rem) auto 0;
	max-width: 420px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* Full-width inputs and sign-in button inside the card */
.portlet-login .login-container .form-control {
	width: 100%;
}

.portlet-login .login-container .btn-primary {
	width: 100%;
}

/* Tighten the Sign In / Create Account nav above the form */
.portlet-login .navbar {
	background: transparent;
	border: 0;
	margin: 0 auto 0.5rem;
	max-width: 420px;
	padding-left: 0;
	padding-right: 0;
}