/*
 * Open Loans — Apple-inspired design system
 * Shared tokens + primitives for Calculators, Directory, and Property pages.
 *
 * Principles (not components): generous whitespace, refined typography,
 * restrained palette, subtle depth, calm motion, content-first hierarchy.
 */

:root {
    /* Neutral ink palette */
    --ink-900: #1d1d1f;
    --ink-800: #2a2a2e;
    --ink-700: #3a3a3d;
    --ink-600: #515154;
    --ink-500: #6e6e73;
    --ink-400: #86868b;
    --ink-300: #a1a1a6;
    --ink-200: #d2d2d7;
    --ink-100: #e8e8ed;
    --ink-050: #f5f5f7;
    --ink-025: #fafafa;
    --ink-000: #ffffff;

    /* Single accent; used sparingly */
    --accent-500: #0071e3;
    --accent-600: #0058b8;
    --accent-050: #e8f1fd;

    /* Semantic tints (muted, never neon) */
    --tint-positive: #1d7f4e;
    --tint-positive-050: #e8f5ee;
    --tint-warning: #9a6b00;
    --tint-warning-050: #fdf3dd;
    --tint-critical: #b42318;
    --tint-critical-050: #fdecea;

    /* Surfaces */
    --surface-canvas: var(--ink-025);
    --surface-raised: var(--ink-000);
    --surface-sunken: var(--ink-050);
    --surface-glass: rgba(255, 255, 255, 0.72);

    /* Hairlines */
    --hairline: rgba(0, 0, 0, 0.08);
    --hairline-strong: rgba(0, 0, 0, 0.12);
    --hairline-soft: rgba(0, 0, 0, 0.05);

    /* Elevation (soft, layered) */
    --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-sm: 0 4px 12px -6px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 14px 34px -18px rgba(16, 24, 40, 0.18);
    --shadow-lg: 0 28px 60px -28px rgba(16, 24, 40, 0.22);
    --shadow-xl: 0 48px 90px -40px rgba(16, 24, 40, 0.28);

    /* Radii */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 22px;
    --radius-xl: 28px;
    --radius-pill: 999px;

    /* Typography */
    --font-display: "SF Pro Display", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-text: "SF Pro Text", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 160ms;
    --dur-base: 240ms;
    --dur-slow: 420ms;

    /* Layout rhythm */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;
    --space-10: 128px;
    --content-max: 1180px;
    --content-tight: 880px;
}

/* ------------------------------------------------------------------ */
/* Scoped namespace: any page opts into the system by adding           */
/*   class="al-scope"                                                   */
/* This keeps legacy Bootstrap/Radzen styles untouched globally.        */
/* ------------------------------------------------------------------ */

.al-scope {
    color: var(--ink-900);
    font-family: var(--font-text);
    font-feature-settings: "ss01", "cv11";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.003em;
    line-height: 1.5;
}

.al-scope h1,
.al-scope h2,
.al-scope h3,
.al-scope h4 {
    font-family: var(--font-display);
    color: var(--ink-900);
    letter-spacing: -0.022em;
    line-height: 1.08;
    margin: 0;
    font-weight: 600;
    text-wrap: balance;
}

.al-scope h1 {
    font-size: clamp(2.25rem, 1.3rem + 3.2vw, 3.75rem);
    letter-spacing: -0.028em;
}

.al-scope h2 {
    font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem);
    letter-spacing: -0.024em;
}

.al-scope h3 {
    font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
    letter-spacing: -0.018em;
    line-height: 1.2;
}

.al-scope h4 {
    font-size: 1.125rem;
    line-height: 1.3;
    letter-spacing: -0.012em;
}

.al-scope p {
    color: var(--ink-600);
    font-size: 1.0625rem;
    line-height: 1.55;
    margin: 0;
    text-wrap: pretty;
}

.al-scope .al-lede {
    color: var(--ink-700);
    font-size: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
    line-height: 1.55;
    max-width: 62ch;
}

.al-scope .al-eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-500);
    font-weight: 600;
}

.al-scope .al-kicker {
    color: var(--accent-500);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: -0.003em;
}

.al-scope a {
    color: var(--accent-500);
    text-underline-offset: 3px;
}

.al-scope a:hover {
    color: var(--accent-600);
}

/* Generic surfaces */
.al-surface {
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.al-surface--sunken {
    background: var(--surface-sunken);
    border-color: transparent;
    box-shadow: none;
}

.al-surface--glass {
    background: var(--surface-glass);
    backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    border-color: rgba(255, 255, 255, 0.6);
}

.al-surface--elevated {
    box-shadow: var(--shadow-md);
}

.al-surface--feature {
    box-shadow: var(--shadow-lg);
    border-color: var(--hairline-strong);
}

/* Hairline divider */
.al-rule {
    height: 1px;
    background: var(--hairline);
    border: 0;
    margin: var(--space-7) 0;
}

/* Container */
.al-container {
    width: 100%;
    max-width: var(--content-max);
    margin-inline: auto;
    padding-inline: clamp(20px, 4vw, 40px);
}

.al-container--tight {
    max-width: var(--content-tight);
}

/* Section rhythm */
.al-section {
    padding-block: clamp(56px, 8vw, 112px);
}

.al-section--compact {
    padding-block: clamp(40px, 5vw, 72px);
}

/* Buttons — restrained, text-first */
.al-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-family: var(--font-text);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: -0.003em;
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out),
        color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) var(--ease-out);
    will-change: transform;
}

.al-scope a.al-button {
    text-decoration: none;
}

.al-button:hover {
    transform: translateY(-1px);
}

.al-button:active {
    transform: translateY(0);
}

.al-button:focus-visible {
    outline: 2px solid var(--accent-500);
    outline-offset: 3px;
}

.al-button--primary {
    background: var(--ink-900);
    color: var(--ink-000);
}

.al-button--primary:hover {
    background: var(--ink-800);
    color: var(--ink-000);
}

.al-scope a.al-button--primary,
.al-scope a.al-button--primary:hover,
.al-scope a.al-button--primary:focus-visible {
    color: var(--ink-000);
}

.al-button--accent {
    background: var(--accent-500);
    color: #fff;
}

.al-button--accent:hover {
    background: var(--accent-600);
    color: #fff;
}

.al-scope a.al-button--accent,
.al-scope a.al-button--accent:hover,
.al-scope a.al-button--accent:focus-visible {
    color: #fff;
}

.al-button--ghost {
    background: transparent;
    color: var(--ink-900);
    border-color: var(--hairline-strong);
}

.al-button--ghost:hover {
    background: var(--surface-sunken);
}

.al-scope a.al-button--ghost,
.al-scope a.al-button--ghost:hover,
.al-scope a.al-button--ghost:focus-visible {
    color: var(--ink-900);
}

.al-button--quiet {
    background: transparent;
    color: var(--ink-900);
    padding-inline: 8px;
}

.al-button--quiet:hover {
    color: var(--accent-600);
}

.al-scope a.al-button--quiet {
    color: var(--ink-900);
}

.al-scope a.al-button--quiet:hover,
.al-scope a.al-button--quiet:focus-visible {
    color: var(--accent-600);
}

/* Text link with chevron */
.al-link-chevron {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    color: var(--accent-500);
    text-decoration: none;
    transition: gap var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.al-link-chevron::after {
    content: "›";
    font-size: 1.15em;
    line-height: 1;
    transition: transform var(--dur-fast) var(--ease-out);
}

.al-link-chevron:hover {
    gap: 10px;
    color: var(--accent-600);
}

.al-link-chevron:hover::after {
    transform: translateX(2px);
}

/* Badges / eyebrow chips */
.al-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-700);
    background: var(--surface-sunken);
    border: 1px solid var(--hairline-soft);
    letter-spacing: -0.003em;
}

.al-chip--accent {
    color: var(--accent-600);
    background: var(--accent-050);
    border-color: transparent;
}

.al-chip--positive {
    color: var(--tint-positive);
    background: var(--tint-positive-050);
    border-color: transparent;
}

.al-chip--warning {
    color: var(--tint-warning);
    background: var(--tint-warning-050);
    border-color: transparent;
}

/* Stat — big number, quiet label */
.al-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.al-stat__value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink-900);
}

.al-stat__label {
    font-size: 0.875rem;
    color: var(--ink-500);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Card — generous padding, hairline, lift on hover */
.al-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 2.2vw, 28px);
    background: var(--surface-raised);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-lg);
    transition: transform var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out),
        border-color var(--dur-base) var(--ease-out);
}

.al-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--hairline-strong);
}

/* Grid helpers */
.al-grid {
    display: grid;
    gap: clamp(16px, 2vw, 24px);
}

.al-grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.al-grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.al-grid--feature {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
}

@media (max-width: 820px) {
    .al-grid--feature {
        grid-template-columns: 1fr;
    }
}

/* Hero scaffolding */
.al-hero {
    position: relative;
    padding-block: clamp(64px, 10vw, 140px);
    background: linear-gradient(180deg, var(--ink-050) 0%, var(--ink-000) 100%);
    overflow: hidden;
}

.al-hero__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 28px;
    max-width: 960px;
}

.al-hero__title {
    font-size: clamp(2.5rem, 1.1rem + 4.2vw, 4.5rem);
    letter-spacing: -0.03em;
    line-height: 1.04;
    font-weight: 600;
}

.al-hero__lede {
    max-width: 62ch;
}

.al-hero__cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
}

/* Glow / subtle radial */
.al-hero__glow {
    position: absolute;
    inset: auto -10% -40% auto;
    width: 640px;
    height: 640px;
    background: radial-gradient(closest-side, rgba(0, 113, 227, 0.10), transparent 70%);
    filter: blur(4px);
    pointer-events: none;
    z-index: 0;
}

/* Quiet form fields (Apple-like) */
.al-scope .al-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.al-scope .al-field>label,
.al-scope .al-field>.al-field__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-500);
    letter-spacing: -0.003em;
}

.al-scope .al-field input:not([type="checkbox"]):not([type="radio"]),
.al-scope .al-field select,
.al-scope .al-field textarea,
.al-scope .al-input {
    background: var(--surface-raised);
    border: 1px solid var(--hairline-strong);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font-family: var(--font-text);
    font-size: 1rem;
    color: var(--ink-900);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.al-scope .al-field input:focus,
.al-scope .al-field select:focus,
.al-scope .al-field textarea:focus,
.al-scope .al-input:focus {
    outline: none;
    border-color: var(--accent-500);
    box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.15);
}

/* Sticky secondary nav */
.al-stickybar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface-glass);
    backdrop-filter: saturate(180%) blur(22px);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    border-bottom: 1px solid var(--hairline);
}

/* Quiet table */
.al-scope .al-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.9375rem;
}

.al-scope .al-table th,
.al-scope .al-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--hairline);
}

.al-scope .al-table th {
    font-weight: 500;
    color: var(--ink-500);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: var(--surface-sunken);
}

/* Reveal-on-scroll hook (pages can add) */
.al-reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.al-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {

    .al-scope *,
    .al-button,
    .al-card,
    .al-reveal {
        transition: none !important;
    }
}

/* Dark mode surface (optional opt-in via .al-scope.al-theme-dark) */
.al-scope.al-theme-dark {
    --surface-canvas: #000;
    --surface-raised: #111114;
    --surface-sunken: #17171a;
    --surface-glass: rgba(24, 24, 27, 0.72);
    --hairline: rgba(255, 255, 255, 0.08);
    --hairline-strong: rgba(255, 255, 255, 0.16);
    --ink-900: #f5f5f7;
    --ink-800: #e5e5ea;
    --ink-700: #c7c7cc;
    --ink-600: #a1a1a6;
    --ink-500: #8e8e93;
    color: var(--ink-900);
    background: var(--surface-canvas);
}