/* ============================================================
   RealMaster 房大师 — Design Tokens
   从 Figma 组件库提取并整理
   ============================================================ */

:root {
  /* ---------- 主色 / Red ---------- */
  --main-red: #E03131;              /* title / icon / 标签主色 */
  --secondary-red: #E74C3C;         /* 用于地图位置 */
  --bg-red: #FBE0EB;                /* 用于标签背景色 */

  /* ---------- Green（合并：保留 #5CB85C 主用 + #BFF8E5 浅底） ---------- */
  --main-green: #5CB85C;            /* 价格 / 预约 / 验真 / 积极反馈 */
  --bg-green: #BFF8E5;              /* 边框 / 背景 */
  --bg-green-2: #F1F8EC;            /* 浅底背景 */

  /* ---------- Blue ---------- */
  --main-blue: #0388CA;             /* 按钮 / 链接 / 次要操作 */
  --secondary-blue: #2752B3;        /* 统计 / 深蓝强调 */
  --secondary-blue-2: #D1E1F1;      /* 统计 / 新闻 Tag 底色 */
  --bg-blue: #84C9E5;               /* 标签背景色 */

  /* ---------- Gold ---------- */
  --secondary-yellow: #F0931C;      /* 房源详情 / 学校 / 星数 */
  --secondary-yellow-1: #FFC001;    /* 统计强调（仅用于图形，勿做文字） */
  --secondary-yellow-2: #FFF1DD;    /* 票据 / 提示背景 */

  /* ---------- Black / 文字与灰阶 ---------- */
  --main-black: #1A1A1A;            /* 主文字（#000 → #1A1A1A，减少眩目） */
  --main-black-1: #333333;          /* 标题 / 文章正文 */
  --main-black-2: #666666;          /* 副标题 / 正文 */
  --main-grey-1: #8C8C8C;           /* 提示文字（#999 → #8C8C8C，通过 AA） */
  --main-grey-2: #DDDDDD;           /* 分割线 / 边框 */
  --bg-black: #F5F5F5;              /* 普通背景 / 页面底 */
  --bg-black-1: #F1F1F1;            /* 中间层背景 */
  --bg-black-2: #FFFFFF;            /* 卡片 / 容器背景 */
  --bg-red-1: #FDF1E8;              /* 标签背景色（浅）*/

  /* ---------- 语义别名（用途明确的中性色） ---------- */
  --bg-warning-50: #FDF1E8;         /* 原 bg-red-1，橙色浅底 */
  --bg-neutral-50: #E9F3F4;         /* 原 bg-green-1，青灰浅底 */

  /* ============================================================
     ▲ Primitive 层 · 以上为调色板（HEX 真值）
     ▼ Semantic 层 · 以下为"用途"别名。组件代码应只用 semantic。
     ============================================================ */

  /* ---------- Action / 行为色 ---------- */
  --color-action-primary:          #E03131;   /* = main-red 500 */
  --color-action-primary-hover:    #C62828;   /* 500 − 8%L */
  --color-action-primary-pressed:  #A62020;   /* 500 − 16%L */
  --color-action-primary-disabled: #F2A6A6;   /* 500 + 40%L */
  --color-action-primary-focus:    rgba(224,49,49,.25);   /* focus ring */

  --color-action-secondary:        #0388CA;   /* link / 次要操作 = main-blue */
  --color-action-secondary-hover:  #026FA8;
  --color-action-secondary-pressed:#015C8C;
  --color-action-secondary-focus:  rgba(3,136,202,.25);

  /* ---------- Feedback / 反馈色 ---------- */
  --color-success:         #5CB85C;
  --color-success-hover:   #4A9F4A;
  --color-success-bg:      #F1F8EC;
  --color-success-focus:   rgba(92,184,92,.25);

  --color-warning:         #F0931C;
  --color-warning-hover:   #D67B0A;
  --color-warning-bg:      #FFF1DD;
  --color-warning-focus:   rgba(240,147,28,.25);

  --color-danger:          #E03131;  /* 复用品牌红 */
  --color-danger-bg:       #FBE0EB;

  /* ---------- Text / 文字色（语义命名） ---------- */
  --color-text-primary:    #1A1A1A;  /* 标题、强调 */
  --color-text-body:       #333333;  /* 正文 */
  --color-text-secondary:  #666666;  /* 副标题 */
  --color-text-tertiary:   #8C8C8C;  /* 提示、placeholder */
  --color-text-inverse:    #FFFFFF;  /* 深底上的白字 */
  --color-text-link:       #0388CA;
  --color-text-danger:     #E03131;

  /* ---------- Surface / 表面 ---------- */
  --color-surface:         #FFFFFF;  /* 卡片 / 容器 */
  --color-surface-alt:     #F5F5F5;  /* 次级 / 页面底 */
  --color-surface-sunken:  #F0F0F2;  /* 更低一阶 */
  --color-border:          #DDDDDD;  /* 分割线 */
  --color-border-strong:   #B8B8B8;  /* 强分割 */
  --color-overlay:         rgba(0,0,0,.45);  /* 遮罩 */

  /* ---------- Alpha / 透明叠加（hover / selected / pressed 通用） ---------- */
  --alpha-brand-8:   rgba(224,49,49,.08);
  --alpha-brand-16:  rgba(224,49,49,.16);
  --alpha-brand-24:  rgba(224,49,49,.24);

  --alpha-hover:     rgba(0,0,0,.04);
  --alpha-pressed:   rgba(0,0,0,.08);
  --alpha-selected:  rgba(224,49,49,.08);

  /* ---------- Elevation / 阴影（与圆角搭配使用） ---------- */
  --elev-card:    0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --elev-dialog:  0 8px 24px rgba(0,0,0,.12);
  --elev-popover: 0 4px 12px rgba(0,0,0,.08);

  /* ============================================================
     字号 — Mobile
     ============================================================ */
  --m-h1: 22px; --m-h1-weight: 700;
  --m-h2: 17px; --m-h2-weight: 700;
  --m-h3: 16px; --m-h3-weight: 700;
  --m-h4: 15px; --m-h4-weight: 700;
  --m-body-l: 16px;
  --m-body-m: 14px;
  --m-label-m: 12px; --m-label-m-weight: 500;
  --m-label-s: 10px;
  --m-label-reg: 12px; --m-label-reg-weight: 400;

  /* ---------- iPad ---------- */
  --i-h1: 40px; --i-h2: 28px; --i-h3: 20px; --i-h4: 18px;
  --i-body-l: 16px; --i-body-m: 17px;
  --i-label-m: 15px; --i-label-reg: 15px; --i-label-s: 12px;

  /* ---------- Desktop ---------- */
  --d-h1: 56px; --d-h2: 36px; --d-h3: 24px; --d-h4: 18px;
  --d-body-l: 18px; --d-body-m: 16px;
  --d-label-m: 14px; --d-label-reg: 14px; --d-label-s: 12px;

  /* ============================================================
     字体栈 — 四语言
     ============================================================ */
  --font-sc: "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-tc: "PingFang TC", "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  --font-en: -apple-system, "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-kr: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;

  --font-default: var(--font-sc), var(--font-en);

  /* ============================================================
     间距 — 8pt 栅格
     ============================================================ */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ============================================================
     圆角
     ============================================================ */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;

  /* ============================================================
     阴影
     ============================================================ */
  --sh-1: 0 1px 2px rgba(0,0,0,.06);
  --sh-2: 0 2px 8px rgba(0,0,0,.08);
  --sh-3: 0 8px 24px rgba(0,0,0,.10);

  /* ============================================================
     栅格 & 断点 — Grid & Breakpoints
     ============================================================ */
  --bp-mobile:      360px;
  --bp-fold-inner:  690px;
  --bp-ipad:        768px;
  --bp-desktop:    1024px;
  --bp-desktop-xl: 1440px;

  --col-mobile: 4;
  --col-fold-inner: 6;
  --col-ipad: 8;
  --col-desktop: 12;

  --margin-mobile: 16px;
  --margin-fold-inner: 32px;
  --margin-ipad: 48px;
  --margin-desktop: 120px;

  --gutter-mobile: 16px;
  --gutter-fold-inner: 20px;
  --gutter-ipad: 24px;
  --gutter-desktop: 32px;

  /* ============================================================
     其它
     ============================================================ */
  --brand-header-h: 44px;
  --tabbar-h: 64px;
  --touch-min: 44px;
}

/* ============================================================
   Dark Mode · 只覆盖 semantic 层即可，组件代码零改动
   ============================================================ */
[data-theme="dark"] {
  --color-action-primary:          #FF5757;
  --color-action-primary-hover:    #FF7A7A;
  --color-action-primary-pressed:  #E03131;
  --color-action-primary-disabled: #7A3838;
  --color-action-primary-focus:    rgba(255,87,87,.35);

  --color-action-secondary:        #4BB8F0;
  --color-action-secondary-hover:  #6FC7F4;
  --color-action-secondary-pressed:#0388CA;

  --color-success:      #6FCC6F;
  --color-success-bg:   rgba(92,184,92,.16);
  --color-warning:      #FFB547;
  --color-warning-bg:   rgba(255,181,71,.16);
  --color-danger:       #FF5757;
  --color-danger-bg:    rgba(255,87,87,.16);

  --color-text-primary:   #F2F2F2;
  --color-text-body:      #E0E0E0;
  --color-text-secondary: #B8B8B8;
  --color-text-tertiary:  #7A7A7A;
  --color-text-inverse:   #1A1A1A;
  --color-text-link:      #4BB8F0;
  --color-text-danger:    #FF5757;

  --color-surface:        #1F1F1F;
  --color-surface-alt:    #141414;
  --color-surface-sunken: #0F0F0F;
  --color-border:         #2E2E2E;
  --color-border-strong:  #4A4A4A;
  --color-overlay:        rgba(0,0,0,.65);

  --alpha-hover:    rgba(255,255,255,.06);
  --alpha-pressed:  rgba(255,255,255,.10);
  --alpha-selected: rgba(255,87,87,.16);

  --elev-card:    0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  --elev-dialog:  0 8px 24px rgba(0,0,0,.55);
  --elev-popover: 0 4px 12px rgba(0,0,0,.45);
}