/* ==========================================================================
   variables.css — 全站設計變數（顏色 / 字體 / 尺寸 / 間距 / 斷點適配）
   主題：粉色系（ pastel pink ）
   所有響應式尺寸變數統一在此依斷點覆寫，方便維護與復用。
   斷點規範：
     < 768px         手機（基礎值，mobile-first）
     768px - 1024px  平板豎屏
     1024px - 1280px 平板橫屏 / 小屏筆電
     1280px - 1920px 桌面顯示器
     >= 1920px       超大屏（2K / 4K）
   ========================================================================== */

:root {
  /* ---------- 顏色（粉色系主題） ---------- */
  --color-overlay-top: rgba(255, 224, 240, 0.55);   /* 背景粉色遮罩（上） */
  --color-overlay-bottom: rgba(226, 232, 255, 0.50);/* 背景粉紫遮罩（下） */
  --color-card-bg: rgba(255, 255, 255, 0.82);       /* 登入卡片背景 */
  --color-card-border: rgba(255, 183, 213, 0.5);
  --color-card-shadow: rgba(255, 143, 199, 0.28);

  --color-input-bg: rgba(255, 255, 255, 0.9);
  --color-input-border: #f3c3dd;
  --color-input-border-focus: #ff8fc7;
  --color-input-focus-ring: rgba(255, 143, 199, 0.28);
  --color-input-icon: #d18bb4;

  --color-text-primary: #6b5570;                    /* 深粉紫（主要文字） */
  --color-text-secondary: #a58cae;
  --color-placeholder: #c4a9bf;

  --color-title-from: #ff7fbf;                      /* 標題漸變 */
  --color-title-to: #b388eb;

  --color-accent: #f260a8;                          /* 強調色（勾選框 / 聚焦） */

  --color-btn-primary-from: #ff8fd0;                /* 登入按鈕漸變（粉→橘） */
  --color-btn-primary-to: #ffab7d;
  --color-btn-primary-shadow: rgba(255, 143, 199, 0.45);
  --color-btn-primary-text: #ffffff;

  --color-error: #ff5f7a;
  --color-success: #f260a8;

  /* 彩虹裝飾條（呼應導航風格） */
  --gradient-rainbow: linear-gradient(90deg,
    #ff9ecd 0%, #ffc46b 20%, #fff176 40%,
    #9be7a0 60%, #7fd8f7 80%, #b39dff 100%);

  /* ---------- 字體 ---------- */
  --font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC",
                 "PingFang SC", "Helvetica Neue", Arial, sans-serif;

  --fs-title: 26px;
  --fs-input: 15px;
  --fs-btn: 16px;
  --fs-text: 14px;
  --fs-link: 14px;
  --fs-error: 12px;

  --fw-title: 700;
  --fw-btn: 600;

  /* ---------- 圓角 ---------- */
  --radius-card: 16px;
  --radius-input: 10px;
  --radius-btn: 999px;                              /* 膠囊按鈕（參考風格） */
  --radius-checkbox: 4px;

  /* ---------- 尺寸與間距（手機基礎值 < 768px） ---------- */
  --card-max-width: 420px;
  --card-padding-y: 32px;
  --card-padding-x: 26px;
  --card-gap: 22px;
  --input-height: 50px;
  --input-padding-x: 14px;
  --input-icon-size: 20px;
  --btn-height: 50px;
  --btn-icon-size: 18px;
  --checkbox-size: 18px;
  --page-padding: 20px;
  --title-margin-bottom: 28px;
  --field-gap: 18px;

  /* ---------- 過渡 ---------- */
  --transition-fast: 0.2s ease;
}

/* ---------- 平板豎屏 768px - 1024px ---------- */
@media (min-width: 768px) {
  :root {
    --fs-title: 28px;
    --fs-input: 15px;
    --card-max-width: 440px;
    --card-padding-y: 40px;
    --card-padding-x: 40px;
    --input-height: 54px;
    --btn-height: 54px;
    --title-margin-bottom: 32px;
    --field-gap: 20px;
  }
}

/* ---------- 平板橫屏 / 小屏筆電 1024px - 1280px ---------- */
@media (min-width: 1024px) {
  :root {
    --fs-title: 29px;
    --card-max-width: 450px;
    --card-padding-y: 42px;
    --card-padding-x: 44px;
  }
}

/* ---------- 桌面顯示器 1280px - 1920px ---------- */
@media (min-width: 1280px) {
  :root {
    --fs-title: 30px;
    --fs-input: 16px;
    --fs-btn: 16px;
    --card-max-width: 460px;
    --card-padding-y: 44px;
    --card-padding-x: 48px;
    --input-height: 56px;
    --btn-height: 56px;
    --title-margin-bottom: 36px;
    --field-gap: 22px;
  }
}

/* ---------- 超大屏（2K / 4K）>= 1920px ---------- */
@media (min-width: 1920px) {
  :root {
    --fs-title: 34px;
    --fs-input: 17px;
    --fs-btn: 18px;
    --fs-text: 15px;
    --fs-link: 15px;
    --fs-error: 13px;
    --card-max-width: 520px;
    --card-padding-y: 52px;
    --card-padding-x: 56px;
    --card-gap: 26px;
    --input-height: 62px;
    --btn-height: 62px;
    --input-icon-size: 22px;
    --btn-icon-size: 20px;
    --checkbox-size: 20px;
    --title-margin-bottom: 40px;
    --field-gap: 24px;
  }
}