/* =========================================================================
   VARIABLES — Design tokens Bánh Mì Quảng Bình
   Suy ra từ mockup home.png (976 × 1612 px, ảnh đã downscale).

   Reference CSS viewport ....... 1320px
   Hệ số quy đổi mockup -> CSS ... 1320 / 976 = 1.3525
   Global content container ..... 1200px  (888px trên mockup × 1.3525)
   Desktop gutter ............... 60px    (44px trên mockup × 1.3525)
   ========================================================================= */

:root {
    /* ---------- Màu thương hiệu ---------- */
    --c-red: #bd231e;
    --c-red-dark: #9c1a16;
    --c-red-bright: #c62723;
    --c-green: #237922;
    --c-green-dark: #1b5f1a;

    /* ---------- Nâu / chữ ---------- */
    --c-brown-900: #351c14;   /* nền footer */
    --c-brown-800: #4a2418;
    --c-heading: #422016;     /* tiêu đề lớn */
    --c-text: #3b3733;        /* chữ thân bài */
    --c-muted: #6f655d;       /* chữ phụ */
    --c-icon: #a3441f;        /* icon nét nâu cam */

    /* ---------- Nền ---------- */
    /* Do tren mockup: nen body giua cac khoi #f1e9de..#f4ede3,
       nen khoi #f6f2ed..#f8f5f1 -> chenh nhau rat it. */
    --c-paper: #f2eae0;       /* nền body (giấy ấm) */
    --c-panel: #f8f4ef;       /* nền các khối section */
    --c-panel-warm: #f7f1e8;  /* nền khối "Vì sao" */
    --c-card: #fdfbf9;        /* nền card trắng */
    --c-cream: #faeedf;       /* nền trái của hero */
    --c-border: #e7dccf;
    --c-border-soft: #efe6dc;

    /* ---------- Chữ trên nền tối ---------- */
    --c-on-dark: #f6ede2;
    --c-on-dark-muted: #d9c9bb;

    /* ---------- Layout ---------- */
    --container-max: 1200px;
    --container-gutter: 60px;
    /* Khối panel bo góc rộng hơn container 40px mỗi bên (giống thanh header) */
    --panel-max: 1280px;
    --panel-pad-x: 40px;
    --header-h: 81px;         /* chiều cao thanh header nổi */
    --header-offset: 11px;    /* khoảng cách header với mép trên */

    /* ---------- Font ---------- */
    --font-sans: "Be Vietnam Pro", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-script: "Dancing Script", "Be Vietnam Pro", cursive;

    /* ---------- Thang chữ (desktop) ---------- */
    --fs-hero-h1: 76px;
    --fs-hero-accent: 54px;
    --fs-hero-lead: 19px;
    --fs-h1: 44px;
    --fs-h2: 34px;
    --fs-h3: 25px;
    --fs-h4: 20px;
    --fs-body: 18px;
    --fs-body-sm: 17px;
    --fs-nav: 17px;
    --fs-btn: 18px;
    --fs-btn-sm: 16px;
    --fs-small: 15px;
    --fs-meta: 14px;
    --fs-eyebrow: 14px;

    /* ---------- Line height ---------- */
    --lh-display: 1.06;
    --lh-heading: 1.22;
    --lh-body: 1.62;
    --lh-tight: 1.45;

    /* ---------- Bo góc ---------- */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 18px;
    --radius-lg: 20px;
    --radius-panel: 28px;
    --radius-pill: 999px;

    /* ---------- Đổ bóng ---------- */
    --shadow-xs: 0 1px 2px rgba(83, 56, 38, .04);
    --shadow-sm: 0 2px 8px rgba(83, 56, 38, .05);
    --shadow-md: 0 8px 22px rgba(83, 56, 38, .08);
    --shadow-lg: 0 18px 44px rgba(83, 56, 38, .12);
    --shadow-red: 0 10px 24px rgba(189, 35, 30, .28);

    /* ---------- Nhịp dọc ---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 44px;
    --space-8: 60px;
    --space-9: 80px;

    /* ---------- Chuyển động ---------- */
    --ease: cubic-bezier(.4, .14, .3, 1);
    --dur: .25s;
}