/**
 * APP DESIGN TOKENS (Level 2)
 *
 * Design tokens pro App sekci (Iris, budoucí nástroje)
 * Importuje global-tokens.css automaticky přes PageLayout
 *
 * Hierarchie:
 * global-tokens.css → app-tokens.css → (page-specific)
 *
 * Přepisuje:
 * - Terminal glow effect na page-container
 *
 * Used by:
 * - AppLayout.astro
 */

/* ============================================
   TERMINAL GLOW TOKENS
   ============================================ */

:root {
    /* Glow color (terminal light from edges) */
    --app-glow-color: rgba(204, 204, 255, 0.08);  /* Light blue tint */

    /* Glow intensity for each edge */
    --app-glow-horizontal: 25px;   /* Left/right glow depth */
    --app-glow-vertical: 20px;    /* Top/bottom glow depth */

    /* Border radius for terminal screen effect */
    --app-border-radius: 8px;
}


/* ============================================
   PAGE CONTAINER OVERRIDES
   ============================================ */

.page-container {
    /* Rounded corners for terminal screen effect */
    border-radius: var(--app-border-radius);
    overflow: hidden;  /* Clip content to rounded corners */
}

/* Terminal glow effect - light from edges inward */
.page-container::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;

    /* Combined gradients: horizontal (left+right) and vertical (top+bottom) */
    background:
        /* Left edge */
        linear-gradient(to right, var(--app-glow-color), transparent var(--app-glow-horizontal)),
        /* Right edge */
        linear-gradient(to left, var(--app-glow-color), transparent var(--app-glow-horizontal));
        /* Top edge */
        /* linear-gradient(to bottom, var(--app-glow-color), transparent var(--app-glow-vertical)),
        /* Bottom edge */
        /* linear-gradient(to top, var(--app-glow-color), transparent var(--app-glow-vertical)); */
}