/* ═══════════════════════════════════════════════════════════════
   roronoa.casa · Design Tokens
   全站统一设计变量 · for ルル
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Noto+Serif+SC:wght@400;500;600;700&display=swap');

:root {

  /* ══════════════════════════════════════
     PALETTE · 调色板
     ══════════════════════════════════════ */

  /* 粉玫瑰基础 · 全站默认 */
  --rose-50:  #fdf2f4;
  --rose-100: #f9eaee;
  --rose-200: #f5d5de;
  --rose-300: #e8a0bf;
  --rose-400: #d4728c;
  --rose-500: #a85a70;
  --rose-600: #7a3f52;

  /* 金 · 重点色 / hover / 强调 */
  --gold-50:  #fefaf0;
  --gold-100: #faf0d4;
  --gold-200: #f0dca0;
  --gold-300: #d4b06a;
  --gold-400: #c9a24a;
  --gold-500: #a6832e;
  --gold-600: #7a5f1a;

  /* 墨绿 · 罗罗诺亚绿 · 引文/辅助 */
  --green-50:  #f0f4ee;
  --green-100: #dde6d6;
  --green-200: #b5c9a8;
  --green-300: #7a8468;
  --green-400: #5c6b4a;
  --green-500: #3e4a32;
  --green-600: #2a3322;

  /* 棕调 · 文字/界面 */
  --ink-100: #a8929c;
  --ink-200: #8a7480;
  --ink-300: #6b5660;
  --ink-400: #4e3a44;
  --ink-500: #3e2d35;
  --ink-600: #2a1c22;

  /* 功能色 */
  --surface:      #fff5f7;
  --surface-deep: #fce4ea;
  --bg:           var(--rose-100);
  --rule:         rgba(107, 86, 96, 0.18);
  --overlay:      rgba(30, 18, 24, 0.6);

  /* 稀有度色板（gacha专用，其他站可复用做等级标签） */
  --rarity-n:    #999;
  --rarity-r:    #5B9BD5;
  --rarity-sr:   var(--rose-400);
  --rarity-ssr:  var(--gold-400);
  --rarity-ur-a: #ff6b9d;
  --rarity-ur-b: var(--gold-400);
  --rarity-ur-c: #7B68EE;


  /* ══════════════════════════════════════
     TYPOGRAPHY · 字体
     ══════════════════════════════════════ */

  /* 字体栈 */
  --font-display:  'Playfair Display', 'Noto Serif SC', Georgia, serif;
  --font-body:     'Cormorant Garamond', 'Noto Serif SC', Georgia, serif;
  --font-cjk:      'Noto Serif SC', 'Source Han Serif SC', 'FangSong', serif;
  --font-ui:       -apple-system, 'SF Pro Text', 'Noto Sans SC', sans-serif;

  /* 字号阶梯 · modular scale ~1.25 */
  --text-xs:   0.72rem;   /* 11.5px 标签/元信息 */
  --text-sm:   0.85rem;   /* 13.6px 辅助文字 */
  --text-base: 1rem;      /* 16px 正文 */
  --text-md:   1.15rem;   /* 18.4px 大正文/小标题 */
  --text-lg:   1.4rem;    /* 22.4px 子标题 */
  --text-xl:   1.8rem;    /* 28.8px 标题 */
  --text-2xl:  2.25rem;   /* 36px 大标题 */
  --text-3xl:  2.8rem;    /* 44.8px 页面标题 */
  --text-hero: clamp(2.4rem, 5vw, 3.6rem);

  /* 行高 */
  --leading-tight:  1.3;
  --leading-normal: 1.75;
  --leading-loose:  2;

  /* 字间距 */
  --tracking-tight:  0.02em;
  --tracking-normal: 0.04em;
  --tracking-wide:   0.12em;
  --tracking-ultra:  0.25em;


  /* ══════════════════════════════════════
     SPACING · 间距
     ══════════════════════════════════════ */

  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */

  /* 页面边距 */
  --page-gutter:    clamp(1.2rem, 4vw, 2rem);
  --page-max-width: 1100px;
  --content-max:    720px;


  /* ══════════════════════════════════════
     SHAPE · 圆角 / 边框
     ══════════════════════════════════════ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  --border-thin:  1px solid var(--rule);
  --border-accent: 2px solid var(--rose-400);
  --border-gold:   2px solid var(--gold-400);


  /* ══════════════════════════════════════
     SHADOW · 阴影
     ══════════════════════════════════════ */

  --shadow-sm:   0 1px 3px rgba(168, 90, 112, 0.08),
                 0 1px 2px rgba(168, 90, 112, 0.04);
  --shadow-md:   0 4px 12px rgba(168, 90, 112, 0.1),
                 0 2px 4px rgba(168, 90, 112, 0.06);
  --shadow-lg:   0 8px 24px rgba(168, 90, 112, 0.12),
                 0 4px 8px rgba(168, 90, 112, 0.06);
  --shadow-xl:   0 16px 48px rgba(168, 90, 112, 0.15),
                 0 8px 16px rgba(168, 90, 112, 0.08);
  --shadow-glow-rose: 0 0 24px rgba(212, 114, 140, 0.25);
  --shadow-glow-gold: 0 0 24px rgba(196, 162, 101, 0.3);


  /* ══════════════════════════════════════
     MOTION · 过渡 / 动画
     ══════════════════════════════════════ */

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:   0.15s;
  --duration-normal: 0.3s;
  --duration-slow:   0.6s;

  --transition-color:     color var(--duration-normal) var(--ease-smooth);
  --transition-transform: transform var(--duration-normal) var(--ease-out);
  --transition-shadow:    box-shadow var(--duration-normal) var(--ease-smooth);
  --transition-all:       all var(--duration-normal) var(--ease-out);


  /* ══════════════════════════════════════
     DECORATIVE · 装饰性素材路径
     ══════════════════════════════════════ */

  --asset-base: '/design-assets/';

  /* 纸纹叠加 */
  --texture-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/></filter><rect width='300' height='300' filter='url(%23n)' opacity='0.25'/></svg>");
}


/* ══════════════════════════════════════
   THEME OVERRIDES · 各站独立美学
   ══════════════════════════════════════ */

/* Letters 黑粉夜色 */
[data-theme="letters"] {
  --bg:           #1e1218;
  --surface:      rgba(255, 200, 220, 0.03);
  --surface-deep: rgba(212, 114, 140, 0.07);
  --ink-300:      rgba(255, 238, 244, 0.93);
  --ink-400:      rgba(255, 238, 244, 0.8);
  --ink-500:      rgba(255, 238, 244, 0.93);
  --rule:         rgba(212, 114, 140, 0.12);
}

/* Thesis 牛皮纸 */
[data-theme="thesis"] {
  --bg:           #efe4cf;
  --surface:      #f7f0e0;
  --surface-deep: #e8dcc0;
  --rose-400:     #cc785c;  /* claude 赭 */
  --ink-300:      #5a4a3a;
  --ink-400:      #3e3024;
  --ink-500:      #2e2018;
  --rule:         rgba(90, 74, 58, 0.2);
  /* 绿光铁律 · 不准动 */
  --green-gatsby: #7fbf7f;
}


/* ══════════════════════════════════════
   UTILITY · 基础排版重置
   ══════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
}

body.rr-base {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink-500);
  font-family: var(--font-body);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.rr-base::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.3;
  background-image: var(--texture-paper);
}

/* 标题默认用 display 字体 */
.rr-base h1, .rr-base h2, .rr-base h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink-500);
}

/* 链接 */
.rr-base a {
  color: var(--rose-400);
  text-decoration: none;
  transition: var(--transition-color);
}
.rr-base a:hover {
  color: var(--gold-400);
}