/* ============================================================
   MITCON Forum — Design Tokens
   Centralized color palette, typography, spacing variables.
   Edit this file to change the entire site's theme.
   ============================================================ */

:root {
    /* ========================================================
       BACKGROUNDS
       ======================================================== */
    --beige: #EAE2D0;
    --beige-soft: #F5F0E4;
    --beige-deep: #DDD3BC;
    --white: #FFFFFF;
    --off-white: #FAF7EF;

    /* ========================================================
       BRAND COLORS — SDG GREEN PALETTE (NEW)
       ========================================================
       Critical: Use --accent (deep green) for TEXT on light bg.
       Use --accent-mint only for BUTTON FILLS / icon backgrounds.
       Never use mint as text on beige/white (WCAG fail).
       ======================================================== */
    --accent: #155A3D;              /* Deep green - for text, links, italic emphasis */
    --accent-deep: #0E3F2B;         /* Deeper green - hover states */
    --accent-mint: #3DBB85;         /* Mint green - button fills, icon circles, decorative */
    --accent-mint-deep: #2A9C6A;    /* Mint hover state */
    --accent-soft: rgba(31, 125, 84, 0.10);   /* Soft tinted bg */
    --accent-glow: rgba(61, 187, 133, 0.18);  /* Glow / focus rings */

    /* ========================================================
       TEXT COLORS
       ======================================================== */
    --ink: #1A1A1A;                 /* Body text */
    --ink-soft: #2E2E2E;            /* Slightly softer body */
    --text-muted: #6B6B6B;          /* Captions, meta */
    --muted: #6B6B6B;               /* Alias */

    /* ========================================================
       BORDERS & LINES
       ======================================================== */
    --line: rgba(17, 17, 17, 0.08);
    --line-strong: rgba(17, 17, 17, 0.14);
    --border: rgba(17, 17, 17, 0.12);

    /* ========================================================
       TYPOGRAPHY
       ======================================================== */
    --font-display: 'Poppins', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-serif: 'Playfair Display', Georgia, serif;

    /* ========================================================
       SHADOWS
       ======================================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.08);
    --shadow-accent: 0 12px 28px rgba(21, 90, 61, 0.20);  /* updated for green */

    /* ========================================================
       RADIUS
       ======================================================== */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-pill: 999px;

    /* ========================================================
       TRANSITIONS
       ======================================================== */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --transition-base: all 0.3s var(--ease);

    /* ========================================================
       LAYOUT
       ======================================================== */
    --container-max: 1280px;
    --section-pad: clamp(60px, 8vw, 100px);
}

/* ============================================================
   Accessibility: respect 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;
    }
}