/* Core-owned CSS custom property defaults (docs/DECISIONS.md D9-1).
 *
 * The shell loads this file BEFORE the active skin's stylesheet, so a skin that
 * declares no --mg-* values at all still renders a readable site and a working
 * /manage/ area. Skins override by redefining the same names in their own
 * :root block: same specificity, later in the cascade, so the skin wins.
 *
 * Cascade order the shell builds (templates/core/base.html):
 *   1. this file                    core defaults
 *   2. skins/{active_skin}/style.css   site skin
 *   3. #content <link>              board skin (docs/SPEC-v0.3-a.md 2)
 *   4. <style id="mango-theme">     SiteSetting.theme_values
 *
 * RULES FOR THIS FILE
 * - Declarations only. No layout, no component rules, no selectors other than
 *   :root. A skin must never have to undo something the core painted here.
 * - Every name is prefixed --mg-. Unprefixed names would collide with CSS that
 *   admins paste into `html` blocks and with skin-private variables.
 * - The webfont import lives here, next to the font-family defaults it feeds.
 *   Splitting them would mean a token-less skin inherits a font stack whose
 *   files nobody loaded. Every stack still ends in system-ui, so a blocked or
 *   unreachable CDN degrades instead of breaking.
 */

@import url("https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@400;500;700;900&display=swap");

:root {
  /* Color — the mangosteen rind (accent) is the only primary hue; the calyx
     green is a secondary accent used sparingly so it never competes with it.
     The neutrals are deliberately COOL (blue-grey), not warm beige: the page
     sits a shade off pure white so that --mg-surface cards read as raised. */
  --mg-accent: #9e2b54;
  --mg-accent-hover: #7e2143;
  --mg-accent-soft: #fbe6ee;
  --mg-accent-text: #ffffff;
  --mg-green: #7c9a48;
  --mg-green-hover: #64803a;
  --mg-green-soft: #eef3e0;
  --mg-bg: #fbfcfe;
  --mg-surface: #ffffff;
  --mg-surface-tint: #eff3f8;
  --mg-text: #24282e;
  --mg-text-muted: #7a828d;
  --mg-border: #e1e7ef;
  --mg-border-strong: #c9d2de;
  --mg-link: #9e2b54;
  --mg-link-hover: #7e2143;
  --mg-danger: #c23b3b;
  --mg-danger-soft: #fbe9e7;
  --mg-schedule-1: #9e2b54;
  --mg-schedule-2: #7c9a48;
  --mg-schedule-3: #3178a8;
  --mg-schedule-4: #a45d26;
  --mg-schedule-5: #7c4d9e;
  --mg-schedule-6: #2c8a7d;
  --mg-schedule-7: #aa4c72;
  --mg-schedule-8: #65748a;

  /* Background — the image is set from an Attachment id by apps/core/theme.py.
     A raw URL is never accepted from the admin (D9-1). */
  --mg-bg-image: none;
  --mg-bg-repeat: no-repeat;
  --mg-bg-size: cover;
  --mg-bg-position: center;
  --mg-bg-attachment: scroll;

  /* Shape */
  --mg-radius: 16px;
  --mg-radius-sm: 10px;
  --mg-radius-pill: 999px;
  --mg-border-width: 1.5px;
  --mg-shadow: 0 2px 10px rgba(28, 36, 48, 0.07);
  --mg-shadow-lift: 0 8px 24px rgba(28, 36, 48, 0.12);

  /* Motion — press feedback and drawer travel only. No easing curves beyond
     these two; the design brief specifies no motion library and no bounce. */
  --mg-transition-fast: 0.15s ease;
  --mg-transition: 0.2s ease;

  /* Typography — Jua is a single-weight rounded display face used for headings
     and the wordmark only, never for body copy. */
  --mg-font-heading: "Jua", "Noto Sans KR", system-ui, sans-serif;
  --mg-font-body: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mg-font-size-base: 16px;
  --mg-font-size-xs: 12px;
  --mg-font-size-sm: 13px;
  --mg-font-size-md: 18px;
  --mg-font-size-lg: 22px;
  --mg-font-size-xl: 28px;
  --mg-font-size-2xl: 36px;
  --mg-emoticon-size: 1.5em;
  --mg-line-height: 1.7;

  /* Spacing — 4px rhythm. Before these existed the skin used --mg-radius as a
     gap unit, which coupled corner rounding to layout density. */
  --mg-space-1: 4px;
  --mg-space-2: 8px;
  --mg-space-3: 12px;
  --mg-space-4: 16px;
  --mg-space-5: 24px;
  --mg-space-6: 32px;
  --mg-space-7: 48px;
  --mg-space-8: 64px;

  /* Layout */
  --mg-content-width: 960px;
  --mg-shell-nav-width: 16rem;
  --mg-shell-dock-height: 4rem;
  --mg-shell-sidebar-width: 18rem;
  --mg-avatar-size: 4.75rem;
  --mg-avatar-size-sm: 3.25rem;
  --mg-profile-aside-width: 13rem;

  /* Novel reader (docs/SKIN_API.md). Long-form copy runs looser than the rest
     of the site, so the reader keeps its own line height rather than
     inheriting --mg-line-height. */
  --mg-reader-font-scale: 1;
  --mg-reader-line-height: 1.8;
  --mg-reader-align: left;
  --mg-reader-font-family: var(--mg-font-body);
  --mg-reader-font-serif: Georgia, "Times New Roman", serif;
  --mg-reader-width: var(--mg-content-width);
}