/* ================================================================
   CHINOPIA — Premium Design System v3.0
   Chinese Language Tutorial × Ethiotelecom Partnership
   globals.css — Core Tokens, Fonts, Base Styles
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700&family=Noto+Sans+SC:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */
:root {
  /* Brand Colors */
  --color-primary:       #D42B2B;
  --color-primary-dark:  #8B0000;
  --color-gold:          #C9A84C;
  --color-gold-light:    #F0D080;
  --color-ink:           #1C1C2E;
  --color-cream:         #FDF8F0;
  --color-paper:         #F5ECD7;
  --color-ethio-green:   #007A3D;
  --color-text:          #2C2C2C;
  --color-text-muted:    #6B6B6B;
  --color-white-card:    rgba(255,255,255,0.92);

  /* Typography */
  --font-display: 'Noto Serif SC', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;
  --font-chinese: 'Noto Sans SC', sans-serif;

  /* Shape */
  --radius-card: 16px;
  --radius-btn:  10px;
  --radius-pill: 50px;

  /* Shadows */
  --shadow-card:  0 8px 32px rgba(212,43,43,0.10);
  --shadow-gold:  0 4px 24px rgba(201,168,76,0.18);
  --shadow-hover: 0 16px 48px rgba(212,43,43,0.22);
  --shadow-ink:   0 4px 20px rgba(28,28,46,0.15);

  /* Motion */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── SCROLLBAR ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--color-paper); }
::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: 3px; }

/* ── BASE RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* ── BODY — Cream base with Chinese lattice watermark ───────────── */
body {
  font-family:      var(--font-body) !important;
  background-color: var(--color-cream) !important;
  color:            var(--color-text) !important;
  position:         relative;
}

/* Lattice pattern overlay at ~4% opacity via inline SVG stroke-opacity */
body::before {
  content:       '';
  position:      fixed;
  inset:         0;
  z-index:       -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect width='56' height='56' fill='none'/%3E%3Crect x='3' y='3' width='50' height='50' fill='none' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.7'/%3E%3Crect x='13' y='13' width='30' height='30' fill='none' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Ccircle cx='28' cy='28' r='4' fill='none' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Cline x1='3' y1='28' x2='13' y2='28' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Cline x1='43' y1='28' x2='53' y2='28' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Cline x1='28' y1='3' x2='28' y2='13' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Cline x1='28' y1='43' x2='28' y2='53' stroke='%231C1C2E' stroke-opacity='0.05' stroke-width='0.5'/%3E%3Ccircle cx='3' cy='3' r='1.5' fill='%231C1C2E' fill-opacity='0.05'/%3E%3Ccircle cx='53' cy='3' r='1.5' fill='%231C1C2E' fill-opacity='0.05'/%3E%3Ccircle cx='3' cy='53' r='1.5' fill='%231C1C2E' fill-opacity='0.05'/%3E%3Ccircle cx='53' cy='53' r='1.5' fill='%231C1C2E' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 56px 56px;
}

/* ── TYPOGRAPHY BASE ────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6, .font-heading {
  font-family: var(--font-display) !important;
  color:       var(--color-ink) !important;
}
p, span, li, td, th, label, input, textarea, select, button {
  font-family: var(--font-body);
}
code, pre, kbd { font-family: var(--font-mono); }

a { transition: var(--transition) !important; }

/* ── SECTION ALTERNATION ────────────────────────────────────────── */
.section-cream { background-color: var(--color-cream) !important; }
.section-paper { background-color: var(--color-paper) !important; }

/* ── UTILITY ────────────────────────────────────────────────────── */
.text-gold      { color: var(--color-gold)         !important; }
.text-ink       { color: var(--color-ink)          !important; }
.text-muted-cn  { color: var(--color-text-muted)   !important; }
.bg-cream       { background-color: var(--color-cream)  !important; }
.bg-paper       { background-color: var(--color-paper)  !important; }
.bg-ink         { background-color: var(--color-ink)    !important; }
.bg-primary     { background-color: var(--color-primary) !important; }

/* ── SCROLL REVEAL CLASSES (added by JS) ────────────────────────── */
.reveal-ready   { opacity: 0; transform: translateY(30px); }
.reveal-visible { opacity: 1; transform: translateY(0);
                  transition: opacity 0.6s ease, transform 0.6s ease; }

/* ── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto !important;
  }
  .reveal-ready { opacity: 1 !important; transform: none !important; }
}