/* ============================================================
   ROKI Design System — tokens
   ============================================================ */
:root {
    --roki-orange:       #F47F62;
    --roki-orange-hover: #E66D4F;
    --roki-aqua:         #91DDE6;
    --roki-aqua-soft:    #E8F8FA;

    --text-primary:      #1F2937;
    --text-secondary:    #6B7280;

    --background:        #FFFFFF;
    --background-light:  #F8F9FB;

    --border-color:      #E5E7EB;

    --font-heading: 'Poppins', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    --radius-sm: 12px;
    --radius-md: 16px;

    --shadow-soft: 0 1px 2px rgba(17, 24, 39, 0.04), 0 4px 16px rgba(17, 24, 39, 0.05);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--background);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--text-primary);
    margin: 0;
}

a { color: var(--roki-orange); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}