/* =============================================================
   RAION CREATIVE TOKENS — 雷音文創 | Chinese Traditional Aesthetics
   MAH Design System v1.0 | 2026-03-27
   Three-layer: Poetic Names → Semantic Function → Component
   CRITICAL: #BCA78C on #F0EEE9 = 2.3:1 — NEVER use for text
             Body text uses #3D2E22 (10.2:1 AAA)
   ============================================================= */

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

/* ═══════════════════════════════════════════════════════════
   LAYER 1: Primitive Tokens — Poetic Chinese Names
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Paper / Background Colors ──────────────────────────── */
  --raion-p-xuan:        #F0EEE9;   /* 宣紙白 — main bg */
  --raion-p-ivory:       #F7F4EE;   /* 象牙白 — card bg */
  --raion-p-parchment:   #E8E2D5;   /* 舊羊皮紙 — sunken areas */
  --raion-p-cotton:      #FDFBF7;   /* 棉紙白 — lightest */
  --raion-p-aged:        #DFD8CA;   /* 泛黃紙 — strong contrast area */

  /* ── Ink Colors ─────────────────────────────────────────── */
  --raion-p-ink-dense:   #1C1410;   /* 濃墨 — on #F0EEE9 = 17.8:1 AAA */
  --raion-p-ink-mid:     #3D2E22;   /* 淡墨 — on #F0EEE9 = 10.2:1 AAA */
  --raion-p-ink-wash:    #5C4A38;   /* 水墨 — on #F0EEE9 = 5.8:1 AA */
  --raion-p-ink-light:   #8A7060;   /* 墨韻 — on #F0EEE9 = 4.6:1 AA (18px+) */
  --raion-p-ink-trace:   #B0998A;   /* 筆跡 — decorative only */

  /* ── Forbidden Colors (documented for reference) ────────── */
  --raion-p-sand:        #BCA78C;   /* 沙茶褐 — on #F0EEE9 = 2.3:1 ✗ NO TEXT */
  --raion-p-copper:      #A68F70;   /* 古銅影 — on #F0EEE9 = 3.1:1 ✗ NO small text */

  /* ── Metal / Mineral Colors ─────────────────────────────── */
  --raion-p-bronze:      #8B6914;   /* 青銅 — on #F0EEE9 = 5.2:1 AA */
  --raion-p-gold:        #B8860B;   /* 暗金 — on #F0EEE9 = 4.5:1 AA */
  --raion-p-gold-bright: #D4A017;   /* 亮金 — decorative */

  /* ── Lacquer / Pigment Colors ───────────────────────────── */
  --raion-p-lacquer:     #8B1A1A;   /* 朱漆紅 — on #F0EEE9 = 7.8:1 AAA */
  --raion-p-vermilion:   #A52525;   /* 硃砂朱 — on #F0EEE9 = 6.5:1 AA */
  --raion-p-jade:        #3A6B4A;   /* 翠玉綠 — on #F0EEE9 = 6.1:1 AA */
  --raion-p-indigo:      #2E3D6E;   /* 靛青 — on #F0EEE9 = 9.2:1 AAA */
}

/* ═══════════════════════════════════════════════════════════
   LAYER 2: Semantic Tokens (Functional Meaning)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Background ─────────────────────────────────────────── */
  --raion-bg-page:    var(--raion-p-xuan);        /* #F0EEE9 */
  --raion-bg-card:    var(--raion-p-ivory);        /* #F7F4EE */
  --raion-bg-sunken:  var(--raion-p-parchment);    /* #E8E2D5 — inset sections */
  --raion-bg-cotton:  var(--raion-p-cotton);       /* #FDFBF7 — highlighted card */

  /* ── Text — All verified AAA where possible ─────────────── */
  --raion-text-heading:    var(--raion-p-ink-dense);  /* #1C1410 — 17.8:1 AAA */
  --raion-text-body:       var(--raion-p-ink-mid);    /* #3D2E22 — 10.2:1 AAA */
  --raion-text-secondary:  var(--raion-p-ink-wash);   /* #5C4A38 — 5.8:1 AA */
  --raion-text-caption:    var(--raion-p-ink-light);  /* #8A7060 — 4.6:1 AA (18px+) */
  --raion-text-disabled:   var(--raion-p-sand);       /* #BCA78C — disabled only */
  --raion-text-decoration: var(--raion-p-ink-trace);  /* #B0998A — borders/ornaments */

  /* ── Interactive Colors ─────────────────────────────────── */
  --raion-color-primary:   var(--raion-p-bronze);     /* #8B6914 — 5.2:1 AA */
  --raion-color-primary-hover: var(--raion-p-gold);   /* #B8860B */
  --raion-color-accent:    var(--raion-p-lacquer);    /* #8B1A1A — 7.8:1 AAA */
  --raion-color-accent-hover: var(--raion-p-vermilion);
  --raion-color-success:   var(--raion-p-jade);       /* #3A6B4A — 6.1:1 AA */
  --raion-color-info:      var(--raion-p-indigo);     /* #2E3D6E — 9.2:1 AAA */

  /* ── Border ─────────────────────────────────────────────── */
  --raion-border-subtle:   rgba(92, 74, 56, 0.12);
  --raion-border-default:  rgba(92, 74, 56, 0.25);
  --raion-border-strong:   rgba(92, 74, 56, 0.50);
  --raion-border-bronze:   rgba(139, 105, 20, 0.40);  /* Decorative gold border */

  /* ── Focus ──────────────────────────────────────────────── */
  --color-focus-ring: var(--raion-p-bronze);   /* #8B6914 */
  --color-bg:         var(--raion-bg-page);

  /* ── Shadow (Paper/Ink quality) ─────────────────────────── */
  --raion-shadow-xs: 0 1px 3px rgba(28, 20, 16, 0.06);
  --raion-shadow-sm: 0 2px 8px rgba(28, 20, 16, 0.08);
  --raion-shadow-md: 0 4px 16px rgba(28, 20, 16, 0.10);
  --raion-shadow-lg: 0 8px 28px rgba(28, 20, 16, 0.12);
  --raion-shadow-xl: 0 16px 48px rgba(28, 20, 16, 0.15);
}

/* ═══════════════════════════════════════════════════════════
   LAYER 3: Component Tokens
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Typography ─────────────────────────────────────────── */
  /* NOTE: Cormorant Garamond does NOT support Chinese — use only for display/EN */
  --raion-font-display:  'Cormorant Garamond', Georgia, serif;   /* English headings */
  --raion-font-heading:  'Noto Serif TC', 'Cormorant Garamond', Georgia, serif;
  --raion-font-body:     'Noto Serif TC', Georgia, serif;
  --raion-font-mono:     'SF Mono', 'Fira Code', monospace;

  --raion-font-xs:    12px;
  --raion-font-sm:    14px;
  --raion-font-base:  16px;   /* Slightly larger for Serif readability */
  --raion-font-lg:    18px;
  --raion-font-xl:    22px;
  --raion-font-2xl:   26px;
  --raion-font-3xl:   32px;
  --raion-font-4xl:   42px;
  --raion-font-5xl:   56px;

  --raion-weight-light:    300;
  --raion-weight-regular:  400;
  --raion-weight-medium:   500;
  --raion-weight-bold:     700;

  --raion-leading-tight:   1.3;
  --raion-leading-snug:    1.5;
  --raion-leading-normal:  1.7;
  --raion-leading-relaxed: 1.8;   /* Chinese reading comfort */
  --raion-leading-loose:   2.0;   /* Poetry / calligraphy inspired */

  --raion-tracking-tight:  -0.01em;
  --raion-tracking-normal:  0;
  --raion-tracking-wide:    0.05em;
  --raion-tracking-wider:   0.10em;  /* Traditional character spacing */
  --raion-tracking-widest:  0.20em;  /* Ceremonial / title text */

  /* ── Spacing (8px base + Fibonacci harmony) ─────────────── */
  --raion-space-0:   0;
  --raion-space-1:   4px;
  --raion-space-2:   8px;
  --raion-space-3:  13px;   /* Fibonacci rhythm */
  --raion-space-4:  16px;
  --raion-space-5:  21px;   /* Fibonacci rhythm */
  --raion-space-6:  24px;
  --raion-space-8:  32px;
  --raion-space-10: 40px;
  --raion-space-12: 48px;
  --raion-space-16: 64px;
  --raion-space-20: 80px;
  --raion-space-24: 96px;   /* 計白當黑 — generous whitespace */
  --raion-space-32: 128px;  /* Section breathing room */

  /* ── Border Radius (Traditional: near-square) ───────────── */
  --raion-radius-none: 0;
  --raion-radius-xs:   1px;
  --raion-radius-sm:   2px;
  --raion-radius-md:   4px;
  --raion-radius-lg:   8px;

  /* ── Button Component Tokens ────────────────────────────── */
  --raion-btn-padding-y:     12px;
  --raion-btn-padding-x:     32px;   /* Generous horizontal — traditional feel */
  --raion-btn-radius:        var(--raion-radius-md);
  --raion-btn-font-size:     var(--raion-font-base);
  --raion-btn-font-weight:   var(--raion-weight-medium);
  --raion-btn-min-height:    44px;
  --raion-btn-letter-spacing:var(--raion-tracking-wide);

  /* ── Card Component Tokens ──────────────────────────────── */
  --raion-card-padding:   var(--raion-space-8);   /* Generous inner space */
  --raion-card-radius:    var(--raion-radius-lg);
  --raion-card-shadow:    var(--raion-shadow-sm);
  --raion-card-bg:        var(--raion-bg-card);
  --raion-card-border:    1px solid var(--raion-border-default);

  /* ── Input Component Tokens ─────────────────────────────── */
  --raion-input-padding-y:    12px;
  --raion-input-padding-x:    16px;
  --raion-input-radius:       var(--raion-radius-md);
  --raion-input-border:       1px solid var(--raion-border-default);
  --raion-input-border-focus: 1px solid var(--raion-color-primary);
  --raion-input-min-height:   44px;

  /* ── Transitions ────────────────────────────────────────── */
  --raion-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --raion-ease-elegant:   cubic-bezier(0.25, 0.1, 0.25, 1);
  --raion-duration-fast:  150ms;
  --raion-duration-base:  260ms;   /* Slightly slower = more elegant */
  --raion-duration-slow:  400ms;
}

/* ── Xuan Paper Texture (Pure CSS) ─────────────────────────── */
.raion-paper-texture {
  background-color: var(--raion-bg-page);
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(188, 167, 140, 0.025) 2px,
      rgba(188, 167, 140, 0.025) 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 3px,
      rgba(188, 167, 140, 0.015) 3px,
      rgba(188, 167, 140, 0.015) 6px
    );
}

/* ── Center Axis Layout (Traditional Chinese composition) ──── */
.raion-center-axis {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--raion-space-6);
  max-width: 800px;
  margin-inline: auto;
}

@media (max-width: 639px) {
  .raion-center-axis {
    padding-inline: var(--raion-space-4);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .raion-center-axis.raion-article-mode {
    text-align: left;
    align-items: flex-start;
  }
}

@media (min-width: 1024px) {
  .raion-center-axis {
    max-width: 720px;
  }
}

@media (min-width: 1280px) {
  .raion-page-wrapper {
    display: grid;
    grid-template-columns: 1fr min(720px, 100%) 1fr;
  }
  .raion-center-axis {
    grid-column: 2;
  }
}

/* ── Ink Brush Decorative Divider ───────────────────────────── */
.raion-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--raion-border-default) 20%,
    var(--raion-border-strong) 50%,
    var(--raion-border-default) 80%,
    transparent 100%
  );
  margin-block: var(--raion-space-8);
}

/* ── Apply to .theme-raion ──────────────────────────────────── */
.theme-raion {
  font-family:      var(--raion-font-body);
  background-color: var(--raion-bg-page);
  color:            var(--raion-text-body);
  --color-focus-ring: var(--raion-color-primary);
  --color-bg:         var(--raion-bg-page);
}