/*
 * GOMGOM compact design tokens
 * Values only: no selectors other than :root and no component styling.
 */

:root {
    --gomgom-color-ink: #111111;
    --gomgom-color-paper: #ffffff;
    --gomgom-color-canvas: #f5f4f1;
    --gomgom-color-violet: #7750f8;
    --gomgom-color-coral: #ff6b61;
    --gomgom-color-line: rgba(17, 17, 17, .10);
    --gomgom-color-muted: rgba(17, 17, 17, .56);
    --gomgom-app-max-width: 448px;
    --gomgom-header-height: 76px;
    --gomgom-bottom-nav-height: 82px;
    --gomgom-page-gutter: 20px;
    --gomgom-section-gap: 28px;
    --gomgom-card-radius: 26px;
    --gomgom-control-radius: 999px;
    --gomgom-shadow-card: 0 12px 34px rgba(17, 17, 17, .07);
    --gomgom-shadow-floating: 0 16px 42px rgba(17, 17, 17, .13);
    --gomgom-safe-top: env(safe-area-inset-top, 0px);
    --gomgom-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Temporary compatibility aliases for legacy shared components. */
    --w: var(--gomgom-color-paper, #fff);
    --b: var(--gomgom-color-ink, #111);
    --v: var(--gomgom-color-violet, #7750f8);
    --c: var(--gomgom-color-coral, #ff6b61);
    --line: var(--gomgom-color-line, rgba(17, 17, 17, .10));
    --muted: var(--gomgom-color-muted, rgba(17, 17, 17, .56));
    --soft: color-mix(in srgb, var(--b) 4%, var(--w));
    --shadow: var(--gomgom-shadow-floating, 0 16px 42px rgba(17, 17, 17, .13));
}

@media (max-width: 359px) {
    :root {
        --gomgom-page-gutter: 16px;
    }
}