/* Opt-in FluxPing Design System v1 components. */

.ds-display,
.ds-heading-1,
.ds-heading-2,
.ds-heading-3 {
    color: var(--color-text);
    line-height: var(--line-height-heading);
}

.ds-display {
    max-width: 100%;
    font-size: var(--font-size-display);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-display);
    letter-spacing: var(--letter-spacing-display);
    overflow-wrap: break-word;
}

.ds-heading-1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading); }
.ds-heading-2 { font-size: var(--font-size-h2); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-heading); }
.ds-heading-3 { font-size: var(--font-size-h3); font-weight: var(--font-weight-semibold); }
.ds-body-lg { font-size: var(--font-size-body-lg); line-height: var(--line-height-body); }
.ds-body { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.ds-body-sm { font-size: var(--font-size-body-sm); line-height: var(--line-height-body); }
.ds-caption { font-size: var(--font-size-caption); line-height: var(--line-height-compact); }
.ds-overline { font-size: var(--font-size-label); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; }

.wf-landing-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    color: var(--color-text);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-extrabold);
    letter-spacing: var(--letter-spacing-heading);
    text-decoration: none;
}

.wf-brand-mark {
    display: grid;
    width: var(--space-6);
    height: var(--space-6);
    place-items: center;
    border-radius: var(--radius-control);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.wf-brand-mark svg {
    width: var(--space-5);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.button {
    position: relative;
    max-width: 100%;
    min-height: var(--control-height);
    gap: var(--space-2);
    padding: .5625rem var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
    transition:
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.button:hover { text-decoration: none; }
.button:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }
.button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.button-primary {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.button-primary:hover { background: var(--color-primary-hover); }
.button-primary:active { background: var(--color-primary-active); }

.button-secondary {
    border-color: var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
}

.button-secondary:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-softer);
    color: var(--color-primary-hover);
}

.button-ghost {
    background: transparent;
    color: var(--color-text-subtle);
}

.button-ghost:hover { background: var(--color-surface-soft); color: var(--color-text); }

.button-danger {
    border-color: var(--color-danger);
    background: var(--color-danger);
    color: var(--color-on-primary);
}

.button-danger:hover { background: var(--color-danger); filter: brightness(.92); }

.button:disabled,
.button[aria-disabled="true"] {
    border-color: var(--color-border);
    background: var(--color-disabled-soft);
    color: var(--color-disabled);
    box-shadow: none;
    cursor: not-allowed;
    pointer-events: none;
}

.button-large {
    min-height: var(--control-height-lg);
    padding: var(--space-3) var(--space-5);
    font-size: var(--font-size-body);
}

.button[data-loading="true"] { color: transparent; pointer-events: none; }
.button[data-loading="true"]::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--color-disabled);
    border-right-color: transparent;
    border-radius: 50%;
    animation: ds-spin .7s linear infinite;
}

.button-primary[data-loading="true"]::after,
.button-danger[data-loading="true"]::after {
    border-color: var(--color-on-primary-muted);
    border-right-color: transparent;
}

@keyframes ds-spin { to { transform: rotate(360deg); } }

.ds-field { display: grid; gap: var(--space-2); }
.ds-field-group { display: grid; gap: var(--space-5); }
.ds-label {
    color: var(--color-text);
    font-size: var(--font-size-body-sm);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-compact);
}

.ds-input,
.ds-select,
.ds-textarea {
    width: 100%;
    min-height: var(--control-height-lg);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-control);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    line-height: var(--line-height-compact);
}

.ds-textarea { min-height: 7.5rem; resize: vertical; }
.ds-input::placeholder,
.ds-textarea::placeholder { color: var(--color-disabled); }
.ds-input:hover,
.ds-select:hover,
.ds-textarea:hover { border-color: var(--color-text-muted); }
.ds-input:focus-visible,
.ds-select:focus-visible,
.ds-textarea:focus-visible { outline: none; border-color: var(--color-focus); box-shadow: var(--focus-ring); }
.ds-input:disabled,
.ds-select:disabled,
.ds-textarea:disabled { background: var(--color-disabled-soft); color: var(--color-disabled); cursor: not-allowed; }
.ds-field-help { color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: var(--line-height-body); }
.ds-field-error { color: var(--color-danger); font-size: var(--font-size-caption); font-weight: var(--font-weight-medium); }
.ds-input[aria-invalid="true"],
.ds-select[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] { border-color: var(--color-danger); }

.ds-choice {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--font-size-body-sm);
    line-height: var(--line-height-compact);
    cursor: pointer;
}

.ds-choice input {
    width: 1rem;
    height: 1rem;
    flex: 0 0 1rem;
    margin: .1rem 0 0;
    accent-color: var(--color-primary);
}

.ds-choice input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.ds-choice input:disabled,
.ds-choice:has(input:disabled) { color: var(--color-disabled); cursor: not-allowed; }
.ds-inline-action { color: var(--color-primary); font-size: var(--font-size-body-sm); font-weight: var(--font-weight-semibold); text-underline-offset: .2em; }

.ds-card {
    min-width: 0;
    max-width: 100%;
    padding: var(--card-padding);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.ds-card-soft { background: var(--color-surface-soft); box-shadow: none; }
.ds-card-elevated { border-color: transparent; box-shadow: var(--shadow-md); }
.ds-card-highlighted { border-color: var(--color-primary); }
.ds-card-recommended { border-color: var(--color-primary); box-shadow: var(--shadow-md); }
.ds-card-interactive { color: inherit; text-decoration: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); }
.ds-card-interactive:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ds-card-interactive:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--shadow-md); }

.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: fit-content;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-disabled-soft);
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-compact);
}

.ds-badge-info { background: var(--color-info-soft); color: var(--color-info); }
.ds-badge-success { background: var(--color-success-soft); color: var(--color-success); }
.ds-badge-warning { background: var(--color-warning-soft); color: var(--color-warning); }
.ds-badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.ds-badge-plan { background: var(--color-disabled-soft); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: .04em; }
.ds-badge-recommended { background: var(--color-primary-soft); color: var(--color-primary-hover); text-transform: uppercase; letter-spacing: .04em; }

.ds-icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ds-icon-sm { width: 1rem; height: 1rem; }
.ds-icon-lg { width: 1.5rem; height: 1.5rem; }

@media (prefers-reduced-motion: reduce) {
    .button,
    .ds-card-interactive { transition: none; }
    .button[data-loading="true"]::after { animation: none; }
}

@media (max-width: 680px) {
    .wf-landing-brand { font-size: var(--font-size-body); }
}