/* ==========================================================================
   肆拾文創 (40 Company) — Colors & Type Tokens
   ==========================================================================
   Sampled from 肆拾文創_設計色票.png + slide templates.
   Brand red (FF2D2D) is the primary signature; lime (C1F104) is the accent.
   ========================================================================== */

:root {
  /* ---------- Brand palette (from 設計色票) ---------- */
  --color-red:       #FF2D2D;   /* primary brand, signature red */
  --color-white:     #FFFFFF;
  --color-lime:      #CCF14D;   /* accent — the * asterisk (official glyph PNG) */
  --color-purple:    #BE7CB8;
  --color-tan:       #CF9C6E;
  --color-orange:    #DF6B31;
  --color-sage:      #7AB098;
  --color-pink:      #E7B3C8;
  --color-slate:     #A5BBBD;
  --color-sky:       #ADE3F5;
  --color-charcoal:  #40403F;

  /* ---------- Red scale (derived) ---------- */
  --red-50:   #FFF0F0;
  --red-100:  #FFD6D6;
  --red-300:  #FF7878;
  --red-500:  #FF2D2D;   /* = --color-red */
  --red-700:  #D91515;
  --red-900:  #8F0606;

  /* ---------- Neutral scale (derived, warm) ---------- */
  --ink-0:    #FFFFFF;
  --ink-50:   #F7F6F3;   /* paper warm off-white */
  --ink-100:  #EDEAE3;
  --ink-200:  #D6D2C9;
  --ink-400:  #8A8884;
  --ink-600:  #5E5E5A;
  --ink-800:  #40403F;   /* = --color-charcoal */
  --ink-900:  #1A1A19;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1: var(--ink-900);
  --fg-2: var(--ink-600);
  --fg-3: var(--ink-400);
  --fg-on-red: var(--color-white);
  --fg-accent: var(--color-red);

  --bg-page: var(--ink-50);
  --bg-surface: var(--color-white);
  --bg-signature: var(--color-red);     /* the iconic red background */
  --bg-grid-lines: rgba(255,255,255,0.18); /* the + grid on red */
  --bg-grid-on-paper: rgba(255, 45, 45, 0.10); /* wavy grid on paper */

  --border-hairline: rgba(255,255,255,0.6);
  --border-soft: var(--ink-200);
  --border-strong: var(--ink-800);

  /* ---------- Typography ---------- */
  /* 系統字優先，不下載網路字體（中文字體檔太大，會拖垮首次繪製）。
     Apple = 蘋方、Android = Noto Sans CJK TC、Windows = 微軟正黑體，
     本機若已安裝 Noto Sans TC 仍會優先採用，不需額外下載。 */
  --font-sans: "Noto Sans TC", "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei",
               "微軟正黑體", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-latin-display: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Noto Sans Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — 16px base, 1.25 ratio tuned for CJK legibility */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  64px;
  --fs-5xl:  88px;

  /* Microsoft YaHei ships three weights: Light · Regular · Bold.
     Bold usage mirrors PowerPoint's B button — wrap with <strong> or .bold. */
  --fw-light:   300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-bold:    700; /* @kind other */

  --lh-tight:   1.15; /* @kind other */
  --lh-snug:    1.3; /* @kind other */
  --lh-normal:  1.55; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* CJK tracking: YaHei looks best with slight negative tracking at display
     sizes and near-zero at body size. */
  --ls-display: -0.01em; /* @kind other */
  --ls-body:    0; /* @kind other */
  --ls-caps:    0.08em; /* @kind other */

  /* ---------- Spacing (4px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* ---------- Radii ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows (low, paper-like) ---------- */
  --shadow-sm: 0 1px 2px rgba(26,26,25,0.06), 0 1px 1px rgba(26,26,25,0.04);
  --shadow-md: 0 4px 12px rgba(26,26,25,0.08), 0 1px 3px rgba(26,26,25,0.05);
  --shadow-lg: 0 12px 32px rgba(26,26,25,0.12), 0 2px 6px rgba(26,26,25,0.06);
  --shadow-brand: 0 8px 24px rgba(255,45,45,0.22);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* ---------- Grid pattern (brand motif) ---------- */
  --grid-size: 48px; /* @kind spacing */
}

/* =============================================================
   Semantic element styles — drop onto real elements as needed.
   ============================================================= */

.h1, h1.brand {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.h2, h2.brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--fg-1);
}

.h3, h3.brand {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--color-red);
}

.body, p.brand {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
}

.body-lg {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}

.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.mono, code.brand {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ---------- Signature grid pattern on red ---------- */
.brand-grid-red {
  background-color: var(--color-red);
  background-image:
    linear-gradient(to right, var(--bg-grid-lines) 1px, transparent 1px),
    linear-gradient(to bottom, var(--bg-grid-lines) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  /* The real templates use a + cross pattern; approximate with subtle crosshair */
}

.brand-grid-red-plus {
  background-color: var(--color-red);
  background-image:
    radial-gradient(circle at 50% 0, var(--bg-grid-lines) 0 1px, transparent 1.5px),
    radial-gradient(circle at 0 50%, var(--bg-grid-lines) 0 1px, transparent 1.5px);
  background-size: var(--grid-size) var(--grid-size);
}