@layer base, theme;
@layer theme {
/*
  theme.css -- Oscar IDP brand tokens, dark-editorial re-skin.

  This is the only palette file. Base.astro puts its defaults inside
  @layer base, so the unlayered declarations here always win. The site is
  pinned dark: a single deep-indigo canvas, hairline borders, 16px-radius
  surface cards, mono-font labels and one warm-orange action colour --
  the the grid theme Astro theme's language mapped onto Oscar's brand colours.
*/

:root,
:root.dark,
:root.light {
	color-scheme: dark;

	/* --- Colours (Oscar brand) --- */
	--color-bg: #161445; /* indigo canvas (the grid theme neutral-900) */
	--color-bg-subtle: #100f33; /* deeper bands / footer */
	--color-surface: #1c1a52; /* cards, panels, inputs (the grid theme neutral-800) */
	--color-surface-2: #23206a; /* raised chips / secondary buttons (neutral-700) */
	--color-text: #ffffff;
	--color-text-secondary: #c8c7de;
	--color-muted: #9a98c0;
	--color-border: rgba(125, 120, 220, 0.2); /* hairline card border */
	--color-border-subtle: rgba(125, 120, 220, 0.12);
	--color-border-strong: rgba(125, 120, 220, 0.34);

	/* Single warm-orange action colour (links, focus, primary buttons). */
	--color-accent: #ed8b1c;
	--color-accent-hover: #d4710a;
	--color-on-accent: #ffffff;
	--color-accent-ring: color-mix(in srgb, #ed8b1c 30%, transparent);
	--color-accent-soft: rgba(237, 139, 28, 0.12); /* tinted icon tiles / badges */
	--color-accent-line: rgba(237, 139, 28, 0.45); /* gradient hairlines */
	--color-cta: #ed8b1c;
	--color-cta-hover: #d4710a;
	--color-on-cta: #ffffff;

	/* the theme's signature accent gradient (used for highlighted words/buttons) */
	--gradient-accent: linear-gradient(90deg, #ed8b1c 0%, #f4a950 100%);
	/* Fading hairline used above CTA bands and the footer */
	--gradient-line: linear-gradient(90deg, rgba(237, 139, 28, 0) 0%, var(--color-accent-line) 50%, rgba(237, 139, 28, 0) 100%);

	/* --- Radius: 16px cards, 10px buttons, 12px tiles, pills --- */
	--radius: 10px;
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* --- Layout --- */
	--wide-width: 1250px;
	--nav-height: 84px;

	/* --- Shadows (deep, on the dark canvas) --- */
	--shadow-dropdown: 0 18px 50px rgba(0, 0, 0, 0.45);
	--shadow-btn-active: 0 1px 2px rgba(0, 0, 0, 0.3);
	--shadow-button: 0 8px 24px -8px rgba(237, 139, 28, 0.55);
	--shadow-card: 0 24px 60px -30px rgba(0, 0, 0, 0.6);
}

/* Single typeface: Red Hat Display everywhere (body, headings, UI). JetBrains
   Mono is reserved for labels, stats and code -- the the grid theme "terminal" touch. */
:root,
:root.dark,
:root.light {
	/* Font families (registered in astro.config.mjs; picked per theme) */
	--font-sans: var(--font-redhat);
	--font-head: var(--font-redhat);
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
button,
input,
select,
textarea,
optgroup {
	font-family: var(--font-head);
}
body {
	font-size: 1rem;
	line-height: 1.625;
}
h1,
h2,
h3,
h4 {
	color: var(--color-text);
}
::selection {
	background: var(--color-accent);
	color: #fff;
}

/* EmDash's in-context-editing injects a Tailwind preflight that sets an
   unlayered `body { background: oklch(0.98 ...) }`, overriding Base's layered
   body rule. Pin the page canvas to the dark Oscar background so transparent
   sections never flash light. */
html,
body {
	background-color: var(--color-bg) !important;
	color: var(--color-text);
}

/* --- Mono label utility (eyebrow pills, stats, tiny caps) --- */
.mono,
.mk-eyebrow,
.uc__eyebrow,
.ucx__eyebrow,
.ucx__client,
.stat__value {
	font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
}

/* --- Contact form (forms plugin) re-skinned for the dark canvas.
   The plugin ships unlayered light defaults, so the surface/border/text need
   !important; everything else inherits the Oscar tokens. --- */
.ec-form {
	max-width: var(--wide-width);
	margin: 0 auto;
	padding: var(--spacing-12) var(--spacing-6);
}
.ec-form-label {
	color: var(--color-text);
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 0.9375rem;
}
.ec-form-required {
	color: var(--color-accent);
}
.ec-form-input,
textarea.ec-form-input {
	background-color: var(--color-surface) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: var(--radius);
	padding: 0.85rem 1rem;
}
.ec-form-input::placeholder {
	color: var(--color-muted);
}
.ec-form-input:focus,
.ec-form-input:focus-visible {
	outline: none;
	border-color: var(--color-accent) !important;
	box-shadow: 0 0 0 3px var(--color-accent-ring);
}
.ec-form-submit,
.ec-form-next {
	background-color: var(--color-cta) !important;
	color: var(--color-on-cta) !important;
	border: none !important;
	border-radius: var(--radius);
	padding: 0.9rem 2rem;
	font-family: var(--font-head);
	font-weight: 600;
	transition: background-color 0.3s, box-shadow 0.3s;
}
.ec-form-submit:hover,
.ec-form-next:hover {
	background-color: var(--color-cta-hover) !important;
	box-shadow: var(--shadow-button);
}
.ec-form-prev {
	background: var(--color-surface-2) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-border-strong) !important;
	border-radius: var(--radius);
}
.ec-form-status {
	color: var(--color-text-secondary);
}
/* Hide the spam-protection honeypot field (aria-hidden, "Leave blank") so it
   doesn't render as a stray empty input. It stays in the DOM for bots. */
.ec-form-field[aria-hidden="true"] {
	display: none !important;
}

/*
 * Shared styling primitives for marketing blocks (dark-editorial, Oscar colours).
 * Imported once on marketing page routes. Block components use these classes so
 * spacing, buttons, pills and grids stay consistent across every module.
 *
 * the grid theme rhythm: transparent sections on one canvas, generous 100px vertical
 * padding on desktop, centered pill eyebrow + big semibold H2 + secondary intro,
 * 16px-radius hairline cards, 10px-radius buttons, mono labels.
 */

.mk-section {
	position: relative;
	padding: clamp(4.25rem, 8vw, 6.25rem) 15px;
}
.mk-section--tint { background: var(--color-bg-subtle); }
.mk-section--accent {
	background: radial-gradient(circle at 50% 40%, rgba(237, 139, 28, 0.12), transparent 60%);
}
/* Dark immersive band: a framed strip with fading orange hairlines top/bottom
   (the the grid theme CTA/footer "border-image" treatment). */
.mk-section--dark {
	background: radial-gradient(circle, rgba(60, 55, 150, 0.35), rgba(0, 0, 0, 0) 70%);
}
.mk-section--dark::before,
.mk-section--dark::after,
.mk-section--accent::before,
.mk-section--accent::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--gradient-line);
	pointer-events: none;
}
.mk-section--dark::before,
.mk-section--accent::before { top: 0; }
.mk-section--dark::after,
.mk-section--accent::after { bottom: 0; }

.mk-inner { position: relative; max-width: var(--wide-width, 1250px); margin: 0 auto; }
.mk-inner--narrow { max-width: 860px; }

/* Eyebrow: the theme's bordered pill with a status dot + mono label */
.mk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--color-surface) 55%, transparent);
	font-family: var(--font-mono, ui-monospace, monospace);
	font-size: 0.875rem;
	line-height: 1.425;
	letter-spacing: 0.025em;
	font-weight: 400;
	color: var(--color-text-secondary);
	margin: 0 0 1.5rem;
	text-transform: none;
}
.mk-eyebrow::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 3px var(--color-accent-soft);
	flex: none;
}

.mk-h2 {
	font-size: clamp(1.875rem, 4.2vw, 3.5rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 600;
	color: var(--color-text);
	margin: 0 0 1.25rem;
}
.mk-h3 { font-size: 1.5rem; font-weight: 700; line-height: 1.33; color: var(--color-text); margin: 0 0 0.5rem; }
.mk-intro {
	font-size: 1.125rem;
	color: var(--color-text-secondary);
	line-height: 1.625;
	max-width: 640px;
	margin: 0 0 2.5rem;
}
.mk-center { text-align: center; }
.mk-center .mk-intro { margin-inline: auto; }
.mk-center .mk-h2 { margin-inline: auto; max-width: 820px; }
/* Section header: pill + heading + intro, spaced like the rest of the theme (mb 3-4rem) */
.mk-head { margin-bottom: clamp(2rem, 4vw, 4rem); }
.mk-head .mk-intro:last-child { margin-bottom: 0; }

/* --- Buttons (global so every block reuses them) --- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	border-radius: var(--radius, 10px);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
}
.btn::after {
	/* arrow glyph, the grid theme puts one after every CTA */
	content: "\2192";
	font-family: var(--font-mono, monospace);
	font-size: 1em;
	line-height: 1;
	transition: transform 0.3s ease;
}
.btn:hover::after { transform: translateX(3px); }
.btn--primary { background: var(--color-cta, var(--color-accent)); color: var(--color-on-cta, #fff); }
.btn--primary:hover { background: var(--color-cta-hover, var(--color-accent-hover)); color: #fff; box-shadow: var(--shadow-button); }
.btn--ghost,
.btn--ghost-light {
	background: var(--color-surface-2);
	color: var(--color-text);
	border-color: var(--color-border-strong);
}
.btn--ghost:hover,
.btn--ghost-light:hover { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.btn--sm { padding: 0.625rem 1.5rem; font-size: 0.9375rem; }
.btn--sm::after { display: none; }
.mk-ctas { display: flex; gap: 1rem; flex-wrap: wrap; }

/* --- Responsive grid for feature/card/pricing/logo blocks --- */
.mk-grid { display: grid; gap: 1.5rem; }
.mk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mk-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .mk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .mk-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .mk-grid--3, .mk-grid--2, .mk-grid--4 { grid-template-columns: 1fr; } }

/* --- Card: surface, hairline border, 16px radius, 30px padding --- */
.mk-card {
	position: relative;
	z-index: 1;
	overflow: hidden;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 16px);
	padding: clamp(1.25rem, 2.5vw, 1.875rem);
	transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.mk-card:hover { border-color: var(--color-border-strong); }
/* Icon tile: 56px rounded square with tinted fill + accent border */
.mk-card__icon,
.mk-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-md, 12px);
	background: var(--color-accent-soft);
	border: 1px solid rgba(237, 139, 28, 0.4);
	color: var(--color-accent);
	font-size: 1.5rem;
	line-height: 1;
	margin-bottom: 1.5rem;
}
.mk-card__title { font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--color-text); margin: 0 0 0.75rem; }
.mk-card__text { color: var(--color-text-secondary); margin: 0; font-size: 1rem; line-height: 1.625; }
.mk-card__link {
	display: inline-flex; align-items: center; gap: 0.4rem;
	margin-top: 1.25rem; color: var(--color-accent); font-weight: 600; font-size: 0.9375rem; text-decoration: none;
	transition: gap 0.3s ease;
}
.mk-card__link:hover { gap: 0.7rem; color: var(--color-accent); }

/* Faint oversized index number in a card's corner (the grid theme use-case cards) */
.mk-card__num {
	position: absolute;
	top: 1.25rem;
	right: 1.5rem;
	font-family: var(--font-mono, monospace);
	font-size: 4rem;
	font-weight: 500;
	line-height: 1;
	color: rgba(200, 199, 222, 0.08);
	pointer-events: none;
	user-select: none;
}

/* Small mono kicker used inside cards ("KEY FOCUS AREAS") */
.mk-kicker {
	font-family: var(--font-mono, monospace);
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin: 0 0 0.75rem;
}

/* Hairline divider */
.mk-rule { height: 1px; background: var(--color-border); border: 0; margin: 0; }

/* --- Loose Portable Text output between blocks (paragraphs, tables) ---
   Constrain to the inner width and give tables the hairline-card treatment.
   A table whose cells are all empty (stray editor artefact) is hidden. */
main > p,
main > .emdash-table-wrapper,
main > ul,
main > ol,
main > h2,
main > h3 {
	max-width: var(--wide-width, 1250px);
	margin-left: auto;
	margin-right: auto;
	padding-left: 15px;
	padding-right: 15px;
	color: var(--color-text-secondary);
}
main > p:empty { display: none; }
.emdash-table-wrapper { overflow-x: auto; margin-block: 2rem; }
.emdash-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg, 16px);
	overflow: hidden;
	font-size: 0.9375rem;
}
.emdash-table th,
.emdash-table td {
	padding: 0.875rem 1.25rem;
	border-bottom: 1px solid var(--color-border-subtle);
	border-right: 1px solid var(--color-border-subtle);
	text-align: left;
	color: var(--color-text-secondary);
}
.emdash-table th { color: var(--color-text); font-weight: 600; background: var(--color-surface-2); }
.emdash-table tr > :last-child { border-right: 0; }
.emdash-table tr:last-child > * { border-bottom: 0; }
.emdash-table-wrapper:not(:has(th p:not(:empty), td p:not(:empty))) { display: none; }

/* 4-up pricing: tighter mono price so amounts stay on one line */
.mk-grid--4 .price__num { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }

}