/* ============================================================
   World of Casino — Design Tokens
   ------------------------------------------------------------
   抽取自 source/css/index.css 的設計變數系統。
   WordPress / Astra / Elementor 相關前綴皆保留 (--ast-*, --e-*)
   以便讓既有 HTML 直接渲染；同時新增中性別名 (--color-*, --font-*)
   供後續手刻頁面使用。
   字體檔位置：./assets/fonts/{family}/*.woff2 (相對 site/ 部署)
   ============================================================ */

/* ---------- 1. @font-face：四套 Google Font 的 Latin 子集 ---------- */
/* Roboto v51 — Variable Font (100–900) */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/roboto/KFO7CnqEu92Fr1ME7kSn66aGLdTylUAMa3KUBGEe.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat v31 — Variable Font (100–900) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/montserrat/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Playfair Display v40 — Variable Font (400–900) */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display/nuFiD-vYSZviVYUb_rj3ij__anPXDTLYgFE_.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Slab v36 — Variable Font (100–900) */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/roboto-slab/BngMUXZYTXPIvIBgJJSb6ufD5qW54A.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. 設計 Token ---------- */
:root {
  /* === 中性別名（推薦新頁面使用） === */
  --color-bg:               #ffffff;
  --color-bg-alt:           #fbfbfb;
  --color-bg-subtle:        #FBFCFF;
  --color-surface:          #ffffff;
  --color-surface-muted:    #fafafa;
  --color-text:             #0a0a0a;
  --color-text-strong:      #000000;
  --color-text-muted:       #7A7A7A;
  --color-border:           #dddddd;
  --color-border-soft:      #e7e7e7;

  /* 品牌主色：World of Casino 青綠 + LINE 綠 + Elementor 預設藍 */
  --color-brand:            #00adbb;   /* World of Casino 主色 (Astra global-color-0) */
  --color-brand-soft:       #4dc6d0;   /* 漸層輔助 (Astra global-color-6) */
  --color-brand-tint:       #BFD1FF;   /* 淺色背景 (Astra global-color-8) */
  --color-accent:           #06C755;   /* LINE 綠（CTA 按鈕） */
  --color-accent-hover:     #05A647;
  --color-link:             #6EC1E4;   /* Elementor primary */
  --color-link-secondary:   #54595F;
  --color-success:          #61CE70;

  /* 程式碼 / 系統色 */
  --color-code-bg:          #EEEEEE;
  --color-comment-bg:       #FAFAFA;
  --color-divider:          #DDDDDD;
  --color-divider-dark:     #0c0d0e;
  --shadow-card:            0 0 4px 0 #00000057;

  /* === 字型 === */
  --font-sans: 'Roboto', 'Helvetica Neue', Helvetica, Arial,
               '微軟正黑體', 'Microsoft JhengHei',
               'PingFang TC', 'Noto Sans TC', sans-serif;
  --font-display: 'Montserrat', 'Roboto', '微軟正黑體', sans-serif;
  --font-serif: 'Playfair Display', 'Roboto Slab', 'Noto Serif TC', serif;
  --font-slab: 'Roboto Slab', 'Noto Serif TC', serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* 字重 */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* 字級（依 Elementor 預設 + Astra 經驗值） */
  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   1.875rem;  /* 30px */
  --fs-3xl:   2.25rem;   /* 36px */
  --fs-4xl:   3rem;      /* 48px */
  --fs-hero:  3.5rem;    /* 56px */
  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.8;

  /* === 容器寬度 === */
  --container-narrow: 750px;
  --container-normal: 1140px;     /* Elementor e-con 預設 */
  --container-wide:   1200px;     /* Astra normal */

  /* === 間距 / 圓角 === */
  --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;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;
  --widgets-spacing: 20px;

  /* === 斷點（給 JS 與容器查詢用，CSS 內仍寫死於 @media） === */
  --bp-sm: 544px;
  --bp-md: 768px;
  --bp-tab: 921px;     /* Astra 平板斷點 */
  --bp-lg: 1024px;
  --bp-xl: 1201px;

  /* ============================================================
     === 以下為 Astra / Elementor 既有變數別名 ===
     讓 source/html/ 直接搬移過來的標籤仍可正確渲染
     ============================================================ */

  /* Astra Global Colors */
  --ast-global-color-0: var(--color-brand);
  --ast-global-color-1: #000000;
  --ast-global-color-2: #0a0a0a;
  --ast-global-color-3: #000000;
  --ast-global-color-4: #fbfbfb;
  --ast-global-color-5: #ffffff;
  --ast-global-color-6: #4dc6d0;
  --ast-global-color-7: #FBFCFF;
  --ast-global-color-8: #BFD1FF;
  --ast-global-color-primary: var(--ast-global-color-5);
  --ast-global-color-secondary: var(--ast-global-color-4);
  --ast-global-color-alternate-background: var(--ast-global-color-7);
  --ast-global-color-subtle-background: var(--ast-global-color-6);

  /* Astra 結構變數 */
  --ast-border-color: #dddddd;
  --ast-search-border-color: #e7e7e7;
  --ast-narrow-container-width: 750px;
  --ast-normal-container-width: 1200px;
  --ast-container-default-xxs-padding: 1.4em;
  --ast-container-default-xs-padding:  2.4em;
  --ast-container-default-sm-padding:  6.67em;
  --ast-container-default-md-padding:  3.34em;
  --ast-container-default-slg-padding: 4.34em;
  --ast-container-default-lg-padding:  5.67em;
  --ast-container-default-xlg-padding: 6.67em;
  --ast-bg-style-guide: var(--ast-global-color-secondary, var(--ast-global-color-5));
  --ast-shadow-style-guide: 0 0 4px 0 #00000057;
  --ast-title-layout-bg: #eeeeee;
  --ast-widget-bg-color: #fafafa;
  --ast-wc-container-head-bg-color: #fbfbfb;
  --ast-code-block-background: #EEEEEE;
  --ast-comment-inputs-background: #FAFAFA;
  --ast-gallery-block-color: #000;
  --ast-lifter-hover-bg: #e6e6e6;
  --ast-global-dark-bg-style: #fff;
  --ast-global-dark-lfs: #fbfbfb;
  --ast-blog-title-font-weight: normal;
  --ast-blog-meta-weight: inherit;
  --ast-post-nav-space: 0;

  /* Elementor Global Colors */
  --e-global-color-primary:   #6EC1E4;
  --e-global-color-secondary: #54595F;
  --e-global-color-text:      #7A7A7A;
  --e-global-color-accent:    #61CE70;
  --e-global-color-astglobalcolor0: #00adbb;
  --e-global-color-astglobalcolor1: #000000;
  --e-global-color-astglobalcolor2: #0a0a0a;
  --e-global-color-astglobalcolor3: #000000;
  --e-global-color-astglobalcolor4: #fbfbfb;
  --e-global-color-astglobalcolor5: #ffffff;
  --e-global-color-astglobalcolor6: #4dc6d0;
  --e-global-color-astglobalcolor7: #FBFCFF;
  --e-global-color-astglobalcolor8: #BFD1FF;

  /* Elementor Typography */
  --e-global-typography-primary-font-family:   'Roboto';
  --e-global-typography-primary-font-weight:   600;
  --e-global-typography-secondary-font-family: 'Roboto Slab';
  --e-global-typography-secondary-font-weight: 400;
  --e-global-typography-text-font-family:      'Roboto';
  --e-global-typography-text-font-weight:      400;
  --e-global-typography-accent-font-family:    'Roboto';
  --e-global-typography-accent-font-weight:    500;

  /* Elementor Container */
  --container-max-width: 1140px;
  --widgets-spacing-row: 20px;
  --widgets-spacing-column: 20px;
  --kit-widget-spacing: 20px;

  /* World of Casino 自訂 (取自 inline CSS) */
  --accent-color: #06C755;
  --accent-hover: #05A647;
  --bg-color: #ffffff;
}