/*
 * OPYNARI / AEP Design System — Core Tokens
 * Foundation v1.0
 *
 * Rule: normal UI typography uses 400–600. Weight 700 is reserved for
 * major display/page titles that already carry the strongest hierarchy.
 */

@font-face {
    font-family: 'DM Sans';
    src: url('../../../fonts/dm-sans/DMSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../../../fonts/dm-sans/DMSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* DM Sans ships without a dedicated SemiBold file in this plugin.
 * Reuse the Medium master at 600 so browsers do not synthesize an artificial weight.
 */
@font-face {
    font-family: 'DM Sans';
    src: url('../../../fonts/dm-sans/DMSans-Medium.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('../../../fonts/dm-sans/DMSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Typography */
    --opy-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --opy-font-micro: 12px;
    --opy-font-label: 13px;
    --opy-font-secondary: 14px;
    --opy-font-body: 16px;
    --opy-font-strong: 17px;
    --opy-font-card-title: 20px;
    --opy-font-section-sm: 24px;
    --opy-font-section: 30px;
    --opy-font-page-title: 38px;

    --opy-weight-regular: 400;
    --opy-weight-medium: 500;
    --opy-weight-semibold: 600;
    --opy-weight-display: 700;

    --opy-line-tight: 1.2;
    --opy-line-heading: 1.3;
    --opy-line-body: 1.55;

    /* Spacing */
    --opy-space-1: 4px;
    --opy-space-2: 8px;
    --opy-space-3: 12px;
    --opy-space-4: 16px;
    --opy-space-5: 20px;
    --opy-space-6: 24px;
    --opy-space-7: 32px;
    --opy-space-8: 40px;
    --opy-space-9: 48px;
    --opy-space-10: 64px;

    /* Layout */
    --opy-content-max: 1280px;
    --opy-reading-max: 920px;
    --opy-page-gutter: 22px;
    --opy-section-space: 56px;
    --opy-section-space-compact: 40px;
    --opy-card-gap: 14px;

    /* Operational density */
    --opy-control-height: 40px;
    --opy-control-height-compact: 34px;
    --opy-control-pad-x: 12px;
    --opy-table-pad-y: 13px;
    --opy-table-pad-x: 14px;
    --opy-table-row-min: 48px;

    /* Radius */
    --opy-radius-sm: 8px;
    --opy-radius-md: 14px;
    --opy-radius-lg: 20px;
    --opy-radius-pill: 999px;

    /* Brand / semantic */
    --opy-navy: #06172f;
    --opy-blue: #1766b0;
    --opy-cyan: #53c7ff;
    --opy-light-blue: #8ec5ff;
    --opy-white: #ffffff;
    --opy-bg: #f5f8fc;
    --opy-surface: #ffffff;
    --opy-surface-soft: #f8fafc;
    --opy-text: #172133;
    --opy-text-muted: #687386;
    --opy-border: #dfe6ef;
    --opy-border-strong: #c8d3e0;
    --opy-success: #176b43;
    --opy-warning: #8a6200;
    --opy-danger: #a73535;
    --opy-info: #1766b0;
    --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;

    /* Shadows */
    --opy-shadow-sm: 0 4px 14px rgba(6, 23, 47, .05);
    --opy-shadow-md: 0 10px 28px rgba(6, 23, 47, .08);
    --opy-shadow-lg: 0 18px 46px rgba(6, 23, 47, .12);

    /* Motion */
    --opy-transition-fast: 160ms ease;
    --opy-transition: 220ms ease;

    /* Compatibility aliases for the earlier public design-system file. */
    --opy-font-eyebrow: 12px;
    --opy-font-subtitle: 12px;
    --opy-font-button: 14px;
    --opy-font-metric: 28px;
    --opy-font-section-title: clamp(32px, 2.7vw, 40px);
    --opy-font-hero: clamp(48px, 5.1vw, 78px);
    --opy-page-margin: clamp(76px, 7vw, 132px);
    --opy-radius-button: 12px;
    --opy-radius-card: 16px;
    --opy-radius-panel: 22px;
}

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

@media (max-width: 640px) {
    :root {
        --opy-page-margin: 22px;
        --opy-page-gutter: 20px;
        --opy-section-space: 32px;
        --opy-card-gap: 16px;
        --opy-font-body: 15px;
        --opy-font-button: 13px;
        --opy-font-page-title: 32px;
    }
}