/* ==========================================
   KPOPIMO DESIGN TOKENS
========================================== */

:root {
    /* ======================================
       COLORS
    ====================================== */

    --color-primary: #4a3559;

    --color-primary-dark: #3d2b4b;

    --color-text: #2b2b2b;

    --color-text-light: #666666;

    --color-text-muted: #888888;

    --color-background: #ffffff;

    --color-surface: #f8f8f8;

    --border-color: #e8e8e8;

    /* Semantic theme roles (Light values intentionally match the current site) */

    --bg-page: var(--color-background);
    --bg-secondary: #fafafa;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-footer: #2f2439;
    --text-primary: var(--color-text);
    --text-secondary: var(--color-text-light);
    --text-muted: var(--color-text-muted);
    --border-subtle: var(--border-color);
    --border-control: #767676;
    --brand-accent: var(--color-primary);
    --link-color: var(--color-primary);
    --button-bg: #3d3d3d;
    --button-hover: #382745;
    --surface-hover: #faf8f5;
    --focus-ring: var(--color-primary);
    --input-bg: #ffffff;
    --input-text: var(--color-text);
    --input-placeholder: var(--color-text-muted);

    /* ======================================
       TYPOGRAPHY
    ====================================== */

    --font-primary: "Manrope", sans-serif;

    /* ======================================
       LAYOUT
    ====================================== */

    --container-width: 1280px;

    --section-spacing: 120px;

    /* ======================================
       BORDER RADIUS
    ====================================== */

    --radius-small: 8px;

    --radius-medium: 16px;

    --radius-large: 24px;

    --radius-pill: 999px;

    --radius-editorial: 16px;

    /* ======================================
       EFFECTS
    ====================================== */

    --transition: 0.3s ease;

    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
}