/* ============================================================
   BeliPintar — 设计令牌 (Design Tokens)
   来源: Figma 设计稿 "BeliPintar" 官方 Variables (Collection 1)
   页面: BeliPintar Homepage (官网) + Hapus Akun - 1920px
   ============================================================ */

:root {
  /* ---- 主色 Primary Colors (官方 token) ---- */
  --color-primary-red: #FF1E00;          /* 主红 Primary Red(品牌主色,logo/Tutup) */
  --color-aux-orange:  #F38200;          /* 辅助橙 Auxiliary Orange */
  --color-blue:        #317EF3;          /* 蓝 Blue */
  --color-purple:      #BD2CED;          /* 紫 Purple */
  --color-aux-green:   #45AD00;          /* 辅助绿 Auxiliary Green */
  --color-white:       #FFFFFF;          /* 白 White */
  --color-red:         #EC2029;          /* 红 Red */
  --color-light-red-bg:#FDF3F3;          /* 浅红背景 Light Red Background */
  --color-confirm-red: #FF383C;          /* 确认按钮红(Hapus Akun Konfirmasi,像素采样) */

  /* ---- 中性色 Neutrals (官方 token) ---- */
  --color-black:        #010A1B;         /* 主黑 Primary Black */
  --color-black-2:      #45494D;         /* 次黑 Secondary Black */
  --color-grey-1:       #A8A8A8;         /* 主灰 Primary Grey */
  --color-grey-2:       #D7D7D7;         /* 次灰 Secondary Grey */
  --color-line:         #E3E3E3;         /* 线色 Line Color */
  --color-bg:           #F1F1F1;         /* 背景色 Background Color */
  --color-bg-section:   #F7F7F7;         /* 通栏背景色 Section Background Color (Tentang Kami 浅灰通栏) */

  /* ---- 语义别名 ---- */
  --color-brand:        var(--color-primary-red);
  --color-text:         var(--color-black);
  --color-text-secondary: var(--color-black-2);
  --color-text-muted:   var(--color-grey-1);
  --color-surface:      var(--color-white);
  --color-surface-alt:  var(--color-bg);
  --color-border:       var(--color-line);
  --color-footer-bg:    #181818;         /* 页脚深底(设计稿像素确认) */
  --color-footer-link:  #525252;         /* 页脚链接文字(设计稿像素确认) */

  /* ---- 字体 ---- */
  --font-sans: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* ---- 圆角 ---- */
  --radius-sm: 6px;        /* 输入框 */
  --radius-md: 12px;       /* 卡片(设计稿 12–16px) */
  --radius-lg: 16px;
  --radius-pill: 999px;    /* 胶囊按钮/徽章 */

  /* ---- 阴影 ---- */
  --shadow-card: 0 6px 24px rgba(1, 10, 27, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(1, 10, 27, 0.10);
  --shadow-modal: 0 24px 64px rgba(1, 10, 27, 0.18);

  /* ---- 布局 ---- */
  --container-max: 1400px;
  --nav-height: 96px;
}