@charset "utf-8";

/* ===========================
   GUEL Brand Tokens
   warm / minimal / clean
   =========================== */

:root {
    --guel-bg: #F8F5EF;
    --guel-surface: #FFFDF9;
    --guel-surface-2: #F5F1E8;
    --guel-border: #E9E2D6;
    --guel-border-strong: #D9D1C4;

    --guel-text: #4A443D;
    --guel-text-soft: #625B54;
    --guel-text-muted: #8F877D;

    --guel-on-primary: #FFFFFF;
    --guel-primary: #0C4B3C;
    --guel-primary-hover: #145847;
    --guel-primary-soft: rgba(12, 75, 60, 0.08);
}

    /* radius */
    --guel-radius-xs: 4px;
    --guel-radius-sm: 8px;
    --guel-radius-md: 12px;
    --guel-radius-lg: 18px;
    --guel-radius-xl: 24px;
    --guel-radius-pill: 999px;

    /* size */
    --guel-btn-h: 42px;
    --guel-btn-h-sm: 34px;
    --guel-input-h: 44px;
    --guel-chip-h: 30px;
    --guel-icon-sm: 16px;
    --guel-icon-md: 18px;

    /* typography */
    --guel-fs-12: 12px;
    --guel-fs-13: 13px;
    --guel-fs-14: 14px;
    --guel-fs-15: 15px;
    --guel-fs-16: 16px;
    --guel-fs-18: 18px;
    --guel-fs-20: 20px;
    --guel-fs-24: 24px;
    --guel-fs-32: 32px;

    --guel-lh-base: 1.7;
    --guel-lh-tight: 1.35;

    /* shadow */
    --guel-shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.04);
    --guel-shadow-md: 0 10px 30px rgba(15, 23, 42, 0.06);

    /* transition */
    --guel-transition: 0.2s ease;
}

@media (max-width: 768px) {
    :root {
        --guel-btn-h: 40px;
        --guel-btn-h-sm: 32px;
        --guel-input-h: 42px;
        --guel-chip-h: 28px;
    }
}