/**
 * Aylaobuy Design System — Warm Laos Premium
 * 只包含设计 Token（CSS 变量），不包含任何具体页面/组件样式。
 * components.css / layout.css / home.css / product.css / mobile.css 均基于这里的变量。
 */

:root{
    /* ── 颜色 Token ── */
    --ay-red:#B5482A;
    --ay-orange:#F97316;
    --ay-saffron:#F59E0B;
    --ay-gold:#D4A63C;
    --ay-ivory:#FFF8EE;
    --ay-blue:#173B63;
    --ay-mekong:#2F6B5B;
    --ay-clay:#B85C38;
    --ay-ink:#1D1B16;
    --ay-muted:#7C6F63;
    --ay-border:#E7DCC8;
    --ay-surface:#FFFDF8;

    --ay-success:#2F6B5B;
    --ay-danger:#A3271F;
    --ay-warning:#8A5A12;

    --ay-gradient-brand: linear-gradient(135deg, var(--ay-red), var(--ay-orange));
    --ay-gradient-hero: linear-gradient(115deg, var(--ay-blue) 0%, var(--ay-red) 48%, var(--ay-gold) 100%);
    --ay-gradient-gold: linear-gradient(135deg, var(--ay-red), var(--ay-gold));
    --ay-gradient-warm: linear-gradient(135deg, var(--ay-red), var(--ay-orange), var(--ay-gold));

    /* ── 字体 Token ── */
    --font-family-base: Arial, "Microsoft YaHei", sans-serif;
    --font-size-xs: 11px;
    --font-size-sm: 13px;
    --font-size-base: 15px;
    --font-size-md: 18px;
    --font-size-lg: 22px;
    --font-size-xl: 28px;
    --font-size-xxl: 34px;
    --font-weight-normal: 400;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-black: 900;
    --line-height-tight: 1.3;
    --line-height-base: 1.6;
    --line-height-loose: 1.8;

    /* ── 圆角 Token ── */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-pill: 999px;

    /* ── 间距 Token（模块之间的统一节奏）── */
    --space-xs: 8px;
    --space-sm: 12px;
    --space-md: 20px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* ── 阴影 Token ── */
    --ay-shadow: 0 12px 28px rgba(29,27,22,.08);
    --shadow-sm: 0 3px 8px rgba(29,27,22,.06);
    --shadow-md: 0 10px 22px rgba(184,92,56,.16);
    --shadow-lg: 0 16px 36px rgba(29,27,22,.10);
    --shadow-hero: 0 14px 26px rgba(181,72,42,.28);

    /* ── 动效 Token（统一 Hover 动画节奏）── */
    --transition-base: .18s ease;
    --hover-lift: -3px;

    /* ── 按钮 Token ── */
    --btn-radius: var(--radius-md);
    --btn-padding-y: 12px;
    --btn-padding-x: 20px;
    --btn-font-weight: var(--font-weight-black);
    --btn-font-size: var(--font-size-base);
    --btn-primary-bg: var(--ay-gradient-brand);
    --btn-primary-color: #fff;
    --btn-secondary-bg: transparent;
    --btn-secondary-border: 1.5px solid var(--ay-border);
    --btn-secondary-color: var(--ay-muted);
    --btn-accent-bg: var(--ay-blue);
    --btn-accent-color: #fff;

    /* ── 卡片 Token ── */
    --card-bg: var(--ay-surface);
    --card-border: 1px solid var(--ay-border);
    --card-radius: var(--radius-lg);
    --card-shadow: var(--ay-shadow);
    --card-padding: 20px;

    /* ── 输入框 Token ── */
    --input-bg: #fff;
    --input-border: 1px solid #E4D9C2;
    --input-radius: var(--radius-md);
    --input-padding-y: 11px;
    --input-padding-x: 14px;
    --input-font-size: var(--font-size-base);
    --input-focus-border: var(--ay-gold);

    /* ── Header Token ── */
    --header-bg: #FFFFFF;
    --header-shadow: 0 2px 14px rgba(23,59,99,.07);
    --header-padding: 16px 18px;
    --header-link-color: var(--ay-blue);
    --header-link-hover: var(--ay-red);

    /* ── Hero Token ── */
    --hero-bg: var(--ay-gradient-hero);
    --hero-color: #fff;
    --hero-subtext-color: #FCEFDC;
    --hero-badge-color: #F6DFAE;
    --hero-padding: 44px 18px 48px;
    --hero-title-size: var(--font-size-xxl);
}