/* ============================================
   AcornPets 独立站 UI 设计令牌系统 v1.0
   ============================================
   将此文件引入独立站项目即可获得全套设计变量。
   使用方式: <link rel="stylesheet" href="acornpets-design-tokens.css">
   ============================================ */

/* === Google Fonts === */
/* Fonts loaded via wp_enqueue_style in functions.php — do not duplicate here */

:root {
  /* ============================================
     1. 品牌色系 (Brand Colors)
     ============================================ */

  /* Logo 核心 — 不可修改 */
  --acorn-brown: #8C5032;       /* 主品牌色 / 标题文字 / 主按钮 */
  --acorn-gold: #BE965A;        /* 辅品牌色 / 装饰 / 按钮悬停 */
  --acorn-dark: #5C3D1F;        /* 深色背景 / 页脚 / 水印 */
  --logo-black: #1A1A1A;        /* 正文主色 */
  --cream-white: #FFF8E7;       /* 页面主背景 */
  --ivory-highlight: #FAF6EB;   /* 高光区域 / 卡片背景 */
  --trust-navy: #2C5F7C;        /* B2B 信任色 / 认证 / 数据表 */

  /* 强调色 — 主用 */
  --joy-yellow: #F5C76A;        /* CTA 点缀 / 季节标签 (配深色字) */
  --mint-green: #A8C9A0;        /* 环保系列 / 天然标识 */

  /* 强调色 — 季节皮肤专用 */
  --terracotta: #A8553B;        /* 仅秋冬皮肤 */
  --sky-blue: #8BBFDE;          /* 仅夏季皮肤 */
  --soft-rose: #D9AFA3;         /* 仅节日皮肤 */

  /* 语义色 */
  --success: #22A66C;           /* 成功 / 已认证 / 库存充足 */
  --warning: #E4A11B;           /* 警告 / 低库存 / 限时 */
  --error: #D84A4A;             /* 错误 / 缺货 / 必填项 */
  --info-blue: #3B82F6;         /* 信息提示 / 链接 */

  /* ============================================
     2. 冷灰阶 (Cool Gray Scale — 欧美优化)
     ============================================ */
  --gray-50: #F8FAFC;           /* 最浅背景 */
  --gray-100: #F1F5F9;          /* 卡片悬停背景 */
  --gray-200: #E2E8F0;          /* 分隔背景 */
  --gray-300: #CBD5E1;          /* 浅色边框 */
  --gray-400: #94A3B8;          /* 边框 / 分隔线 */
  --gray-500: #64748B;          /* 占位符 / 禁用文字 */
  --gray-600: #475569;          /* 正文 / 说明文字 */
  --gray-700: #334155;          /* 次级标题 */
  --gray-800: #1E293B;          /* 主要标题 */
  --gray-900: #111827;          /* 最深文字 / 深色模式背景 */

  /* ============================================
     3. 语义快捷别名 (Semantic Aliases)
     ============================================ */
  --color-primary: var(--acorn-brown);
  --color-primary-hover: var(--acorn-gold);
  --color-secondary: var(--trust-navy);
  --color-dark: var(--acorn-dark);
  --color-text: var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-text-light: var(--gray-500);
  --color-border: var(--gray-300);
  --color-bg: var(--cream-white);
  --color-bg-alt: var(--ivory-highlight);
  --color-bg-card: #FFFFFF;
  --color-bg-footer: var(--acorn-dark);

  /* ============================================
     4. 字体系统 (Typography)
     ============================================ */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  /* 字号 Token */
  --text-hero: 3rem;            /* 48px — Hero 主标题 */
  --text-h1: 2.25rem;           /* 36px — 页面标题 */
  --text-h2: 1.75rem;           /* 28px — 板块标题 */
  --text-h3: 1.375rem;          /* 22px — 子标题 */
  --text-product: 1.25rem;      /* 20px — 产品卡标题 */
  --text-body: 0.9375rem;       /* 15px — 正文 */
  --text-body-sm: 0.8125rem;    /* 13px — 规格表/元信息 */
  --text-caption: 0.6875rem;    /* 11px — 标签/说明 (大写) */
  --text-price: 1.75rem;        /* 28px — 价格数字 */
  --text-button: 0.875rem;      /* 14px — 按钮文字 */
  --text-nav: 0.875rem;         /* 14px — 导航菜单 */
  --text-table-head: 0.8125rem; /* 13px — 表头 (大写) */
  --text-table-body: 0.875rem;  /* 14px — 表格内容 */

  /* 字重 */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* 行高 */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* 字间距 */
  --tracking-tight: -1px;
  --tracking-snug: -0.5px;
  --tracking-normal: 0;
  --tracking-wide: 0.3px;
  --tracking-wider: 0.8px;

  /* ============================================
     5. 间距系统 (Spacing — 4px 基准)
     ============================================ */
  --space-0: 0;
  --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 */
  --space-16: 4rem;             /* 64px */
  --space-20: 5rem;             /* 80px */
  --space-24: 6rem;             /* 96px */

  /* ============================================
     6. 圆角系统 (Border Radius)
     ============================================ */
  --radius-sm: 0.25rem;         /* 4px — 小按钮/标签 */
  --radius-md: 0.375rem;        /* 6px — 输入框 */
  --radius-lg: 0.5rem;          /* 8px — 卡片 */
  --radius-xl: 0.75rem;         /* 12px — 大卡片/弹窗 */
  --radius-2xl: 1rem;           /* 16px — Hero 区块 */
  --radius-full: 9999px;        /* 圆形/胶囊 */

  /* ============================================
     7. 阴影系统 (Shadows)
     ============================================ */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.03);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.05);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.05);
  --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);

  /* 品牌色阴影 — 用于 CTA 按钮 */
  --shadow-primary: 0 4px 14px 0 rgb(140 80 50 / 0.25);
  --shadow-primary-hover: 0 6px 20px 0 rgb(190 150 90 / 0.3);
  --shadow-trust: 0 4px 14px 0 rgb(44 95 124 / 0.25);

  /* ============================================
     8. 过渡动画 (Transitions)
     ============================================ */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;
  --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================
     9. 布局系统 (Layout)
     ============================================ */

  /* 断点 */
  --bp-mobile: 375px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1280px;
  --bp-ultrawide: 1536px;

  /* 容器最大宽度 */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  /* 容器内边距 */
  --container-padding-mobile: 1rem;    /* 16px */
  --container-padding-tablet: 1.5rem;  /* 24px */
  --container-padding-desktop: 2rem;   /* 32px */

  /* 栅格 */
  --grid-columns: 12;
  --grid-gap: 1.5rem;                  /* 24px */
  --grid-gap-sm: 1rem;                 /* 16px */

  /* ============================================
     10. 层级系统 (Z-Index)
     ============================================ */
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;

  /* ============================================
     11. 组件尺寸 (Component Sizes)
     ============================================ */

  /* 按钮 */
  --btn-height-sm: 2rem;        /* 32px */
  --btn-height-md: 2.5rem;      /* 40px */
  --btn-height-lg: 3rem;        /* 48px */
  --btn-height-xl: 3.5rem;      /* 56px */
  --btn-padding-x-sm: 0.75rem;
  --btn-padding-x-md: 1.25rem;
  --btn-padding-x-lg: 1.75rem;
  --btn-padding-x-xl: 2.25rem;

  /* 输入框 */
  --input-height-sm: 2rem;
  --input-height-md: 2.5rem;
  --input-height-lg: 3rem;

  /* 导航栏 */
  --nav-height: 4.5rem;         /* 72px */
  --nav-height-mobile: 3.5rem;  /* 56px */

  /* 卡片 */
  --card-padding: 1.5rem;       /* 24px */
  --card-padding-sm: 1rem;      /* 16px */

  /* 圆角图片 */
  --image-radius: 0.5rem;       /* 8px */
}

/* ============================================
   响应式字号缩放
   ============================================ */
@media (max-width: 768px) {
  :root {
    --text-hero: 1.75rem;       /* 28px */
    --text-h1: 1.5rem;          /* 24px */
    --text-h2: 1.25rem;         /* 20px */
    --text-h3: 1.125rem;        /* 18px */
    --text-product: 1rem;       /* 16px */
    --text-body: 0.875rem;      /* 14px */
    --text-price: 1.375rem;     /* 22px */
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --text-hero: 2.25rem;       /* 36px */
    --text-h1: 1.875rem;        /* 30px */
    --text-h2: 1.5rem;          /* 24px */
    --text-h3: 1.25rem;         /* 20px */
    --text-product: 1.125rem;   /* 18px */
    --text-price: 1.5rem;       /* 24px */
  }
}

/* ============================================
   暗色模式 (可选)
   ============================================ */
[data-theme="dark"] {
  --color-bg: var(--gray-900);
  --color-bg-alt: var(--gray-800);
  --color-bg-card: var(--gray-800);
  --color-text: #F1F5F9;
  --color-text-muted: var(--gray-400);
  --color-text-light: var(--gray-500);
  --color-border: var(--gray-700);
  --color-bg-footer: #0A0F1A;
}