/* ==========================================================================
   菠菠间 DS — Colors & Type
   Design tokens for 菠菠间助手 (Bobojian Assistant)
   ========================================================================== */

/* ---------- Web Fonts ----------
   思源黑体 (Source Han Sans) — substituted with Noto Sans SC on Google Fonts
   Inter — Latin / numeric
   JetBrains Mono — performance-screen numerals (anti-jitter, monospaced)

   FLAGGED SUBSTITUTION: 苹方 / HarmonyOS Sans are platform fonts that cannot
   be webfont-served. We use Noto Sans SC as the cross-platform stand-in for
   both 思源黑体 and stage CJK text. In native Flutter app, prefer system fonts.
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ============ COLOR — Off-stage Clay (warm) ============ */
  --clay-50:  #FBF6F0;  /* primary background (rice white) */
  --clay-100: #F4E8DA;  /* card background */
  --clay-300: #E0B894;  /* decorative borders */
  --clay-500: #C4724A;  /* PRIMARY action color */
  --clay-700: #8B4A2A;  /* heading / pressed state */
  --clay-900: #3D1F10;  /* emphasis */

  /* ============ COLOR — Off-stage Moss (semantic only: live / online / OK) ============ */
  --moss-100: #E5EDDF;
  --moss-500: #6A8B5C;
  --moss-700: #3F5C36;

  /* ============ COLOR — Amber (warning, NEVER red) ============ */
  --amber-100: #FBF0D5;
  --amber-500: #D9A441;  /* forbidden-word warning (pre) */
  --amber-700: #8B6420;  /* forbidden-word emitted (loss control) */

  /* ============ COLOR — On-stage Stage (the teleprompter screen) ============ */
  --stage-bg:        #0E0E0F;  /* warm gray-black, NOT pure black */
  --stage-text:      #F5F1EA;  /* warm white, NOT pure white */
  --stage-text-read: #6B665E;  /* already-read text */
  --stage-line:      #C4724A;  /* reading baseline (clay-500) */
  --stage-glow:      rgba(196, 114, 74, 0.15);  /* default edge glow */

  /* ============ COLOR — On-stage Assist (side panel layer) ============ */
  --assist-surface:          #1A1A1B;
  --assist-surface-elevated: #232323;
  --assist-text:             #E8E4DD;
  --assist-text-muted:       #9C978E;

  /* ============ Semantic aliases (Off-stage default) ============ */
  --bg:           var(--clay-50);
  --surface:      #FFFFFF;
  --surface-alt:  var(--clay-100);
  --border:       var(--clay-300);
  --fg:           var(--clay-900);
  --fg-muted:     #6B5848;
  --primary:      var(--clay-500);
  --primary-pressed: var(--clay-700);
  --on-primary:   #FFFFFF;

  --status-live:  var(--moss-500);   /* live/online */
  --status-warn:  var(--amber-500);  /* warning (pre) */
  --status-loss:  var(--amber-700);  /* loss-control (post) */

  /* ============ TYPE — Families ============ */
  --font-sans-cjk: "Noto Sans SC", "Source Han Sans SC", "PingFang SC",
                   "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont,
                   "Helvetica Neue", sans-serif;
  --font-stage-cjk: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC",
                    "Source Han Sans SC", sans-serif;
  --font-latin: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ============ TYPE — Scale (sp ≈ px on baseline DPR) ============ */
  --fs-display-xl: 32px;  /* stage default reading text */
  --fs-display-lg: 24px;  /* large screen titles */
  --fs-title:      18px;  /* card title */
  --fs-body:       16px;  /* body — minimum body size */
  --fs-caption:    14px;  /* helper */
  --fs-micro:      12px;  /* status pill */

  /* Weights — only TWO. NEVER bold 700 in CJK. */
  --fw-regular: 400;
  --fw-medium:  500;

  /* Line heights */
  --lh-tight: 1.25;
  --lh-snug:  1.4;
  --lh-body:  1.6;   /* body default */
  --lh-loose: 1.8;   /* stage reading */

  /* ============ SPACING ============ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;   /* screen edge padding (single-handed thumb sweet spot) */
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;

  /* ============ SIZING ============ */
  --tap-min:        48px;  /* minimum hit target — NOT Material's 44 */
  --btn-primary-h:  56px;  /* primary button height */
  --stage-ctrl-gap: 16px;  /* stage controls min spacing */

  /* ============ RADII ============ */
  --r-sm:   8px;
  --r-md:  14px;   /* DEFAULT — between Material 8 (boxy) and iOS 12 */
  --r-lg:  20px;
  --r-pill: 999px;

  /* ============ SHADOWS — warm clay, never gray ============ */
  --shadow-sm: 0 1px  2px  rgba(139, 74, 42, 0.06);
  --shadow-md: 0 4px  12px rgba(139, 74, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(139, 74, 42, 0.12);

  /* ============ MOTION — Breath ============ */
  /* 0.6Hz human-resting respiration ≈ 1.66s period */
  --breath-period: 1660ms;
  --breath-ease:   cubic-bezier(0.4, 0, 0.6, 1);
  --pulse-fast:    400ms;   /* S3 forbidden-word — held breath then pulse */
}

/* ============ SEMANTIC ELEMENT STYLES ============ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans-cjk);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-size: var(--fs-display-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: var(--clay-700);
  letter-spacing: -0.01em;
}
h2, .h2 {
  font-size: var(--fs-title);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--clay-900);
}
h3, .h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--clay-900);
}
p, .body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
}
small, .caption {
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-snug);
}
.micro {
  font-size: var(--fs-micro);
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.stage-text {
  font-family: var(--font-stage-cjk);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-loose);
  color: var(--stage-text);
  font-weight: var(--fw-regular);
}

/* ============ KEYFRAMES — Breath ============ */
@keyframes breath {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1.00; transform: scale(1.04); }
}
@keyframes breath-glow {
  0%, 100% { box-shadow: 0 0 0 0 var(--stage-glow); }
  50%      { box-shadow: 0 0 16px 2px rgba(196, 114, 74, 0.45); }
}
@keyframes hold-then-pulse {
  /* "hold breath 0.4s, then warn" — S3 forbidden-word incoming */
  0%, 24%   { opacity: 0.4; transform: scale(1); }
  25%, 100% { opacity: 1;   transform: scale(1.06); }
}

.breath {
  animation: breath var(--breath-period) var(--breath-ease) infinite;
}
.breath-glow {
  animation: breath-glow var(--breath-period) var(--breath-ease) infinite;
}