/* ==========================================================================
   NORAAURA Management Consulting — Design Tokens
   colors_and_type.css
   Source of truth: official VIS Guide (sections 2.x Logo, 3.x Color)
   ========================================================================== */

/* ----------------------------------------------------------------------
 * FONT STACK (per VIS §4)
 *   • Microsoft YaHei  — CN body / general (Bold + Light)            (system on Win/Mac)
 *   • Alibaba Puhui 3.0 — Latin workhorse sans (SemiBold + Light)
 *   • Mark SC Offc Pro — NUMERICS ONLY (NPS, ROI, etc.)              (commercial — fallback to Mark Pro / Manrope)
 *   • FreightBig Pro   — DISPLAY SERIF, English-only large titles    (commercial — fallback to Cormorant Garamond)
 * ---------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Noto+Sans+SC:wght@100;300;400;500;700;900&family=JetBrains+Mono:wght@400;500&family=Caveat:wght@400;500;600;700&display=swap');

/* Alibaba Puhui 3.0 — official self-hosted CDN (jsdelivr mirror) */
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/cn-fontsource-alibaba-pu-hui-ti-3-55-regular@1.0.18/font.woff2') format('woff2');
}
@font-face {
  font-family: 'Alibaba PuHuiTi 3.0';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/cn-fontsource-alibaba-pu-hui-ti-3-65-medium@1.0.18/font.woff2') format('woff2');
}

/* ── Commercial fonts (self-hosted, supplied by client) ───────────────── */

/* FF Mark Pro — numerals workhorse (replaces "Mark SC Offc Pro" in VIS) */
@font-face {
  font-family: 'FF Mark Pro';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/FFMarkPro.otf') format('opentype');
}

/* FreightBig Book — English display serif (covers + section dividers) */
@font-face {
  font-family: 'FreightBig Pro';
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/FreightBig-Book.otf') format('opentype');
}

/* Source Han Serif CN Bold — optional CJK serif (covers / quotes) */
@font-face {
  font-family: 'Source Han Serif CN';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/SourceHanSerifCN-Bold.otf') format('opentype');
}

/* Feeling Passionate — script accent (sparingly: signatures, quotes) */
@font-face {
  font-family: 'Feeling Passionate';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('assets/fonts/FeelingPassionate.otf') format('opentype');
}

:root {
  /* ====== COLOR — Primary (3.1) ======================================== */
  --black:   #000000;
  --white:   #FFFFFF;
  --blue:    #3054E5;     /* signature brand blue */

  /* ====== COLOR — Secondary (3.2) ====================================== */
  --grey:    #A8A8A8;
  --sliver:  #F9F9F9;     /* near-white surface (note: spelled "Sliver" in VIS) */
  --sky:     #CADCFF;     /* light-blue accent / B&G use */
  --violet:  #8A2BE2;     /* Limited — B/G only */
  --gold:    #FFDE93;     /* Limited — for font on blue only */

  /* ====== TEXT-ON-BACKGROUND CONSTRAINTS (per VIS) ===================== *
   *   ▸ Black text   #000000 → ONLY on white #FFFFFF, grey #A8A8A8,       *
   *                            and other light surfaces.                  *
   *   ▸ White text   #FFFFFF → ONLY on black #000000, blue #3054E5,       *
   *                            violet #8A2BE2, and other dark surfaces.   *
   *   ▸ Gold  text   #FFDE93 → ONLY on brand blue #3054E5.                *
   *                                                                       *
   * Use the helpers .ink-black / .ink-white / .ink-gold below — they each *
   * carry the legal background list and a guard `:where(...) :not(...)`   *
   * pairing so misuse is visible in dev (red dashed outline).             *
   * --------------------------------------------------------------------- */

  /* ====== COLOR — Themes (3.3) ========================================= *
   * Six approved theme combinations. Apply via [data-theme="..."] on a    *
   * surface (slide, card, page) — every nested role token reroutes.       */

  /* Light: white bg, black ink */
  --bg:        var(--white);
  --bg-alt:    var(--sliver);
  --bg-strong: var(--grey);
  --fg:        var(--black);
  --fg-2:      #4A4A4A;
  --fg-3:      var(--grey);
  --line:      rgba(0, 0, 0, 0.12);
  --line-strong: rgba(0, 0, 0, 0.24);
  --accent:    var(--blue);
}

/* Mid theme — grey background, black ink */
[data-theme="mid"] {
  --bg:        var(--grey);
  --bg-alt:    #BDBDBD;
  --bg-strong: var(--white);
  --fg:        var(--black);
  --fg-2:      #2A2A2A;
  --fg-3:      #555;
  --line:      rgba(0, 0, 0, 0.18);
  --line-strong: rgba(0, 0, 0, 0.32);
  --accent:    var(--blue);
  background: var(--bg);
  color: var(--fg);
}

/* Dark theme — black background, white ink */
[data-theme="dark"] {
  --bg:        var(--black);
  --bg-alt:    #1A1A1A;
  --bg-strong: var(--grey);
  --fg:        var(--white);
  --fg-2:      #BDBDBD;
  --fg-3:      var(--grey);
  --line:      rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.32);
  --accent:    var(--blue);
  background: var(--bg);
  color: var(--fg);
}

/* Blue theme (color · primary) — blue bg, white ink */
[data-theme="blue"] {
  --bg:        var(--blue);
  --bg-alt:    #2849C7;
  --bg-strong: var(--white);
  --fg:        var(--white);
  --fg-2:      rgba(255, 255, 255, 0.85);
  --fg-3:      rgba(255, 255, 255, 0.65);
  --line:      rgba(255, 255, 255, 0.20);
  --line-strong: rgba(255, 255, 255, 0.38);
  --accent:    var(--white);
  background: var(--bg);
  color: var(--fg);
}

/* Blue+Gold (Limited Edition) — blue bg, gold display ink */
[data-theme="blue-gold"] {
  --bg:        var(--blue);
  --bg-alt:    #2849C7;
  --bg-strong: var(--gold);
  --fg:        var(--white);
  --fg-2:      rgba(255, 255, 255, 0.85);
  --fg-3:      rgba(255, 255, 255, 0.65);
  --line:      rgba(255, 255, 255, 0.20);
  --line-strong: rgba(255, 255, 255, 0.38);
  --accent:    var(--gold);     /* display headings only */
  background: var(--bg);
  color: var(--fg);
}

/* Violet (Limited) — violet bg, white ink */
[data-theme="violet"] {
  --bg:        var(--violet);
  --bg-alt:    #6F1FB5;
  --bg-strong: var(--white);
  --fg:        var(--white);
  --fg-2:      rgba(255, 255, 255, 0.85);
  --fg-3:      rgba(255, 255, 255, 0.65);
  --line:      rgba(255, 255, 255, 0.20);
  --line-strong: rgba(255, 255, 255, 0.38);
  --accent:    var(--white);
  background: var(--bg);
  color: var(--fg);
}

:root {
  /* ====== TYPOGRAPHY (per VIS §4) ======================================
   *  CJK body/general          → 微软雅黑 Bold/Light  (system on Win/Mac;
   *                              Noto Sans SC fallback)
   *  Latin workhorse sans      → Alibaba Puhui 3.0 SemiBold/Light
   *  Numerals (NPS, ROI, etc.) → Mark SC Offc Pro (commercial — fallback Manrope)
   *  Display serif (EN titles) → FreightBig Pro (commercial — fallback
   *                              Cormorant Garamond) — covers + section dividers ONLY
   * --------------------------------------------------------------------- */
  --font-cjk:     'Microsoft YaHei', 'PingFang SC', 'Noto Sans SC', sans-serif;
  --font-sans:    'Alibaba PuHuiTi 3.0', 'Microsoft YaHei', 'Noto Sans SC', -apple-system, sans-serif;
  --font-num:     'FreightBig Pro', 'Cormorant Garamond', 'FF Mark Pro', 'Manrope', serif;
  --font-display-serif: 'FreightBig Pro', 'Cormorant Garamond', 'Times New Roman', serif;
  --font-cjk-serif: 'Source Han Serif CN', 'Songti SC', 'STSong', serif;
  --font-script:  'Feeling Passionate', 'Caveat', 'Brush Script MT', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale */
  --fs-display-xl: 96px;
  --fs-display:    72px;
  --fs-h1:         54px;
  --fs-h2:         40px;
  --fs-h3:         28px;
  --fs-h4:         20px;
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-meta:       12px;

  /* Slide-scale (1280×720 / 1920×1080) */
  --slide-fs-display: 64px;
  --slide-fs-h1:      48px;
  --slide-fs-h2:      32px;
  --slide-fs-h3:      22px;
  --slide-fs-body:    14px;
  --slide-fs-meta:    11px;

  /* Weights — brand leans HEAVY. Body 400, headings 700–800. */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-bold:     700;
  --fw-black:    800;

  /* Line height + tracking */
  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;
  --lh-cjk:     1.7;
  --tracking-tight: -0.01em;
  --tracking-normal: 0em;
  --tracking-wide:   0.04em;

  /* ====== SPACING (8px base) =========================================== */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ====== RADII — restrained ========================================== */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ====== SHADOWS — minimal (VIS uses essentially none) ================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.10);

  /* ====== MOTION ======================================================= */
  --ease-std: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-quick:  120ms;
  --dur-state:  180ms;
  --dur-layout: 360ms;

  /* ====== LAYOUT ======================================================= */
  --slide-w: 1280px;
  --slide-h:  720px;
  --slide-pad: 56px;
  --logo-min-w: 200px;   /* Logo Placement rule (2.5) */
}

/* ===== Type primitives ================================================ */
html { color: var(--fg); background: var(--bg); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg);
  background: var(--bg);
  margin: 0;
}

.h-display-xl, h1.display-xl {
  font-family: var(--font-sans);
  font-size: var(--fs-display-xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
  margin: 0;
}
.h-display, h1.display {
  font-family: var(--font-sans);
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin: 0; }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin: 0; }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin: 0; }
h4, .h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-snug); margin: 0; }

.cjk-display { font-family: var(--font-cjk); font-weight: var(--fw-black); }
.cjk-body    { font-family: var(--font-cjk); font-weight: var(--fw-regular); line-height: var(--lh-cjk); }

p, .body { margin: 0 0 var(--s-3) 0; line-height: var(--lh-relaxed); }
p:last-child { margin-bottom: 0; }
.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); }
.small { font-size: var(--fs-small); color: var(--fg-2); }
.meta {
  font-size: var(--fs-meta); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--fg-3); font-weight: var(--fw-medium);
}
code, .code {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--bg-alt); padding: 2px 6px; border-radius: var(--radius-sm);
}
a, .link {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
  transition: text-decoration-thickness var(--dur-state) var(--ease-std);
}
a:hover, .link:hover { text-decoration-thickness: 2px; }

/* ===== Components ===================================================== */
.card {
  background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: var(--s-5);
  transition: box-shadow var(--dur-state) var(--ease-std);
}
.card:hover { box-shadow: var(--shadow-md); }

.tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--radius-pill); background: var(--bg-alt); color: var(--fg-2);
  font-family: var(--font-sans); font-size: var(--fs-meta); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; border: 1px solid var(--line);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-bold);
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: var(--accent); color: var(--white); cursor: pointer;
  transition: background var(--dur-state) var(--ease-std), transform var(--dur-quick) var(--ease-std);
}
.btn:hover  { background: #2849C7; }
.btn:active { transform: scale(0.98); }

.btn--secondary { background: transparent; color: var(--fg); border-color: var(--line-strong); }
.btn--secondary:hover  { background: var(--bg-alt); }

.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--bg-alt); }

.field {
  display: block; width: 100%; height: 44px; padding: 0 var(--s-4);
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--fg);
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-state) var(--ease-std), box-shadow var(--dur-state) var(--ease-std);
}
.field:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(48, 84, 229, 0.18); }

/* ===== Brand chrome (header, footer, avatar) ========================== */
/* The 1.1-style page number used in the VIS header */
.page-number {
  font-family: var(--font-sans); font-size: 14px; font-weight: var(--fw-bold);
  color: var(--fg);
}

/* The "○●" lower-left avatar mark used as a footer flourish */
.avatar-mark {
  display: inline-flex; align-items: center; gap: 0;
  width: 44px; height: 24px; position: relative;
}
.avatar-mark::before, .avatar-mark::after {
  content: ''; width: 22px; height: 22px; border-radius: 50%;
  position: absolute; top: 1px;
}
.avatar-mark::before { left: 0; background: var(--fg); }
.avatar-mark::after  { left: 14px; border: 1.5px solid var(--gold); background: transparent; }

/* When on dark/blue/violet themes, flip the filled circle to white */
[data-theme="dark"]  .avatar-mark::before,
[data-theme="blue"]  .avatar-mark::before,
[data-theme="blue-gold"] .avatar-mark::before,
[data-theme="violet"] .avatar-mark::before { background: var(--white); }

/* ===== Standard slide chrome (per VIS layout grid) ====================
 * Used by every content slide — pageNum (left) · section/sub (centered)
 * · logo (right). Use <div class="slide-chrome">…</div> as the first
 * child of a slide; pair with .slide-footer at the bottom.
 * --------------------------------------------------------------------- */
.slide-chrome {
  position: absolute; top: 32px; left: 56px; right: 56px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  font-family: var(--font-sans);
}
.slide-chrome .sc-page {
  font-size: 14px; font-weight: var(--fw-bold); color: var(--fg);
  letter-spacing: 0;
}
.slide-chrome .sc-section { text-align: center; line-height: 1.25; }
.slide-chrome .sc-section .name { font-size: 14px; font-weight: var(--fw-bold); color: var(--fg); }
.slide-chrome .sc-section .sub  { font-size: 13px; font-weight: var(--fw-regular); color: var(--fg-2); }
.slide-chrome .sc-logo { justify-self: end; }
.slide-chrome .sc-logo img { height: 28px; display: block; }

.slide-footer {
  position: absolute; left: 56px; bottom: 28px;
  display: flex; align-items: center; gap: var(--s-4);
}

/* ===== Type role helpers (VIS §4) ===================================== */
.serif-display {                          /* FreightBig Pro — EN titles ONLY */
  font-family: var(--font-display-serif);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.num {                                    /* Mark SC Offc Pro — numerals ONLY */
  font-family: var(--font-num);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.cjk-bold  { font-family: var(--font-cjk); font-weight: 700; }
.cjk-light { font-family: var(--font-cjk); font-weight: 300; }
.puhui-semi { font-family: var(--font-sans); font-weight: 600; }
.puhui-light { font-family: var(--font-sans); font-weight: 300; }

/* ===== Ink-on-Background guard rails (VIS contrast law) ==============
 *   .ink-black  → #000  on light surfaces only (white / sliver / sky /
 *                       grey / gold)
 *   .ink-white  → #fff  on dark surfaces only  (black / blue / violet)
 *   .ink-gold   → #FFDE93 on brand blue ONLY
 * Misuse triggers a red dashed outline in dev so the violation is
 * obvious during review. Background detection is via [data-bg="…"] on
 * the nearest containing surface, OR via the [data-theme="…"] token.
 * --------------------------------------------------------------------- */
.ink-black { color: var(--black); }
.ink-white { color: var(--white); }
.ink-gold  { color: var(--gold); }

/* Legal pairings — keyed off [data-bg] on a parent surface */
[data-bg="white"]  .ink-black,
[data-bg="sliver"] .ink-black,
[data-bg="sky"]    .ink-black,
[data-bg="grey"]   .ink-black,
[data-bg="gold"]   .ink-black,
[data-bg="black"]  .ink-white,
[data-bg="blue"]   .ink-white,
[data-bg="violet"] .ink-white,
[data-bg="blue"]   .ink-gold {
  outline: none;       /* explicitly legal */
}

/* Cross-keyed off existing [data-theme] tokens — match same legal map */
[data-theme="light"] .ink-black,
[data-theme="mid"]   .ink-black,
[data-theme="dark"]  .ink-white,
[data-theme="blue"]  .ink-white,
[data-theme="blue-gold"] .ink-white,
[data-theme="blue"]  .ink-gold,
[data-theme="blue-gold"] .ink-gold,
[data-theme="violet"] .ink-white {
  outline: none;
}

/* Default: any .ink-* used WITHOUT a recognised legal background gets
 * flagged. We invert: assume illegal, then `outline:none` above clears
 * legal cases. */
.ink-black, .ink-white, .ink-gold {
  outline: 1.5px dashed transparent;
}
@media (prefers-reduced-motion: no-preference) {
  /* Dev-only visual flag — enable by adding `data-vis-strict` to <html> */
  [data-vis-strict] .ink-black,
  [data-vis-strict] .ink-white,
  [data-vis-strict] .ink-gold {
    outline: 1.5px dashed #FF3B30;
    outline-offset: 2px;
  }
  [data-vis-strict] [data-bg="white"]  .ink-black,
  [data-vis-strict] [data-bg="sliver"] .ink-black,
  [data-vis-strict] [data-bg="sky"]    .ink-black,
  [data-vis-strict] [data-bg="grey"]   .ink-black,
  [data-vis-strict] [data-bg="gold"]   .ink-black,
  [data-vis-strict] [data-bg="black"]  .ink-white,
  [data-vis-strict] [data-bg="blue"]   .ink-white,
  [data-vis-strict] [data-bg="violet"] .ink-white,
  [data-vis-strict] [data-bg="blue"]   .ink-gold,
  [data-vis-strict] [data-theme="light"] .ink-black,
  [data-vis-strict] [data-theme="mid"]   .ink-black,
  [data-vis-strict] [data-theme="dark"]  .ink-white,
  [data-vis-strict] [data-theme="blue"]  .ink-white,
  [data-vis-strict] [data-theme="blue-gold"] .ink-white,
  [data-vis-strict] [data-theme="blue"]  .ink-gold,
  [data-vis-strict] [data-theme="blue-gold"] .ink-gold,
  [data-vis-strict] [data-theme="violet"] .ink-white {
    outline: 1.5px dashed transparent;
  }
}