/* =============================================================================
 * design-system.css — token aliases + utility classes
 *
 * Phase 0 of the visual polish pass (plan: agile-juggling-peach.md).
 *
 * Loaded AFTER app.css. Anything here cascades over base styles when
 * applied via opt-in classes. Never use !important — order does the work.
 *
 * Three sections:
 *   (a) Token aliases   — semantic names pointing at existing vars
 *   (b) Layout primitives — .stack, .cluster, .surface, .section-pad, ...
 *   (c) Component utilities — .btn-pill, .gain/.loss, .lift-on-hover, ...
 *
 * Brand decision: --accent-green stays #00d4aa (locked).
 * ========================================================================== */

/* ── (a) Token aliases ───────────────────────────────────────────────────── */
:root {
    /* Semantic color names — keep markup readable. .gain reads better
       than style="color: var(--accent-green)" on a P&L cell. */
    --color-gain: var(--accent-green);
    --color-loss: var(--accent-red);
    --color-warn: var(--accent-amber);
    --color-info: var(--accent-blue);

    /* Motion. 200ms cubic-bezier(0.16, 1, 0.3, 1) is the smooth-out curve
       Robinhood/Public use; --transition-fast for snappy color/border swaps. */
    --transition-base: 200ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast: 120ms ease-out;

    /* Stronger lift than --shadow-elevated; used by .lift-on-hover :hover. */
    --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45);

    /* Focus halo — accent-green at 25% over 3px ring. */
    --ring-focus: 0 0 0 3px rgba(0, 212, 170, 0.25);

    /* Section vertical padding — clamp to viewport so mobile breathes too. */
    --space-section: clamp(48px, 8vw, 80px);
}

/* ── (b) Layout primitives ───────────────────────────────────────────────── */

/* Vertical stack with consistent gap. Default: --space-4 (16px). */
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.stack-lg { display: flex; flex-direction: column; gap: var(--space-8); }

/* Horizontal cluster with wrap. */
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.cluster-sm { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Surface — a card-like panel. Different from app.css .card so legacy
   .card consumers aren't affected; this is the new opt-in surface. */
.surface {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}
.surface-elevated {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-lift);
}

/* Section-level vertical padding. */
.section-pad { padding-block: var(--space-section); }

/* Subtle horizontal divider with vertical breathing room. */
.divider {
    border: 0;
    border-top: 1px solid var(--border-subtle);
    margin-block: var(--space-6);
}

/* ── (c) Component utilities ─────────────────────────────────────────────── */

/* Pill modifier on .btn — apply alongside .btn .btn-primary etc.
   Existing .btn-sm / .btn-lg sizes still work; pill sets only radius. */
.btn-pill {
    border-radius: var(--radius-pill);
    padding: 10px 20px;
}
.btn-pill.btn-sm { padding: 6px 14px; }
.btn-pill.btn-lg { padding: 14px 28px; }

/* Display type for hero numerals / large readouts. */
.text-display {
    font-family: var(--font-display);
    letter-spacing: -0.01em;
}

/* Eyebrow label — small uppercase tag above a heading. */
.text-eyebrow {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-family: var(--font-display);
}

/* Semantic numeric coloring — pair with tabular-nums for column alignment. */
.gain {
    color: var(--color-gain);
    font-variant-numeric: tabular-nums;
}
.loss {
    color: var(--color-loss);
    font-variant-numeric: tabular-nums;
}

/* Reserved slot for an inline sparkline SVG (Phase 2 will populate). */
.sparkline-slot {
    display: block;
    width: 100%;
    height: 32px;
}

/* Hover lift — opt-in via class, no surprise on existing markup. */
.lift-on-hover {
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
    will-change: transform;
}
.lift-on-hover:hover {
    transform: translateY(-2px);
    border-color: var(--text-muted);
    box-shadow: var(--shadow-lift);
}

/* Keyboard-only focus ring. :focus-visible only, so mouse clicks stay clean. */
.focus-ring:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* Tabular numerals utility — for stat values that align in columns. */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .lift-on-hover { transition: none; }
    .lift-on-hover:hover { transform: none; }
}

/* ── Preview-page chrome (only used by /design-preview.php) ──────────────── */
/* Side-by-side comparison rows. Keeps preview lab visually obvious so
   nobody mistakes it for a live production page. */
.preview-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.preview-row__title {
    grid-column: 1 / -1;
    font-family: var(--font-display);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 var(--space-3);
}
.preview-row__title strong {
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
    margin-right: var(--space-2);
}
.preview-pane {
    background: var(--bg-base);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: relative;
    min-height: 120px;
}
.preview-pane__label {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    pointer-events: none;
}
.preview-pane--current .preview-pane__label {
    color: var(--text-secondary);
}
.preview-pane--polished .preview-pane__label {
    color: var(--accent-green);
    border-color: rgba(0, 212, 170, 0.3);
}
.preview-banner {
    background: linear-gradient(135deg, rgba(0, 212, 170, 0.08), rgba(59, 130, 246, 0.05));
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-green);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-6) 0;
}
.preview-banner__title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 var(--space-2);
}
.preview-banner__sub {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .preview-row { grid-template-columns: 1fr; }
}