/* =========================================================
   Ryker Design System — tokens
   colors_and_type.css

   - All color, type, spacing, radius, shadow tokens.
   - Semantic styles (h1, h2, body, code, small) at the bottom.
   - Load AFTER your CSS reset, BEFORE component styles.
   ========================================================= */

/* ---- 字体：用国内 Google Fonts 镜像 fonts.font.im（七牛云维护，备案齐全）
   避免大陆访问 fonts.googleapis.com 被墙等 5-10s 超时。
   中文 fallback 到系统字体（PingFang SC / 微软雅黑），所以即使字体加载失败也能正常显示。
*/
@import url('https://fonts.font.im/css2?family=Saira+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* =========================================================
     COLORS
     ========================================================= */

  /* Brand — oxblood / garnet red, sampled from the logo (#84161C avg) */
  --ryker-red-900: #4A0A0E;   /* deepest, headings on red surfaces */
  --ryker-red-800: #6B1116;
  --ryker-red-700: #84161C;   /* PRIMARY BRAND — wordmark, primary actions */
  --ryker-red-600: #9B2A30;   /* hover */
  --ryker-red-500: #B43339;   /* mid, links on light bg */
  --ryker-red-300: #E27279;   /* disabled brand, decorative */
  --ryker-red-100: #FBE9EA;   /* tinted background — ghost button hover, row highlight */
  --ryker-red-50:  #FDF4F4;   /* lightest wash */

  --brand:       var(--ryker-red-700);
  --brand-hover: var(--ryker-red-600);
  --brand-press: var(--ryker-red-800);
  --brand-tint:  var(--ryker-red-100);

  /* Paper / surface — warm off-whites, never pure white in app chrome */
  --bg-paper:    #FAF8F5;     /* primary app background */
  --bg-paper-2:  #F4EFE7;     /* table header, hover row, subtle fill */
  --bg-card:     #FFFFFF;     /* card / panel surface */
  --bg-overlay:  rgba(26, 22, 20, 0.36); /* modal scrim */

  /* Text / ink — warm-leaning grays */
  --fg-1:        #1A1614;     /* primary text */
  --fg-2:        #5A524D;     /* secondary, labels */
  --fg-3:        #8E8682;     /* tertiary, placeholders, captions */
  --fg-4:        #B8B0AA;     /* disabled, dividers in text */
  --fg-on-brand: #FFFFFF;     /* text on red */

  /* Borders */
  --border:        #E5DFD7;   /* default */
  --border-strong: #D1C9BE;   /* hover / focus rings (non-brand) */
  --border-subtle: #EEE9E0;   /* table row separators */

  /* Semantic — restrained, share warmth with the palette */
  --success-700: #1F7A4F;
  --success-100: #E4F4EB;
  --warning-700: #B67B0A;
  --warning-100: #FCF1D9;
  --danger-700:  var(--ryker-red-700);
  --danger-100:  var(--ryker-red-100);
  --info-700:    #1F5F9B;
  --info-100:    #E2EDF8;

  /* =========================================================
     TYPOGRAPHY
     ========================================================= */

  --font-display: 'Saira Condensed', 'Noto Sans SC', system-ui, sans-serif;
  --font-sans:    'Inter', 'Noto Sans SC', 'PingFang SC', system-ui, sans-serif;
  --font-cn:      'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (px) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;   /* table body, dense data */
  --fs-14: 14px;   /* secondary body */
  --fs-15: 15px;   /* DEFAULT body */
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;   /* h3 */
  --fs-32: 32px;   /* h2 */
  --fs-40: 40px;
  --fs-48: 48px;   /* h1 */
  --fs-64: 64px;   /* display */

  --lh-tight: 1.15;
  --lh-snug:  1.3;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  --tracking-tight:  -0.01em;
  --tracking-base:   0;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.08em;

  /* =========================================================
     SPACING / LAYOUT  (multiples of 4)
     ========================================================= */
  --s0:  0px;
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;

  --sidebar-w: 220px;
  --maxw-content: 1200px;
  --maxw-doc: 820px;

  /* =========================================================
     RADII
     ========================================================= */
  --r-xs: 2px;
  --r-sm: 4px;     /* inputs, chips, badges */
  --r-md: 8px;     /* cards, buttons */
  --r-lg: 12px;    /* modals, sheets */
  --r-pill: 999px; /* status badges */

  /* =========================================================
     SHADOWS
     ========================================================= */
  --shadow-card:  0 1px 2px rgba(26, 22, 20, 0.04),
                  0 0 0 1px rgba(26, 22, 20, 0.02);
  --shadow-pop:   0 4px 16px rgba(26, 22, 20, 0.08),
                  0 0 0 1px rgba(26, 22, 20, 0.04);
  --shadow-modal: 0 24px 64px rgba(26, 22, 20, 0.16),
                  0 4px 16px rgba(26, 22, 20, 0.08);
  --shadow-focus: 0 0 0 3px rgba(132, 22, 28, 0.18);

  /* =========================================================
     MOTION
     ========================================================= */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --dur-base: 160ms;
  --dur-slow: 220ms;
}

/* =========================================================
   SEMANTIC ELEMENT STYLES
   These default styles work on any HTML you drop into a page.
   ========================================================= */

html, body {
  background: var(--bg-paper);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — Saira Condensed for display, latin-leaning */
.rk-display, h1.rk-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-64);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-transform: uppercase;
}

h1, .rk-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-48);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--s4);
}

h2, .rk-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--fs-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: var(--s6) 0 var(--s3);
}

h3, .rk-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: var(--s5) 0 var(--s2);
}

h4, .rk-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: var(--s4) 0 var(--s2);
}

p, .rk-p {
  font-size: var(--fs-15);
  line-height: var(--lh-base);
  color: var(--fg-1);
  margin: 0 0 var(--s3);
}

small, .rk-small {
  font-size: var(--fs-13);
  color: var(--fg-2);
}

.rk-label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--fg-2);
  letter-spacing: var(--tracking-wide);
}

.rk-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--brand);
}

code, .rk-code,
kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-paper-2);
  padding: 1px 5px;
  border-radius: var(--r-xs);
  color: var(--fg-1);
}

pre {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  background: var(--bg-paper-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s4);
  overflow-x: auto;
  color: var(--fg-1);
}

a, .rk-link {
  color: var(--brand);
  text-decoration: none;
}
a:hover, .rk-link:hover { text-decoration: underline; }

hr, .rk-hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--s5) 0;
}

/* Product code — preserve original spacing, monospace */
.rk-model {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.95em;
  color: var(--fg-1);
  letter-spacing: 0;
  white-space: nowrap;
}

/* Price — always with ¥, brand red, mono digits */
.rk-price {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}

/* Status badge base */
.rk-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 600;
  background: var(--bg-paper-2);
  color: var(--fg-2);
  letter-spacing: var(--tracking-wide);
}
.rk-badge--success { background: var(--success-100); color: var(--success-700); }
.rk-badge--warning { background: var(--warning-100); color: var(--warning-700); }
.rk-badge--danger  { background: var(--danger-100);  color: var(--danger-700); }
.rk-badge--info    { background: var(--info-100);    color: var(--info-700); }
.rk-badge--brand   { background: var(--brand); color: var(--fg-on-brand); }