/* ========================================
   仰红房产 - 品牌设计系统 v2.0
   仰红红 + 暖深色基底
   Warm & Trustworthy Real Estate Brand
   ======================================== */

/* === HarmonyOS Sans SC Font Faces === */
@font-face {
  font-family: "HarmonyOS Sans SC";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Regular.woff2') format('woff2');
}
@font-face {
  font-family: "HarmonyOS Sans SC";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Medium.woff2') format('woff2');
}
@font-face {
  font-family: "HarmonyOS Sans SC";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/irozhi/HarmonyOS-Sans/HarmonyOS_Sans_SC/HarmonyOS_Sans_SC_Bold.woff2') format('woff2');
}

:root {
  /* ============================================
     BRAND — 仰红红 Primary System
     ============================================ */
  --brand-red:         #C8102E;
  --brand-red-hover:   #A30D25;
  --brand-red-dark:    #8B0A1E;
  --brand-red-light:   #FDE8EC;
  --brand-red-50:      #FEF2F4;
  --brand-red-100:     #FDE8EC;
  --brand-red-200:     #F9BFC9;
  --brand-red-300:     #F2909F;
  --brand-red-400:     #E85D72;
  --brand-red-500:     #C8102E;
  --brand-red-600:     #A30D25;
  --brand-red-700:     #8B0A1E;
  --brand-red-800:     #6E0818;
  --brand-red-900:     #4A0510;

  /* === Primary Alias === */
  --color-primary:         var(--brand-red);
  --color-primary-hover:   var(--brand-red-hover);
  --color-primary-light:   var(--brand-red-light);

  /* === Accent: Warm Amber (complementary) === */
  --color-accent:       #E88714;
  --color-accent-light: #FFF0DB;

  /* === Price Red (Chinese Real Estate Convention) === */
  --color-price:        #E8463A;

  /* ============================================
     NEUTRAL — Warm Dark Palette
     ============================================ */
  --neutral-50:   #FAF8F5;
  --neutral-100:  #F2EFE9;
  --neutral-200:  #E3DDD3;
  --neutral-300:  #C5BBB0;
  --neutral-400:  #9E9182;
  --neutral-500:  #7A6E5E;
  --neutral-600:  #5C5244;
  --neutral-700:  #3E362C;
  --neutral-800:  #2A241C;
  --neutral-900:  #1C1814;

  /* ============================================
     SURFACE — Dark Theme with Warm Undertones
     ============================================ */
  --bg-primary:      #1C1814;
  --bg-secondary:    #2A241C;
  --bg-tertiary:     #3E362C;
  --bg-elevated:     #2A241C;
  --bg-card:         #241F19;
  --bg-card-hover:   #2E2820;
  --bg-input:        #2E2820;
  --bg-overlay:      rgba(0, 0, 0, 0.65);
  --bg-hero-overlay: linear-gradient(to top, rgba(28, 24, 20, 0.92) 0%, rgba(28, 24, 20, 0.4) 40%, rgba(28, 24, 20, 0.0) 100%);

  /* ============================================
     TEXT — Light on Dark
     ============================================ */
  --text-primary:     #FAF8F5;
  --text-secondary:   #C5BBB0;
  --text-tertiary:    #9E9182;
  --text-inverse:     #1C1814;
  --text-brand:       #C8102E;
  --text-link:        #C8102E;
  --text-link-hover:  #E85D72;

  /* ============================================
     BORDER
     ============================================ */
  --border-default:   rgba(200, 16, 46, 0.12);
  --border-light:     rgba(255, 255, 255, 0.06);
  --border-medium:    rgba(255, 255, 255, 0.10);
  --border-brand:     rgba(200, 16, 46, 0.35);
  --border-input:     rgba(255, 255, 255, 0.10);

  /* ============================================
     SEMANTIC STATES
     ============================================ */
  --state-success:       #4CAF50;
  --state-success-bg:    #1A3A1C;
  --state-warning:       #E88714;
  --state-warning-bg:    #3A2A10;
  --state-error:         #E53935;
  --state-error-bg:      #3A1515;
  --state-info:          #42A5F5;
  --state-info-bg:       #152A3A;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --font-sans:    "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-serif:   "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  --font-display: "HarmonyOS Sans SC", "PingFang SC", sans-serif;
  --font-mono:    "SF Mono", "JetBrains Mono", "Consolas", monospace;

  /* Type Scale */
  --text-xs:   0.75rem;   --text-xs-line:   1rem;
  --text-sm:   0.875rem;  --text-sm-line:   1.375rem;
  --text-base: 1rem;      --text-base-line: 1.625rem;
  --text-lg:   1.125rem;  --text-lg-line:   1.75rem;
  --text-xl:   1.25rem;   --text-xl-line:   2rem;
  --text-2xl:  1.5rem;    --text-2xl-line:  2.25rem;
  --text-3xl:  1.875rem;  --text-3xl-line:  2.5rem;
  --text-4xl:  2.25rem;   --text-4xl-line:  3rem;
  --text-5xl:  3rem;      --text-5xl-line:  3.75rem;
  --text-6xl:  3.5rem;    --text-6xl-line:  4.25rem;

  /* Font Weights */
  --font-light:     300;
  --font-normal:    400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

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

  /* ============================================
     RADIUS
     ============================================ */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============================================
     SHADOWS — Warm Tinted
     ============================================ */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.35);
  --shadow-brand: 0 0 24px rgba(200, 16, 46, 0.12);
  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-floating: 0 20px 60px rgba(0, 0, 0, 0.4);

  /* ============================================
     TRANSITIONS
     ============================================ */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-spring: 400ms cubic-bezier(0.16, 1, 0.3, 1);

  /* ============================================
     LAYOUT
     ============================================ */
  --container-max:     1280px;
  --container-narrow:  960px;
  --container-padding: 2rem;
  --header-height:     72px;
}