/* greenbook design tokens
 * Source of truth: greenbook branding STYLE GUIDE ver 1 (Jack Zhen)
 *
 * Update workflow: when the printed style guide updates, edit this file
 * first, then propagate to consuming pages.
 */

@font-face {
  font-family: 'Hiragino Sans';
  src: url('/assets/fonts/HiraginoSans-W8-subset.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Proxima Nova — 6 upright weights + matching italics */
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  /* A Medium serves as the "regular" upright cut — the source pack ships
     no plain Regular; A Medium is the closest visual match. */
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-RegularItalic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-SemiboldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Extrabold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-ExtraboldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Proxima Nova';
  src: url('/assets/fonts/ProximaNova-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ── Colors (style guide page 4: COLOURS 色盤+用比例) ── */
  --color-bg: #FFFFFF;          /* 留白背景 */
  --color-ink: #000000;         /* 黑色次級 100% */
  --color-text: rgba(0, 0, 0, 0.30);     /* 文本 — body */
  --color-text-sub: rgba(0, 0, 0, 0.10); /* 次文本 — hint/divider */
  --color-accent: #AEFF00;      /* 重點螢光 */

  /* Extension colors used by prototype (not in style guide; keep until validated) */
  --color-lime-bright: #C1FF00;
  --color-yellow: #FFF200;
  --color-gray: #B2B2B2;

  /* ── Shadows (style guide page 5: SHADOWS 陰影+用法) ── */
  /* Both shadows: mode multiply, opacity 20%, black, light from upper-left */
  --shadow-tab: 7px 7px 11px rgba(0, 0, 0, 0.20);     /* 浮標 / pill / button */
  --shadow-heading: 3px 3px 5px rgba(0, 0, 0, 0.20);  /* 文本大標題 */
  --shadow-mascot-opacity: 0.12;                       /* Jasper 飄仔 圓盤陰影 */

  /* ── Typography ── */
  --font-logo: 'Hiragino Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-text: 'Proxima Nova', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Chinese — using system stack until the brand Chinese font is decided */
  --font-cn: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* ── Legacy aliases — preserved so existing index.html selectors still work.
     Prefer the --color-* / --shadow-* names in new code. ── */
  --bg: var(--color-bg);
  --ink: var(--color-ink);
  --lime: var(--color-accent);
  --lime-bright: var(--color-lime-bright);
  --yellow: var(--color-yellow);
  --gray: var(--color-gray);
}