/**
 * Reemoon Design System — Design Tokens
 * -------------------------------------
 * Single source of truth for color, type, space, radius, shadow, layout.
 * Load first (before site-wide-layout.css). Legacy aliases map below for gradual migration.
 *
 * Docs: docs/design-system.md
 */

/* ===== Fonts: Arimo ===== */
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 400;
    /* src: url('../static/site-fonts/arimo-400.woff2') format('woff2'); */
    src: url("../../site-fonts/arimo/arimo-400.woff2") format('woff2');
}
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 400;
    src: url("../../site-fonts/arimo/arimo-400i.woff2") format('woff2');
}
@font-face {
    font-family: 'Arimo';
    font-style: normal;
    font-weight: 700;
    src: url("../../site-fonts/arimo/arimo-700.woff2") format('woff2');
}
@font-face {
    font-family: 'Arimo';
    font-style: italic;
    font-weight: 700;
    src: url("../../site-fonts/arimo/arimo-700i.woff2") format('woff2');
}

/* ===== Fonts: Noto Sans SC ===== */
/* @font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 100; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-100.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 300; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-300.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 400; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-400.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 500; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-500.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 600; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-600.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 700; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-700.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 800; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-800.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: normal; font-weight: 900; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-900.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 100; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-100i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 300; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-300i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 400; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-400i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 500; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-500i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 600; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-600i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 700; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-700i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 800; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-800i.woff2') format('woff2'); }
@font-face { font-family: 'Noto Sans SC'; font-style: italic; font-weight: 900; src: url('../../site-fonts/noto-sans-sc/noto-sans-sc-900i.woff2') format('woff2'); } */

/* ===== Fonts: Font Awesome 6 ===== */
/* @font-face { font-family: 'Font Awesome 6 Brands'; font-style: normal; font-weight: 400; src: url('../../site-fonts/fa-brands-400.woff2') format('woff2'); }
@font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 400; src: url('../../site-fonts/fa-regular-400.woff2') format('woff2'); }
@font-face { font-family: 'Font Awesome 6 Free'; font-style: normal; font-weight: 900; src: url('../../site-fonts/fa-solid-900.woff2') format('woff2'); } */

/* ===== Fonts: Flaticon ===== */
@font-face { font-family: 'Flaticon'; font-style: normal; font-weight: 400; src: url('../../site-fonts/Flaticon.woff2') format('woff2'); }

/* ===== Fonts: ckin ===== */
@font-face { font-family: 'ckin'; font-style: normal; font-weight: 400; src: url('../../site-fonts/ckin.woff') format('woff'); }

 :root {
    /* ── Brand (VI #00856f) ───────────────────────────────────────────── */
    --rm-color-brand-50: #eef6f3;
    --rm-color-brand-100: #d4e8e3;
    --rm-color-brand-200: #a9d5cb;
    --rm-color-brand-300: #6ee7c7;
    --rm-color-brand-400: #00a88a;
    --rm-color-brand-500: #00856f;
    --rm-color-brand-600: #006b59;
    --rm-color-brand-700: #005247;
    --rm-color-brand-800: #003a34;
    --rm-color-brand-900: #0f2e28;

    --rm-color-brand: var(--rm-color-brand-500);
    --rm-color-brand-dark: var(--rm-color-brand-600);
    --rm-color-brand-light: var(--rm-color-brand-400);
    --rm-color-brand-bright: var(--rm-color-brand-300);
    --rm-color-brand-muted: var(--rm-color-brand-50);
    --rm-color-brand-fg: #ffffff;

    /* ── Neutrals ─────────────────────────────────────────────────────── */
    --rm-color-neutral-0: #ffffff;
    --rm-color-neutral-50: #f8faf9;
    --rm-color-neutral-100: #f1f5f4;
    --rm-color-neutral-200: #e2e8e6;
    --rm-color-neutral-300: #cbd5d2;
    --rm-color-neutral-400: #94a39e;
    --rm-color-neutral-500: #5a756e;
    --rm-color-neutral-600: #3d524c;
    --rm-color-neutral-700: #2a3b36;
    --rm-color-neutral-800: #1a1a1a;
    --rm-color-neutral-900: #0d1210;

    /* ── Semantic ───────────────────────────────────────────────────── */
    --rm-color-success: #059669;
    --rm-color-warning: #d97706;
    --rm-color-error: #dc2626;
    --rm-color-info: #2563eb;

    /* ── Surfaces & text ────────────────────────────────────────────── */
    --rm-color-bg: var(--rm-color-neutral-50);
    --rm-color-bg-muted: var(--rm-color-brand-muted);
    --rm-color-surface: var(--rm-color-neutral-0);
    --rm-color-border: var(--rm-color-brand-100);
    --rm-color-border-strong: var(--rm-color-neutral-300);

    --rm-color-text: var(--rm-color-brand-900);
    --rm-color-text-secondary: var(--rm-color-neutral-600);
    --rm-color-text-muted: var(--rm-color-neutral-500);
    --rm-color-text-inverse: var(--rm-color-neutral-0);
    --rm-color-text-on-brand: var(--rm-color-brand-fg);

    /* ── Layout ─────────────────────────────────────────────────────── */
    --rm-container-sm: 680px;
    --rm-container-md: 960px;
    --rm-container-prose: 560px;
    --rm-container-lg: 1170px;
    --rm-container-xl: 1280px;
    --rm-container-2xl: 1570px;
    --rm-container-full: 1680px;

    --rm-gutter: 15px;
    --rm-gutter-fluid: clamp(1rem, 4vw, 5rem);
    --rm-section-y: clamp(4.5rem, 6vw, 7rem);
    --rm-header-height: 96px;

    /* ── Spacing (4px base) ─────────────────────────────────────────── */
    --rm-space-0: 0;
    --rm-space-1: 0.25rem;   /* 4px */
    --rm-space-2: 0.5rem;    /* 8px */
    --rm-space-3: 0.75rem;   /* 12px */
    --rm-space-4: 1rem;      /* 16px */
    --rm-space-5: 1.25rem;   /* 20px */
    --rm-space-6: 1.5rem;    /* 24px */
    --rm-space-8: 2rem;      /* 32px */
    --rm-space-10: 2.5rem;   /* 40px */
    --rm-space-12: 3rem;     /* 48px */
    --rm-space-16: 4rem;     /* 64px */
    --rm-space-20: 5rem;     /* 80px */
    --rm-space-24: 6rem;     /* 96px */

    /* ── Typography — families ──────────────────────────────────────── */
    --rm-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --rm-font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;

    /* Scale multiplier — overridden per locale on [data-locale] */
    --rm-type-scale: 1;
    --rm-heading-scale: 1;
    --rm-hero-scale: 1;

    /* ── Typography — sizes (rem) ───────────────────────────────────── */
    --rm-text-xs: calc(0.75rem * var(--rm-type-scale));
    --rm-text-sm: calc(0.875rem * var(--rm-type-scale));
    --rm-text-base: calc(1rem * var(--rm-type-scale));
    --rm-text-lg: calc(1.125rem * var(--rm-type-scale));
    --rm-text-xl: calc(1.25rem * var(--rm-type-scale));

    --rm-heading-6: calc(1rem * var(--rm-heading-scale));
    --rm-heading-5: calc(1.125rem * var(--rm-heading-scale));
    --rm-heading-4: calc(1.25rem * var(--rm-heading-scale));
    --rm-heading-3: calc(1.5rem * var(--rm-heading-scale));
    --rm-heading-2: calc(1.875rem * var(--rm-heading-scale));
    --rm-heading-1: calc(2.25rem * var(--rm-heading-scale));
    --rm-display-sm: calc(2.5rem * var(--rm-heading-scale));
    --rm-display-md: calc(3rem * var(--rm-heading-scale));
    --rm-display-lg: calc(3.75rem * var(--rm-heading-scale));

    /* Hero-specific (fluid) */
    --rm-hero-title: clamp(
        calc(1.75rem * var(--rm-hero-scale)),
        calc(4.5vw * var(--rm-hero-scale)),
        calc(3rem * var(--rm-hero-scale))
    );
    --rm-hero-subtitle: clamp(
        calc(0.875rem * var(--rm-type-scale)),
        calc(1.35vw * var(--rm-type-scale)),
        calc(1.0625rem * var(--rm-type-scale))
    );

    /* ── Line height ────────────────────────────────────────────────── */
    --rm-leading-none: 1;
    --rm-leading-tight: 1.25;
    --rm-leading-snug: 1.35;
    --rm-leading-normal: 1.5;
    --rm-leading-relaxed: 1.65;
    --rm-leading-loose: 1.75;

    /* ── Font weight ────────────────────────────────────────────────── */
    --rm-font-normal: 400;
    --rm-font-medium: 500;
    --rm-font-semibold: 600;
    --rm-font-bold: 700;

    /* ── Letter spacing ─────────────────────────────────────────────── */
    --rm-tracking-tight: -0.02em;
    --rm-tracking-normal: 0;
    --rm-tracking-wide: 0.04em;
    --rm-tracking-wider: 0.08em;

    /* ── Radius ─────────────────────────────────────────────────────── */
    --rm-radius-sm: 4px;
    --rm-radius-md: 8px;
    --rm-radius-lg: 12px;
    --rm-radius-xl: 16px;
    --rm-radius-2xl: 24px;
    --rm-radius-card: 1.25rem;
    --rm-radius-pill: 9999px;

    /* ── Shadow ─────────────────────────────────────────────────────── */
    --rm-shadow-xs: 0 1px 2px rgba(15, 46, 40, 0.05);
    --rm-shadow-sm: 0 2px 8px rgba(15, 46, 40, 0.06);
    --rm-shadow-md: 0 8px 24px rgba(0, 133, 111, 0.1);
    --rm-shadow-lg: 0 16px 40px rgba(0, 133, 111, 0.14);
    --rm-shadow-hero: 0 24px 48px rgba(0, 0, 0, 0.25);
    /* ── Motion ─────────────────────────────────────────────────────── */
    --rm-duration-fast: 150ms;
    --rm-duration-normal: 250ms;
    --rm-duration-slow: 400ms;
    --rm-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --rm-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);

    /* ── Z-index ────────────────────────────────────────────────────── */
    --rm-z-dropdown: 100;
    --rm-z-sticky: 200;
    --rm-z-megamenu: 300;
    --rm-z-modal: 400;
    --rm-z-toast: 500;

    /* ── Legacy aliases (migrate pages off these over time) ─────────── */
    --site-brand: var(--rm-color-brand);
    --site-container-max: var(--rm-container-lg);
    --site-large-max: var(--rm-container-2xl);
    --site-small-max: var(--rm-container-sm);
    --site-prose-max: var(--rm-container-prose);
    --site-content-sm: 760px;
    --site-content-md: var(--rm-container-md);
    --site-gutter: var(--rm-gutter);
    --site-section-py: var(--rm-section-y);
    --site-shell-max: var(--rm-container-lg);
    --site-content-max: var(--rm-container-lg);
    --site-inner-text-max: var(--rm-container-prose);

    --about-brand: var(--rm-color-brand);
    --about-brand-dark: var(--rm-color-brand-dark);
    --about-brand-light: var(--rm-color-brand-light);
    --about-brand-bright: var(--rm-color-brand-bright);
    --about-brand-muted: var(--rm-color-brand-muted);
    --about-text: var(--rm-color-neutral-800);
    --about-text-muted: var(--rm-color-text-muted);

    --home-brand: var(--rm-color-brand);
    --home-brand-dark: var(--rm-color-brand-dark);
    --home-brand-light: var(--rm-color-brand-light);
    --home-brand-bright: var(--rm-color-brand-bright);
    --home-accent: var(--rm-color-brand-light);

    --citrus-primary: var(--rm-color-brand);
    --citrus-primary-dark: var(--rm-color-brand-dark);
    --citrus-primary-fg: var(--rm-color-brand-fg);
    --citrus-accent: var(--rm-color-brand-light);
    --citrus-accent-fg: var(--rm-color-brand-fg);
    --citrus-bg: #f7fbf9;
    --citrus-fg: var(--rm-color-brand-900);
    --citrus-muted: var(--rm-color-brand-muted);
    --citrus-muted-fg: var(--rm-color-text-muted);
    --citrus-card: var(--rm-color-surface);
    --citrus-border: var(--rm-color-border);
    --citrus-radius-lg: var(--rm-radius-2xl);
    --citrus-gutter: var(--rm-gutter);
    --citrus-max: var(--rm-container-lg);
    --citrus-prose-max: var(--rm-container-prose);

    --auth-brand: var(--rm-color-brand);
    --auth-brand-dark: var(--rm-color-brand-dark);
    --auth-brand-light: var(--rm-color-brand-muted);

    --contact-brand: var(--rm-color-brand);
    --contact-brand-dark: var(--rm-color-brand-800);
    --contact-brand-deep: var(--rm-color-brand-dark);
    --contact-brand-light: var(--rm-color-brand-light);
    --contact-brand-bright: var(--rm-color-brand-bright);
    --contact-brand-muted: var(--rm-color-brand-muted);
    --contact-text: var(--rm-color-neutral-800);
    --contact-text-muted: var(--rm-color-neutral-600);
    --contact-text-soft: var(--rm-color-text-muted);

    --sol-brand: var(--rm-color-brand);
    --sol-brand-dark: var(--rm-color-brand-800);
    --sol-brand-deep: var(--rm-color-brand-dark);
    --sol-brand-light: var(--rm-color-brand-light);
    --sol-brand-bright: var(--rm-color-brand-bright);
    --sol-brand-muted: var(--rm-color-brand-muted);
    --sol-text: var(--rm-color-neutral-800);
    --sol-text-muted: var(--rm-color-neutral-600);
    --sol-text-soft: var(--rm-color-text-muted);

    --cases-brand: var(--rm-color-brand);
    --cases-brand-dark: var(--rm-color-brand-800);
    --cases-brand-deep: var(--rm-color-brand-dark);
    --cases-brand-light: var(--rm-color-brand-light);
    --cases-brand-bright: var(--rm-color-brand-bright);
    --cases-brand-muted: var(--rm-color-brand-muted);

    --cp-brand: var(--rm-color-brand);
    --cp-brand-dark: var(--rm-color-brand-800);
    --cp-brand-deep: var(--rm-color-brand-dark);
    --cp-brand-light: var(--rm-color-brand-light);
    --cp-brand-bright: var(--rm-color-brand-bright);
    --cp-brand-muted: var(--rm-color-brand-muted);

    --global-brand: var(--rm-color-brand);
    --global-brand-dark: var(--rm-color-brand-800);
    --global-brand-light: var(--rm-color-brand-light);
    --global-brand-bright: var(--rm-color-brand-bright);
    --global-brand-muted: var(--rm-color-brand-muted);

    --hist-brand: var(--rm-color-brand);
    --hist-brand-dark: var(--rm-color-brand-800);
    --hist-brand-deep: var(--rm-color-brand-dark);
    --hist-brand-light: var(--rm-color-brand-light);
    --hist-brand-bright: var(--rm-color-brand-bright);
    --hist-brand-muted: var(--rm-color-brand-muted);

    --hr-brand: var(--rm-color-brand);
    --hr-brand-dark: var(--rm-color-brand-800);
    --hr-brand-light: var(--rm-color-brand-light);
    --hr-brand-bright: var(--rm-color-brand-bright);
    --hr-brand-muted: var(--rm-color-brand-muted);

    --tech-brand: var(--rm-color-brand);
    --tech-brand-dark: var(--rm-color-brand-800);
    --tech-brand-deep: var(--rm-color-brand-dark);
    --tech-brand-light: var(--rm-color-brand-light);
    --tech-brand-bright: var(--rm-color-brand-bright);
    --tech-brand-muted: var(--rm-color-brand-muted);

    --techd-brand: var(--rm-color-brand);
    --techd-brand-dark: var(--rm-color-brand-800);
    --techd-brand-deep: var(--rm-color-brand-dark);
    --techd-brand-light: var(--rm-color-brand-light);
    --techd-brand-bright: var(--rm-color-brand-bright);
    --techd-brand-muted: var(--rm-color-brand-muted);
    --techd-brand-surface: var(--rm-color-neutral-50);

    --support-brand: var(--rm-color-brand);
    --support-brand-dark: var(--rm-color-brand-800);
    --support-brand-deep: var(--rm-color-brand-dark);
    --support-brand-light: var(--rm-color-brand-light);
    --support-brand-bright: var(--rm-color-brand-bright);
    --support-brand-muted: var(--rm-color-brand-muted);

    --auto-brand: var(--rm-color-brand);
    --auto-brand-dark: var(--rm-color-brand-800);
    --auto-brand-deep: var(--rm-color-brand-dark);
    --auto-brand-light: var(--rm-color-brand-light);
    --auto-brand-bright: var(--rm-color-brand-bright);
    --auto-brand-muted: var(--rm-color-brand-muted);

    --sw-brand: var(--rm-color-brand);
    --sw-brand-dark: var(--rm-color-brand-800);
    --sw-brand-deep: var(--rm-color-brand-dark);
    --sw-brand-light: var(--rm-color-brand-light);
    --sw-brand-bright: var(--rm-color-brand-bright);
    --sw-brand-muted: var(--rm-color-brand-muted);

    --hefu-brand: var(--rm-color-brand);
    --hefu-brand-dark: var(--rm-color-brand-800);
    --hefu-brand-deep: var(--rm-color-brand-dark);
    --hefu-brand-light: var(--rm-color-brand-light);
    --hefu-brand-bright: var(--rm-color-brand-bright);
    --hefu-brand-muted: var(--rm-color-brand-muted);

    --zeren-brand: var(--rm-color-brand);
    --zeren-brand-dark: var(--rm-color-brand-800);
    --zeren-brand-light: var(--rm-color-brand-light);
    --zeren-brand-bright: var(--rm-color-brand-bright);
    --zeren-brand-muted: var(--rm-color-brand-muted);

    --isp-brand: var(--rm-color-brand);
    --isp-brand-dark: var(--rm-color-brand-800);
    --isp-brand-deep: var(--rm-color-brand-dark);
    --isp-brand-light: var(--rm-color-brand-light);
    --isp-brand-muted: var(--rm-color-brand-muted);

    --honor-brand: var(--rm-color-brand);
    --honor-brand-dark: var(--rm-color-brand-800);
    --honor-brand-bright: var(--rm-color-brand-bright);

    --sr-brand: var(--rm-color-brand);
    --sr-brand-dark: var(--rm-color-brand-800);

    --rp-brand: var(--rm-color-brand);
    --rp-brand-dark: var(--rm-color-brand-800);
    --rp-brand-light: var(--rm-color-brand-light);
    --rp-brand-bright: var(--rm-color-brand-bright);

    --nav-brand-line: var(--rm-color-brand);
}

/* Latin locales — slightly smaller type for longer copy */
[data-locale="en"] {
    --rm-type-scale: 0.97;
    --rm-heading-scale: 0.96;
    --rm-hero-scale: 0.94;
}

[data-locale="es"] {
    --rm-type-scale: 0.94;
    --rm-heading-scale: 0.9;
    --rm-hero-scale: 0.88;
}

@media (max-width: 991px) {
    :root {
        --rm-header-height: 72px;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --rm-duration-fast: 0ms;
        --rm-duration-normal: 0ms;
        --rm-duration-slow: 0ms;
    }
}


/*  字体 */