/* ══════════════════════════════════════════════════════════════
   CHERRY SLIDES — DESIGN TOKENS
   ──────────────────────────────────────────────────────────────
   Source of truth: 000_Agent/knowledge/brand/DESIGN.md (v2.0)
   Prefix: --cs-* ("cherry-slides")

   呢個 file 只 hold 品牌 token，layout 結構喺 layout.css。
   改色 / 改字 / 改字級 只改呢度，所有用呢套 system 嘅
   slide deck 會自動跟住變。
   ══════════════════════════════════════════════════════════════ */

/* ── Light Theme（default）─────────────────────────────────── */
:root {
  /* Brand */
  --cs-color-brand:           #6C5CE7;
  --cs-color-brand-dark:      #3d2fa0;
  --cs-color-brand-08:        rgba(108,92,231,.08);
  --cs-color-brand-10:        rgba(108,92,231,.10);
  --cs-color-brand-15:        rgba(108,92,231,.15);
  --cs-color-brand-18:        rgba(108,92,231,.18);
  --cs-color-brand-20:        rgba(108,92,231,.20);
  --cs-color-brand-30:        rgba(108,92,231,.30);

  /* Accent — Emerald jade，split-complementary 配紫 */
  /* 用喺：chapter badge / quote divider / data highlight / em strong / growth indicators */
  --cs-color-accent:          #10B981;
  --cs-color-accent-dark:     #047857;
  --cs-color-accent-08:        rgba(16,185,129,.08);
  --cs-color-accent-15:        rgba(16,185,129,.15);
  --cs-color-accent-20:        rgba(16,185,129,.20);
  --cs-color-accent-30:        rgba(16,185,129,.30);

  /* Surfaces */
  --cs-color-bg:              #FAFAF8;
  --cs-color-card:            #FFFFFF;
  --cs-color-panel:           #F8F7FF;
  --cs-color-sep:             #E8E8EC;

  /* Text */
  --cs-color-text:            #1a1a1a;
  --cs-color-body:            #333333;
  --cs-color-sub:             #777777;
  --cs-color-muted:           #AAAAAA;

  /* Before/After cards */
  --cs-color-before-bg:       #F4F4F4;
  --cs-color-before-border:   #E0E0E0;
  --cs-color-after-bg:        #F0EFFE;
  --cs-color-after-border:    rgba(108,92,231,.20);

  /* Footer / decoration */
  --cs-color-footer-bg:       #6C5CE7;
  --cs-color-footer-text:     #FFFFFF;
  --cs-color-footer-text-2:   rgba(255,255,255,.70);
  --cs-color-watermark:       rgba(108,92,231,.07);
  --cs-color-inline-footer:   rgba(0,0,0,.28);

  /* Typography ─────────────────────────────────────────────── */
  /* 思源宋體 ExtraBold (Noto Serif TC 900) 做 heading signature — */
  /* 帶出 editorial 雜誌感，類似雷蒙嘅字魂扁桃體角色            */
  --cs-font-heading:          'Noto Serif TC', 'Noto Sans TC', serif;
  --cs-font-body-zh:          'Noto Sans TC', sans-serif;
  --cs-font-body-en:          'Inter', sans-serif;
  --cs-font-display:          'DM Serif Display', 'Noto Serif TC', Georgia, serif;
  --cs-font-mono:             'Courier New', monospace;

  /* Font sizes — em-based for responsive scale ─────────────── */
  /* slide 嘅 base font-size 由 .cs-slide 嘅 clamp() 控制         */
  --cs-fs-cover:              3.75em;   /* 封面主標 */
  --cs-fs-h1:                 2.55em;   /* 章節主標 */
  --cs-fs-h2:                 2em;      /* slide 主標 */
  --cs-fs-h3:                 1.5em;    /* sub heading */
  --cs-fs-body:               1.2em;    /* 內文 */
  --cs-fs-aux:                1em;      /* 附助 */
  --cs-fs-meta:               0.85em;   /* footer / micro */
  --cs-fs-ey:                 0.7em;    /* eyebrow label */
  --cs-fs-watermark:          12em;     /* page number watermark */

  /* Font weights ───────────────────────────────────────────── */
  --cs-fw-heading:            900;
  --cs-fw-body:               400;
  --cs-fw-meta:               600;
  --cs-fw-label:              700;

  /* Spacing / radius ───────────────────────────────────────── */
  --cs-radius:                12px;
  --cs-radius-lg:             16px;
  --cs-radius-pill:           100px;
  --cs-pad-x:                 clamp(56px, 8vw, 110px);
  --cs-pad-y:                 clamp(36px, 5vh, 62px);

  /* Animation timing ───────────────────────────────────────── */
  --cs-anim-duration:         .42s;
  --cs-anim-stagger:          .11s;
  --cs-anim-easing:           cubic-bezier(.32, .92, .42, 1);

  /* Decoration ─────────────────────────────────────────────── */
  --cs-rule-width:            28px;
  --cs-rule-height:           3px;
}

/* ── Dark Theme（opt-in via class）───────────────────────── */
.cs-theme-dark {
  --cs-color-bg:              #1a1a2e;
  --cs-color-card:            rgba(255,255,255,.06);
  --cs-color-panel:           rgba(255,255,255,.04);
  --cs-color-sep:             rgba(255,255,255,.08);

  --cs-color-text:            #FFFFFF;
  --cs-color-body:            rgba(255,255,255,.85);
  --cs-color-sub:             rgba(255,255,255,.60);
  --cs-color-muted:           rgba(255,255,255,.35);

  --cs-color-brand:           #A78BFA;          /* lift saturation on dark */

  --cs-color-after-bg:        rgba(108,92,231,.15);
  --cs-color-after-border:    rgba(108,92,231,.30);
  --cs-color-before-bg:       rgba(255,255,255,.04);
  --cs-color-before-border:   rgba(255,255,255,.10);

  --cs-color-inline-footer:   rgba(255,255,255,.30);
  --cs-color-watermark:       rgba(167,139,250,.10);
}