/*
 * OPYNARI Design System — Public UI Foundation
 * Phase 1: typography + spacing tokens.
 *
 * New public modules should consume these variables instead of
 * creating isolated font and spacing values.
 */

:root {
    /* Typography */
    --opy-font-eyebrow: 12px;
    --opy-font-subtitle: 10px;
    --opy-font-label: 13px;
    --opy-font-body: 16px;
    --opy-font-button: 14px;
    --opy-font-card-title: 21px;
    --opy-font-metric: 28px;
    --opy-font-section-title: clamp(32px, 2.7vw, 40px);
    --opy-font-hero: clamp(48px, 5.1vw, 78px);

    /* Layout */
    --opy-content-max: 1280px;
    --opy-page-gutter: 22px;

    /* Spacing */
    --opy-page-margin: clamp(76px, 7vw, 132px);
    --opy-section-space: 56px;
    --opy-section-space-compact: 40px;
    --opy-card-gap: 14px;

    /* Radius */
    --opy-radius-button: 12px;
    --opy-radius-card: 16px;
    --opy-radius-panel: 22px;

    /* Core public colors */
    --opy-navy: #06172f;
    --opy-blue: #1766b0;
    --opy-cyan: #53c7ff;
    --opy-light-blue: #8ec5ff;

    /* Approved public surfaces */
    --opy-surface-hero:
        radial-gradient(circle at 17% 15%, rgba(51,137,218,.31), transparent 33%),
        radial-gradient(circle at 82% 28%, rgba(83,199,255,.13), transparent 24%),
        linear-gradient(135deg,#06172f 0%,#0a315d 56%,#135a9a 100%);

    --opy-surface-navy:
        radial-gradient(circle at 82% 18%, rgba(23,102,176,.22), transparent 30%),
        linear-gradient(135deg,#06172f 0%,#0a3157 100%);

    --opy-surface-white: #ffffff;
}

@media (max-width: 980px) {
    :root {
        --opy-page-margin: 42px;
        --opy-page-gutter: 28px;
    }
}

@media (max-width: 640px) {
    :root {
        --opy-page-margin: 22px;
        --opy-page-gutter: 20px;
        --opy-font-body: 15px;
        --opy-font-button: 13px;
    }
}