/*
======================================================================
 ASCARS PLATFORM DESIGN TOKENS V1
 Central visual rules for developer/platform pages.
======================================================================
*/

:root {

    /* ---------------------------------------------------------------
       TEXT COLORS
    ---------------------------------------------------------------- */

    --as-text-primary: rgba(255, 255, 255, .96);
    --as-text-secondary: rgba(255, 255, 255, .74);
    --as-text-muted: rgba(255, 255, 255, .56);
    --as-text-subtle: rgba(255, 255, 255, .44);
    --as-text-faint: rgba(255, 255, 255, .30);


    /* ---------------------------------------------------------------
       TYPE SCALE
    ---------------------------------------------------------------- */

    --as-text-xs: 13px;
    --as-text-sm: 14px;
    --as-text-md: 16px;
    --as-text-lg: 20px;
    --as-text-xl: 24px;

    --as-heading-sm: 24px;
    --as-heading-md: 36px;
    --as-heading-lg: 50px;
    --as-heading-xl: 78px;


    /* ---------------------------------------------------------------
       FONT WEIGHTS
    ---------------------------------------------------------------- */

    --as-weight-normal: 400;
    --as-weight-medium: 500;
    --as-weight-semibold: 600;
    --as-weight-bold: 700;
    --as-weight-heavy: 800;


    /* ---------------------------------------------------------------
       LINE HEIGHT
    ---------------------------------------------------------------- */

    --as-line-tight: 1.10;
    --as-line-heading: 1.18;
    --as-line-normal: 1.55;
    --as-line-body: 1.70;


    /* ---------------------------------------------------------------
       SURFACES
    ---------------------------------------------------------------- */

    --as-panel-bg: rgba(4, 10, 17, .76);
    --as-panel-soft: rgba(255, 255, 255, .035);
    --as-panel-hover: rgba(255, 255, 255, .065);
    --as-panel-active: rgba(255, 255, 255, .085);

    --as-border: rgba(255, 255, 255, .10);
    --as-border-strong: rgba(255, 255, 255, .17);
    --as-divider: rgba(255, 255, 255, .065);


    /* ---------------------------------------------------------------
       RADIUS
    ---------------------------------------------------------------- */

    --as-radius-sm: 6px;
    --as-radius-md: 9px;
    --as-radius-lg: 13px;
    --as-radius-xl: 15px;


    /* ---------------------------------------------------------------
       SPACING
    ---------------------------------------------------------------- */

    --as-space-1: 6px;
    --as-space-2: 10px;
    --as-space-3: 14px;
    --as-space-4: 18px;
    --as-space-5: 24px;
    --as-space-6: 32px;
    --as-space-7: 48px;
    --as-space-8: 72px;
    --as-space-9: 105px;


    /* ---------------------------------------------------------------
       STANDARD LABELS
    ---------------------------------------------------------------- */

    --as-label-size: 12px;
    --as-label-spacing: .11em;

    --as-meta-size: 14px;
    --as-value-size: 15px;

    --as-code-size: 13px;
}


/*
======================================================================
 REUSABLE TYPOGRAPHY CLASSES
 New pages should use these directly.
======================================================================
*/

.as-label {
    font-size: var(--as-label-size);
    font-weight: var(--as-weight-bold);
    line-height: var(--as-line-normal);
    letter-spacing: var(--as-label-spacing);
    text-transform: uppercase;
    color: var(--as-text-muted);
}

.as-meta {
    font-size: var(--as-meta-size);
    line-height: var(--as-line-normal);
    color: var(--as-text-muted);
}

.as-body {
    font-size: var(--as-text-md);
    line-height: var(--as-line-body);
    color: var(--as-text-secondary);
}

.as-value {
    font-size: var(--as-value-size);
    font-weight: var(--as-weight-bold);
    line-height: var(--as-line-normal);
    color: var(--as-text-primary);
}

.as-section-title {
    font-size: clamp(
        var(--as-heading-md),
        4vw,
        var(--as-heading-lg)
    );

    line-height: var(--as-line-tight);
    letter-spacing: -.035em;

    color: var(--as-text-primary);
}

.as-card-title {
    font-size: var(--as-text-lg);
    font-weight: var(--as-weight-bold);
    color: var(--as-text-primary);
}

.as-code {
    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: var(--as-code-size);
    line-height: 1.7;

    color: var(--as-text-primary);
}