/* tokens.css — Design tokens dùng chung toàn hệ thống (xem style.md §7).
   Nạp SỚM trong views/layout.ejs (trước layout.css). Mọi feature nên dùng var(--...) thay hard-code hex. */
:root {
    /* Brand peach/coral (primary) */
    --primary-peach: #fad0c4;
    --primary-peach-hover: #fbc1b0;
    --accent: #d67d63;
    --accent-soft: #e59882;
    --text-main: #5c4b47;
    --text-muted: #8a7772;

    /* Nền & bề mặt */
    --bg-main: #fff7f5;
    --cream: #fffcfb;
    --peach-light: #fff5f2;
    --surface: #ffffff;
    --input-bg: #fffaf9;
    --bg-gradient: linear-gradient(135deg, #fffcfb 0%, #fff7f5 100%);
    --bg-hero: linear-gradient(135deg, #ffd6e6 0%, #fad0c4 55%, #ffe9b3 100%);

    /* Pastel accents cute */
    --pastel-pink: #ffd6e6;
    --pastel-rose: #ff9eb5;
    --pastel-yellow: #ffe9b3;
    --pastel-mint: #b8e0c8;
    --pastel-lavender: #e3d4f0;
    --pastel-sky: #cfe7f5;

    /* Viền */
    --border-soft: #ffe6e0;
    --border-peach: #fbc1b0;
    --border-glass: 1px solid rgba(255, 255, 255, 0.6);

    /* Shadow pastel (không đen) */
    --shadow-card: 0 8px 24px -10px rgba(250, 208, 196, 0.6);
    --shadow-soft: 0 10px 30px rgba(250, 208, 196, 0.3);
    --shadow-btn: 0 6px 18px rgba(250, 208, 196, 0.5);
    --shadow-pop: 0 10px 22px rgba(250, 208, 196, 0.7);

    /* Bo góc */
    --radius-pill: 999px;
    --radius-xl: 28px;
    --radius-lg: 24px;
    --radius-md: 18px;
    --radius-sm: 16px;

    /* Glass */
    --glass-blur: blur(12px);

    /* Semantic (pastel) */
    --success-bg: #e8f6ee; --success-fg: #1e6b42;
    --error-bg: #ffe6e0;   --error-fg: #b03b3b;
    --warning-bg: #fff5e6; --warning-fg: #9a6b1e;
    --info-bg: #eaf4fb;    --info-fg: #2c6b96;

    /* Font stacks */
    --font-display: 'Nunito', system-ui, sans-serif;
    --font-body: 'Comfortaa', 'Quicksand', 'Nunito', system-ui, sans-serif;
}