/* ============================================================
   STYLES.CSS — Root stylesheet entry point
   All partials are imported here in the correct cascade order.
   ============================================================ */

/* 1. Google Fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* 2. Design tokens (CSS custom properties) */
@import "./_tokens.css";

/* 3. Base styles */
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

html,
body {
   width: 100%;
   min-height: 100%;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-sans);
   line-height: var(--line-height-normal);
   background: var(--color-bg);
   color: var(--color-text);
   transition: background var(--transition-base), color var(--transition-base);
}

a {
   color: inherit;
   text-decoration: none;
}

section {
   scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.container {
   width: min(100% - 2rem, var(--container-max));
   margin-inline: auto;
}

.section {
   padding: var(--section-padding);
}

.card {
   background: var(--color-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   box-shadow: var(--shadow-sm);
   transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.text-link {
   color: var(--color-primary);
}

.form-group {
   display: grid;
   gap: var(--space-2);
}

.form-label {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
}

.form-control {
   width: 100%;
   border: 1px solid var(--color-border);
   border-radius: var(--radius-sm);
   padding: 0.75rem 0.9rem;
   font: inherit;
   color: var(--color-text);
   background: var(--color-surface);
}

.form-control.error {
   border-color: var(--color-error);
}

.form-error {
   color: var(--color-error);
   min-height: 1.25rem;
   font-size: var(--font-size-sm);
}

.btn {
   border: 0;
   border-radius: var(--radius-full);
   padding: 0.75rem 1.2rem;
   font-weight: var(--font-weight-semibold);
   cursor: pointer;
   transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base), color var(--transition-base);
}

.btn:hover {
   transform: translateY(-2px);
}

.btn-primary {
   background: linear-gradient(120deg, #2a77ff, #0e5be0);
   color: #fff;
   box-shadow: 0 10px 24px rgba(42, 119, 255, 0.3);
}

.btn-primary:hover {
   box-shadow: 0 14px 28px rgba(42, 119, 255, 0.34);
}

.btn-ghost {
   background: transparent;
   color: var(--color-primary);
   border: 1px solid var(--color-border);
}

.reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity 650ms ease, transform 650ms ease;
}

.reveal.visible {
   opacity: 1;
   transform: translateY(0);
}

.form-status.success {
   color: var(--color-success);
}

.form-status.error {
   color: var(--color-error);
}