@import url('/public/fonts/fonts.css');

/* ==========================================================================
   DESIGN TOKENS — VỊ NHÀ MÌNH
   Ẩm thực miền Tây & Nam Bộ
   Bảng màu: đất nung, lá chuối, vàng nghệ, nền giấy gạo
   ========================================================================== */

:root {
  /* ——— FONT FAMILIES ——— */
  /* Heading: Lora (cổ điển, ấm cúng, hỗ trợ tiếng Việt trọn vẹn, không lỗi dấu); Body: Be Vietnam Pro */
  --font-heading: 'Lora', 'Be Vietnam Pro', Georgia, serif;
  --font-body:    'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Alias giữ tương thích code cũ */
  --font-family: var(--font-body);

  /* ——— PALETTE SÁNG (LIGHT THEME — MẶC ĐỊNH) ——— */
  /* Gạch Bát Tràng / Đất nung — màu nhấn chính */
  --color-primary:          #B5472A;
  --color-primary-hover:    #96381F;
  --color-primary-light:    #F6E3DA;
  --color-primary-contrast: #FFFFFF;

  /* Xanh lá chuối / lá vườn miền Tây */
  --color-secondary:        #3F6B3A;
  --color-secondary-hover:  #2F5530;
  --color-secondary-light:  #E3EEDD;

  /* Vàng nghệ / hoa điên điển */
  --color-accent:           #E3A72F;
  --color-accent-light:     #FDF3D8;

  /* Nền & surface */
  --color-bg:               #FBF6EC; /* trắng ngà — giấy gạo */
  --color-surface:          #FFFFFF;
  --color-surface-hover:    #F7F0E4;
  --color-surface-alt:      #F3EADB; /* nâu nhạt */

  /* Chữ */
  --color-text-main:        #2B1D14; /* nâu cà phê đậm */
  --color-text-muted:       #6B5A4C; /* nâu trung */
  --color-text-light:       #7A6556; /* gợi ý, placeholder */

  /* Viền */
  --color-border:           #E6D9C4;
  --color-border-focus:     #B5472A;

  /* Trạng thái */
  --color-success:          #2E7D32;
  --color-success-bg:       #E8F5E9;
  --color-warning:          #E3A72F;
  --color-warning-bg:       #FDF3D8;
  --color-danger:           #C62828;
  --color-danger-bg:        #FFEBEE;
  --color-info:             #1565C0;
  --color-info-bg:          #E3F2FD;

  /* ——— TYPE SCALE (fluid) ——— */
  --text-xs:   0.8125rem;  /* 13px */
  --text-sm:   0.9375rem;  /* 15px */
  --text-md:   1rem;       /* 16px */
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  --text-2xl:  clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --text-hero: clamp(2.25rem, 1.5rem + 4vw, 4rem);

  /* ——— SPACING (base 4px) ——— */
  --space-1:  0.25rem;  /* 4px */
  --space-2:  0.5rem;   /* 8px */
  --space-3:  0.75rem;  /* 12px */
  --space-4:  1rem;     /* 16px */
  --space-5:  1.25rem;  /* 20px */
  --space-6:  1.5rem;   /* 24px */
  --space-8:  2rem;     /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */

  /* ——— BORDER RADIUS ——— */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ——— SHADOWS (Elevations) ——— */
  --shadow-sm: 0 1px 3px rgba(43, 29, 20, 0.07), 0 1px 2px rgba(43, 29, 20, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(43, 29, 20, 0.09), 0 2px 4px -2px rgba(43, 29, 20, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(43, 29, 20, 0.09), 0 4px 6px -4px rgba(43, 29, 20, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(43, 29, 20, 0.11), 0 8px 10px -6px rgba(43, 29, 20, 0.06);
  --shadow-glow: 0 0 20px rgba(181, 71, 42, 0.22);

  /* ——— MOTION TOKENS ——— */
  /* Easing curves — theo chuẩn review-animations */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);     /* nút, card hover, modal vào */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);    /* di chuyển trên màn hình */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);     /* drawer/bottom sheet */
  /* KHÔNG dùng ease-in cho UI (cấm theo spec) */

  /* Duration */
  --dur-press:   160ms;  /* nút nhấn, chip */
  --dur-popover: 200ms;  /* tooltip, dropdown nhỏ */
  --dur-modal:   250ms;  /* modal, dialog */
  --dur-drawer:  400ms;  /* drawer, bottom sheet */

  /* Alias giữ tương thích */
  --transition-fast:   150ms var(--ease-out);
  --transition-normal: 250ms var(--ease-out);
  --transition-slow:   400ms var(--ease-drawer);

  /* ——— LAYOUT ——— */
  --container-max-width: 1240px;
  --header-height:       68px;
}

/* ——— DARK MODE — tông nâu than ấm ——— */
[data-theme="dark"] {
  --color-primary:          #D4684A; /* gạch sáng hơn trên nền tối */
  --color-primary-hover:    #B5472A;
  --color-primary-light:    rgba(181, 71, 42, 0.18);
  --color-primary-contrast: #FFFFFF;

  --color-secondary:        #5A9154;
  --color-secondary-hover:  #3F6B3A;
  --color-secondary-light:  rgba(63, 107, 58, 0.2);

  --color-accent:           #F0BE55;
  --color-accent-light:     rgba(227, 167, 47, 0.18);

  --color-bg:               #17110C; /* nâu than tối */
  --color-surface:          #241A12; /* thẻ card */
  --color-surface-hover:    #2E2018;
  --color-surface-alt:      #1E160F;

  --color-text-main:        #F5EDE3; /* kem nhạt */
  --color-text-muted:       #B09880;
  --color-text-light:       #7A6555;

  --color-border:           #3D2C1F;
  --color-border-focus:     #D4684A;

  --color-success:          #66BB6A;
  --color-success-bg:       rgba(102, 187, 106, 0.15);
  --color-warning:          #F0BE55;
  --color-warning-bg:       rgba(240, 190, 85, 0.15);
  --color-danger:           #EF5350;
  --color-danger-bg:        rgba(239, 83, 80, 0.15);
  --color-info:             #42A5F5;
  --color-info-bg:          rgba(66, 165, 245, 0.15);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.65);
  --shadow-xl: 0 20px 30px rgba(0, 0, 0, 0.75);
  --shadow-glow: 0 0 25px rgba(212, 104, 74, 0.3);
}